DatePicker popover close unexpectedly in Chrome when moving to min/max month

[silviodeligios]

Steps to reproduce

In the dateInput component

1. set the start value to null or delete the selected date
2. use the arrows to change month
3. if your max date is, for example, 2019-12-31 when you are on November 2019, if you click the next month button the date picker close unexpectedly

[MrMengJ]

Steps to reproduce

In the dateInput component

1. set the start value to null or delete the selected date
2. use the arrows to change month
3. if your max date is, for example, 2019-12-31 when you are on November 2019, if you click the next month button the date picker close unexpectedly

Hi! Have you solved this problem? I encountered this problem too.

[ejose19]

I've got this too, here's a sandbox, without selecting any date, just move with the month arrows and it will close.

Worth noting this work correctly on firefox, but on chrome it closes as soon the month reaches the min/max date

[adidahiya]

Thanks for the sandbox @ejose19. Note that it only closes unexpectedly when no date is selected. If you first select a valid date, then reopen the picker and move to the min/max month, the popover stays open as expected.

[adidahiya]

What's happening is the prev/next month button gets disabled when you reach the date bounds. In Chrome, this causes that <button> to lose focus, triggering a "blur" of the popover, closing the DateInput. Iff a date is selected (defaultValue != null || value != null), the <input> receives focus again, which reopens the popover, thus hiding the bug:

It seems like the Firefox behavior might actually be a bug in FF (https://bugzilla.mozilla.org/show_bug.cgi?id=1650092). So the fix here needs to tweak handlePopoverBlur to not close the popover when the blurring happens due to a month change.

In playing around with the keyboard accessibility of the component, I can see that it's not perfect, but I would still like to retain the functionality added in #2093 which closes the DateInput popover after a user TABs out of the last tabbable element in the popover.