-
Notifications
You must be signed in to change notification settings - Fork 2.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
OnBlur not called in 2.11.0 #2028
Comments
From my limited testing, onFocus seems to have the same issue. I'm running
|
Anyone found a work around? onBlur not working for me OS: OSX Catalina |
The opposite event onFocus is not working anymore neither #1601 |
OnBlur is not even working when selecting a date on the Demo site ... |
This is really annoying if you want to validate on blur, It does blur but only with keyboard enter, very bizarre. so the source looks like this:
I had to hack my text input only fields with
even though I don't show the time input, blur starts to work again. I'm considering making a pull request to fix this but it's super hard to follow the open state and the setOpen because soooo many things seem to change that state. But I bet you the issue is with the open state being set to true when it shouldn't be |
A work around I discovered (if you are trying to use it for an |
Another work around is to listen to onCalendarClose() and trigger validation manually. I would still be grateful for a fix. 🙏 |
any proper fix |
This desperately needs resolution. I'm not able to validate the datepicker in Formik after it gets blurred. Any progress? |
FYI, this solution in Formik worked for me. I used React-Datepicker's
|
Still appears to be an issue and onCalendarClose() is not a suitable alternative as it does not pass event as onBlur() would, they aren't interchangeable and cause issues when integrating with existing libraries such as Formik, it's also still not working on the demo site "onBlur callbacks in console". |
Hello, |
Same issue. onBlur prop is not doing anything. But I did solve my issue with a wrapper
|
Bumping, we're also waiting for this fix |
onBlur is working, but only after second click on input after selecting. This is showing to me that onChange isn't really firing onBlur and only manually clicking on input fires onBlur. This is difficult when you want to do validation on onBlur. My workaround when working with react-hook-formm was to run trigger() after setting the field value. |
onChangeRaw can fire onBlur event but It's NOT work when user just focus then blur out without any change. |
I've solved the issue with adding autoFocus as a prop:
So that once the datePicker clicked, the focus is set and onBlur will fire. |
➖ Remove react-datepicker (Hacker0x01/react-datepicker#2028)
The issue with onFocus and onBlur makes this component basically unusable. It's too bad. |
still happening... |
OnBlur isn't called if DatePicker is used with Portals and you tab out of the input: |
I was able to check validation on closing the calendar: comment |
I'm also interested in solving this. I can submit a PR, but I'm not sure what the best solution is. Expected behavior
Actual behavior
Potential Messy Workaround
My cumbersome workaround now looks like the below, but I'm not sure how many edge cases I'm missing. I can also understand this may not work when integrating with another library that expects <DatePicker
selected={date}
onChange={(d) => {
setDate(d);
}}
onSelect={handleBlur}
onBlur={handleBlur}
onCalendarClose={handleBlur}
onKeyDown={(e) => {
if (e.key === "Tab") {
handleBlur();
}
}}
></DatePicker> Potential [untested] SolutionChange the DatePicker internal handleBlur = (event) => {
if (!this.state.open || this.props.withPortal || this.props.showTimeInput) {
this.props.onBlur(event);
}
this.setState({ focused: false });
}; |
onClickOutside={handleClickOutside} and then close the calendar changing date picker open attribute |
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. |
This issue was closed because it has been stalled for 10 days with no activity. |
Describe the bug
The OnBlur callback does not appear to be being called in
2.11.0
To Reproduce
Visit https://reactdatepicker.com/#example-onblur-callbacks-in-console and open the developer console
Expected behavior
Blur callback to be called one the input has left focus.
Desktop (please complete the following information):
Additional context
The picker would blur when closed in
1.9.0
The text was updated successfully, but these errors were encountered: