Prop isOpen does not control opened state of calendar

[leo-iomer]

Based on the description and naming of the isOpen prop it is expected that if the isOpen prop is passed to the component the isOpen prop will control the open/closed state of the calendar. However, that is not the case and the component will open/close regardless of isOpen.

From my testing isOpen appears to work like a trigger and will open/close the calendar if isOpen changes and the calendar isn't already in the implied state of the prop.

[wojtekmaj]

In other words, isOpen only works when changed, but initial value is ignored?

[leo-iomer]

Not quite, if I initially set the isOpen to true the component will mount in the open state but on clicking outside of the calendar (or selecting a date) the calendar will transition to the closed state. In order to use the prop to reopen you then need to toggle isOpen prop to false then back to true to change the calendar back to the open state.

[wojtekmaj]

I see. That's actually very interesting case. An edge case IMO. Forcing this state to be always matching the one from props instead of being updated on mount and on prop change would make it impossible to use the calendar easily.

What would I suggest is rendering react-calendar yourself next to your date picker and make both components connected by yourself. In fact, that's what DatePicker.jsx is doing: It's wrapping DateInput component and Calendar component and keeps them in sync. What you need is just our own version of it in which onChange method is not closing the calendar.

While DateInput itself is internal component which is not documented, I can guarantee to it it is not a subject to change in any forseeable future, so you can safely use this custom wrapper for a long time!

[leo-iomer]

Then in my opinion isOpen would is named incorrectly, a more accurate naming would be something like triggerOpen from my perspective.

I haven't had time to look into the internal workings of the component to see how difficult to implement this but adding in additional props onRequestCalendarClose and onRequestCalendarOpen props as function which would be called when the calendar would normally open/close would let calendar be used easily and have isOpen actually control the state of the calendar. Additionally this change would also bring the date picker in line with a lot of other components that maintain a open/closed state that I have run into such as modals.

[wojtekmaj]

I think that's an awesome idea. Would you please share some example implementation in some popular solution?

[leo-iomer]

While I can't immediately think of a example that uses something like a "onOpen" or "onRequestOpen" here are two modal components that maintain the open state using a "isOpen" and "onDismiss"/"onRequestClose":

• https://developer.microsoft.com/en-us/fabric#/components/modal
• https://github.com/reactjs/react-modal

[wojtekmaj]

Thank you! That makes it more clear for me.

[chenasraf]

I agree with @leo-iomer - this is a really weird design choice. onClose or something of the likes is NECESSARY if you derive open state from props, because there needs to be a bounce back to update the parent state back to closed. As this currently is, this package became useless for my use case on the grounds of a single props which is also pretty much the most basic prop of them all.

The calendar literally can't be re-opened.

[akkharolia]

You need to set initial state of isOpen state variable to true and then update the same on onCalendarOpen. change state of isOpen variable after success of onChange.
Here is my code:
this.state={openDatePicker:true}
handleChange(){this.setState{openDatePicker:false}}
<DatePicker isOpen={this.state.openDatePicker} onCalendarOpen={() => this.setState({openDatePicker:true})} onChange={this.handleChange} />

[github-actions]

This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this issue will be closed in 14 days.

[github-actions]

This issue was closed because it has been stalled for 14 days with no activity.