Focus event triggered on fast interaction

[albanx]

react-dates/src/components/DateInput.jsx

Line 121 in b7bad38

this.inputRef.focus();

On Firefox on Mac OS, if you keep clicking fast enough between the dates of a calendar it will trigger the focus event and therefore the clickOutSide function by the related target, causing the datepicker to close.

This issue happens on Firefox and unit test with jest and react testing library. Cannot replicate on chrome.

By commenting the above line everything works fine including the test.

[ljharb]

When that line is commented, then the isFocused prop wouldn't work, no?

[ljharb]

The blame points to 9e6e89b / #212.

[albanx]

When that line is commented the date picker works fine.
when is uncommeted this happens:

• Click dates fast enough in Firefox
• At some point, the element looses focus,
• the focus goes to the text INPUT that gets the date,
• the text INPUT triggers the focus and
• the focus triggers the outSideClick function with relatedTarget the INPUT that is outside the datepicker
• the date picker then detects it as outside click and closes itself

See attached video
https://user-images.githubusercontent.com/1130664/153264673-ca1231e0-8fb1-462f-bd39-d4c252ff74db.mov

[ljharb]

I understand when your problem occurs; i'm concerned that removing that line will re-cause the breakage that adding that line fixed.

[albanx]

The root cause is the fact that the element is getting focus when it should not. I still cannot explain why clicking fast or on dates causes the top input to get focus