react-datepicker
react-datepicker copied to clipboard
Unnecessary state change occurs when using the open prop
Is your feature request related to a problem? Please describe.
I'm using the open
prop to control the state of the Picker. However, when I change the date in the header and then click outside of the Picker, the date I was selecting gets reset.
This phenomenon can also be observed in the first example on the docs page.
- Change the month using prev/next month buttons.
- Click outside from the calendar.
https://github.com/Hacker0x01/react-datepicker/assets/86335497/10ba84c8-0062-428a-be5a-01971369da78
I discovered this action is caused by the handleClickOutside
and setOpen
method. I think using the open
prop implies using the component in a controlled way; therefore, I believe there should be no need for the internal open state to change.
Describe the solution you'd like
I think the issue could be resolved if the internal open state doesn't change when using the open
prop. I want to modify the setOpen method on line 451 of src/index.jsx
setOpen = (open, skipSetBlur = false) => {
if(this.props.open !== undefined) {
return;
}
// below is the original code
this.setState(
// ...
)
Additional context
My goal is to use the Mui Select component inside a custom header. Mui Select uses the Mui Modal internally to display the options, and this modal creates a new screen element under the body to show the options. As a result, when selecting an option, the picker closes due to the react-onclickoutside
behavior. I attempted to control this using the open prop; however, while trying to change the date, I encountered a situation where the date gets reset as the internal open state changes.
Hi @enif-hpcnt , In the example you shared, on clicking of the next or previous month button, only the view changes but not the selected date. To select a date, we have to manually click. So only if you noticed in the selected date input, it remains same regardless of the month change and when you click outside the month view is restoring back to the selected date's month.
To understand the issue, are you saying we should not change the month view back to the selected date's month on click outside if we use open
prop?