react-datepicker
react-datepicker copied to clipboard
Open prop is not being respected by onInputClick
Describe the bug The onInputClick function on line 724 in index.jsx is not taking into consideration if the calendar should be open or not and it is setting the open state to true when the calendar may not be open. This is causing unexpected behavior with things like onBlur which rely on the open to be false to trigger the callback.
onInputClick = () => {
if (!this.props.disabled && !this.props.readOnly) {
this.setOpen(true);
}
this.props.onInputClick();
};
To Reproduce Steps to reproduce the behavior:
Using this component
const [selected, setSelected] = useState(new Date());
<DatePicker
selected={selected}
onChange={(val) => {
setSelected(val);
}}
preventOpenOnFocus={true}
onBlur={() => {
alert("Blur triggered");
}}
open={false}
/>
-
Focus the field by clicking the input
-
Click outside of the component
-
Notice that the alert was not triggered
-
Unmount/Refresh component and rerender
-
Focus the field by tabbing into it (Not from clicking)
-
Click out of the field
-
Notice that the Alert was then triggered.
Expected behavior Clicking the field should not set open to true if the calendar is not opened.
Screenshots If applicable, add screenshots to help explain your problem.
Desktop (please complete the following information):
- OS: Windows
- Browser Chrome
- Version 4.21.0
Additional context @martijnrusschen I could provide a PR to fix this issue, but not familiar with how to do that, or writing unit tests to verify.
I think this is somewhat related to #2028
Adding to this I think I found a work around for my issue.
By passing prop showTimeInput={true}
it will allow the onBlur event to trigger.
Then manually setting the value will keep it in sync with the selected value.
<DatePicker
selected={selected}
value={value}
ref={ref}
onChange={(val) => {
setSelected(val);
}}
onBlur={() => {
setValue(formatDate(selected));
}}
showTimeInput={true}
open={false}
/>
This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 10 days.