OnBlur not called in 2.11.0

[axrs]

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

1. Interact with the picker and select a date.
2. No events are logged in the console.
3. Click the input again (see the cursor is inside the input)
4. Press tab. Blur event logged.

Expected behavior Blur callback to be called one the input has left focus.

Desktop (please complete the following information):

• OS: OSX Catalina
• Browser Chrome
• Version 79.0.3945.117

Additional context The picker would blur when closed in 1.9.0

[jgarplind]

From my limited testing, onFocus seems to have the same issue.

I'm running "version": "2.9.6",

• OS: Windows 10
• Browser: Chrome
• Version 79.0.3945.130

[dihan]

Anyone found a work around?

onBlur not working for me

OS: OSX Catalina Browser: Chrome react-datepicker: 2.14.1

[remmel]

The opposite event onFocus is not working anymore neither https://github.com/Hacker0x01/react-datepicker/issues/1601

[pompan129]

OnBlur is not even working when selecting a date on the Demo site ... https://reactdatepicker.com/

[Develliot]

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:

  handleBlur = event => {
    if (!this.state.open || this.props.withPortal || this.props.showTimeInput) {
      this.props.onBlur(event);
    }

I had to hack my text input only fields with

showTimeInput={true}
open={false}

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

[samidhaVerma]

A work around I discovered (if you are trying to use it for an onChange function) is onChangeRaw and then you declare your event based function for this attribute.

[gvbl]

Another work around is to listen to onCalendarClose() and trigger validation manually. I would still be grateful for a fix. 🙏

[SivaGanesh56]

any proper fix

[eugeneborodkin]

This desperately needs resolution. I'm not able to validate the datepicker in Formik after it gets blurred. Any progress?

[eugeneborodkin]

FYI, this solution in Formik worked for me. I used React-Datepicker's onChangeRaw together with Formik's setFieldTouched(..). This fixed the immediate blur-validation problem for me.

    onChangeRaw={e => {
        setFieldTouched(field.name, true, true);
    }}

[jkamleh]

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".

[cristianciobanu0212]

Hello, We are still waiting for this fix. Is it possible for an estimation time for this fix? Thanks!

[jonasdev]

Same issue. onBlur prop is not doing anything. "react-datepicker": "^4.2.1"

But I did solve my issue with a wrapper

const handleChange = (date) => {
  setStartDate(date)
  setOpen(true)
}

<div onBlur={() => setOpen(false}>
  <DatePicker onChange={(date) => handleChange(date)} />
</div>

[luispcosta]

Bumping, we're also waiting for this fix

[maaajo]

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.

[h4i4nhnc]

onChangeRaw can fire onBlur event but It's NOT work when user just focus then blur out without any change.

[Alina-github]

I've solved the issue with adding autoFocus as a prop:

<DatePicker  
        autoFocus
        onCalendarClose={handleClose}
        onBlur={handleClose}
        selected={new Date()}
        onChange={handleChange}  />

So that once the datePicker clicked, the focus is set and onBlur will fire.

[lucidlive]

The issue with onFocus and onBlur makes this component basically unusable. It's too bad.

[yurivasconcelos]

still happening...

[rene-stesl]

OnBlur isn't called if DatePicker is used with Portals and you tab out of the input: https://github.com/Hacker0x01/react-datepicker/issues/3522#issuecomment-1149954270

[Mahdiyeh]

I was able to check validation on closing the calendar: comment

[jkav77]

I'm also interested in solving this. I can submit a PR, but I'm not sure what the best solution is.

Expected behavior

1. User types a date into the input and presses tab, or user clicks a date on the calendar popup.
2. The user-supplied onBlur callback prop runs.

Actual behavior

onBlur callback does not run.

Potential Messy Workaround

1. Duplicate onBlur functionality in the onSelect prop. For my use case, this handled the user clicking on a date from the date picker.
2. Also duplicate onBlur functionality in the onCalendarClose prop. This partially resolved my requirements for when the user enters dates manually from the keyboard. However, this callback does not receive an event argument (as noted by others above). This workaround also does not fire when the user types a date and presses tab. It only works when the user types a date and then presses Enter or clicks outside the datepicker to close the calendar.
3. Also duplicate onBlur functionality in the onKeyDown callback if event.key is "Tab". This works for shift-Tab as well because there is no need to check if the shift key is also pressed.

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 onBlur to work.

<DatePicker
        selected={date}
        onChange={(d) => {
          setDate(d);
        }}
        onSelect={handleBlur}
        onBlur={handleBlur}
        onCalendarClose={handleBlur}
        onKeyDown={(e) => {
          if (e.key === "Tab") {
            handleBlur();
          }
        }}
></DatePicker>

Potential [untested] Solution

Change the DatePicker internal handleBlur function to propagate blur events to the user even when the calendar is still open. Currently, the handle blur function ignores blur events if the calendar is open (see below). There is probably a reason for ignoring these events, but it isn't immediately obvious to me what the reason is. This solution would simply be to delete the first conditional check !this.state.open ||.

handleBlur = (event) => {
    if (!this.state.open || this.props.withPortal || this.props.showTimeInput) {
      this.props.onBlur(event);
    }

    this.setState({ focused: false });
  };