React-date-picker: Calendar closes on navigation click in Safari and Firefox on macOS

[Joebourne]

Browsers used: Safari 11.0.1 & Firefox 56.0.2

Steps to reproduce:

• Click one of the three inputs - day, month or year (NB this is not a problem when you click the calendar icon)
• Click any of the navigation items (next/previous chevrons or the navigation label)
• The calendar closes

I've attached a GIF of the behaviour.

[wojtekmaj]

Uh-oh! Thank you for the report. Will fix over the weekend!

[wojtekmaj]

Hey @Joebourne, I can't reproduce it :( Is the problem you see on Firefox is also on a Mac? I currently have Windows-only machine here to investigate...

[Joebourne]

Hi @wojtekmaj - thanks for looking into it!

Yes I am on a Mac using OS X and so is the rest of our dev team. Do you have a access to a Mac to test at some point?

[wojtekmaj]

I'm afraid not 😢

Here's my best guess of what might be happening.

Opening and closing the calendar relies on focus and blur events. When you click around the calendar, you blur one element and focus another one. So when you click an input field (which opens the calendar) and then a button on a calendar, it behaves like so:
11:11:28.661 DatePicker.jsx:52 onFocus <-- clicking input field, opening calendar 11:11:33.005 DatePicker.jsx:59 onBlur <-- clicked a button on the calendar, input field loses focus, initiated closing calendar in 100 ms 11:11:33.006 DatePicker.jsx:52 onFocus <-- button on the calendar gets focus, cancels closing calendar
as you can see, onBlur and onFocus happen very quickly one after another. Perhaps there is a timing issue on a Mac which fires onBlur after onFocus, which ruins calendar closing cancellation.

[Joebourne]

Hi @wojtekmaj - thanks for your help above.

I've opened a pull request (https://github.com/wojtekmaj/react-date-picker/pull/19).

I tried to rewrite the blur functionality so that the blur happens when a user clicks outside the DatePicker. I had to remove the onBlur function you mentioned to make it work.

Let me know if it works for you.

[wojtekmaj]

Yes, it does! Thank you so much for this!

[cinnamennen]

This appears to be occurring again in Safari on macOS

[bechurch]

Yeah I'm seeing this as well.

[wojtekmaj]

Can't reproduce this on Safari 13.0 (15608.1.27.40.1) :(

[cinnamennen]

I'm seeing this in safari 12.1.1, which is the most current non-dev version

[dozoisch]

@wojtekmaj I got the same issue in both safari & firefox

https://gist.github.com/cvrebert/68659d0333a578d75372

this seems to be very related.

When I use the picker in the main page, everything works as expected

I use the picker inside a modal that has tabIndex="-1", and is focus by default.

When click on of the the

If I add a tabIndex="-1" (or ="1" works too) on the root node of the Picker (react-date-picker__calendar), it actually behaves as expected.

I wonder if it's because of that behavior where buttons don't get focus in FFox & Safari Mac, that the focusin event is triggered on the "closest" focusable element (tabIndex).

[tomatillodesign]

I'm also still getting this behavior. MacOS + Firefox / Safari. Works great in Chrome. Note, I'm using the calendar picker inside a modal.

[pedrofsantoscom]

I have this issue selecting the Month or Year. It just closes the calendar.
I'm also using the calendar picker inside a modal, on gatsby.
Issue found on Chrome, FF and Edge.