React-datepicker: onBlur is not called when day is clicked after v2.12.0

[bobmk2]

Describe the bug

onBlur is not called when day is clicked and closed the calendar after v2.12.0.

To Reproduce

1. Click input form and open calendar.
2. Click the day.
3. Confirm browser debug console.

Sample code

import * as React from 'react';
import DatePicker from 'react-datepicker';
import * as moment from 'moment';

export const SampleDatePicker = () => {
  const handleChange = React.useCallback((next: Date) => {
    console.log('> change', moment(next).format('YYYY/MM/DD'));
  }, []);

  const handleSelect = React.useCallback((next: Date) => {
    console.log('> select', moment(next).format('YYYY/MM/DD'));
  }, []);

  const handleBlur = React.useCallback(() => {
    console.log('> blur');
  }, []);

  return <DatePicker onChange={handleChange} onSelect={handleSelect} onBlur={handleBlur} />;
};

Expected behavior

onBlur is called when day is clicked, it is same behavior as before v2.11.0.

Screenshots

v2.12.0

v2.11.0

Note

• Sorry for using unreleased version, after v2.12.0. :bow:
  
  
  
  • I only checked the latest version with npm info react-datepicker versions.
  
  

[jaredwindover]

I realized you can use the onCalendarClose handler to workaround this (at least in my case).

[Naghal]

I can reproduce this in my project. However, for me onCalendarClose is never called.

[Gluestick]

Unfortunately also affected by this. This change seems to be the culprit: https://github.com/Hacker0x01/react-datepicker/pull/2027/files#diff-73642d587163f2eb4d72f0fa6ebfba02L386-L392

Reverting those few lines to their old v2.11.0 state results in onBlur being called after the state change. However, with withPortal, onBlur is called _before_ the state change, so I'm not sure how to go about properly fixing this.

[tu4mo]

Duplicate of #2028.