Hacker0x01 / react-datepicker

A simple and reusable datepicker component for React
https://reactdatepicker.com/
MIT License
8.06k stars 2.24k forks source link

Input blur after date select #4844

Closed MardanovaA closed 3 months ago

MardanovaA commented 4 months ago

Date picker does not blur input after date select.

Steps to reproduce the behavior:

  1. Go to https://reactdatepicker.com//#example-default
  2. Click on date input field
  3. Select any date
  4. Calendar closes, but input stay focused.

Expected behavior Calendar closes, input blurs.

Even worse:

  1. Go to another browser tab
  2. Return to date picker tab
  3. Calendar is open. Expected behavior Calendar is closed

I set handleBlur function for onBlur, onSelect and onCalendarClose events. I think, that input loses focus for a split second, after executing itCalendarCloses, but then comes into focus again

const handleBlur = () => {
   pickerRef.current?.input?.blur(); // it doesn't work

  setTimeout(() => {
        pickerRef.current?.input?.blur(); // it is works
  }, 1000);
};

Any help how can I control input focus, please?

balajis-qb commented 4 months ago

I'll look into this issue