Prevent opening datepicker on Escape

[ragulka]

Pressing Escape on the input field will open the datepicker. I find this rather odd, and unnecessary. Consider that the picker field may be inside a modal, which will be closed on Escape. When Escape is pressed, it would momentarily flash open the datepicker inside the modal, right before the modal is hidden. Would you consider either removing this behavior or providing an option to toggle it?

[mymth]

I would like you to go to https://uxsolutions.github.io/bootstrap-datepicker and check what happens if you open the date picker then repeatedly press the escape key 2 or 4 times. Maybe you don't know what it is for because you have only used the date picker inside a modal dialog. If so, you’ll be able to find what it’s meant for. And if not, you’ll be able to notice it’s an inheritance from bootstrap-datepicker.

Since it’s a feature that has been around for years, I believe there are people who use this feature. Therefore, I will not consider removing it at least until the timing for major version update

If datepicker shows up by pressing Escape key, it means the picker is hidden while the input field has the focus. The 2 most common cases are after selecting a date when the autohide option is on (see https://github.com/mymth/vanillajs-datepicker/issues/47#issuecomment-766495408) and after user manually hides the picker by pressing Escape. But we can ignore the latter now because it doesn’t happen when datepicker is in a modal.

When autohide is off, which is default, and showOnFocus is on, which is also default, picker's visibility is synced with the input field’s active status. If Escape is pressed while the focus is on date input (the picker is shown), both the picker and the modal close at once because the event is fired on the date input then bubbles up to the modal. And if Escape is pressed while the focus is on other element than date input (the picker is hidden), the modal closes without showing the picker as the event is fired on the other element then bubbles up to the modal. For this reason, the issue you mentioned doesn’t happen with the default settings.

If you want to use autohide, and prevent the flickering as well, it can be done by unfocusing the input field with moving the focus to other field in the modal or the modal itself after autohiding occurs, like in this example: https://codepen.io/mymth/pen/wvpGePw

So, since the issue is not critical, only occurs under a specific condition, and can be avoided quite easily, I would not consider adding the option to disable the feature either.

[ragulka]

@mymth thanks for the detailed description! I can see how this would be a breaking change, and I can definitely understand the background for the current behavior. The proposed workaround for the modal might help with the flicker, sure. However, there are other factors at play, as well.

You mention in https://github.com/mymth/vanillajs-datepicker/issues/47#issuecomment-766495408 that you try "to make the date picker behave as close to native elements as possible and consistently regardless of being operated by mouse or keyboard is one of the key concepts of this library". I wholeheartedly agree with this concept, which is why I'd like to elaborate on my case.

My goal is to create a datepicker which behaves very similar to a native select or date input, and use it inside a modal. Consider the examples in this forked pen: https://codepen.io/ragulka/pen/RwxRJeg

• There are 4 modals, each with different inputs: native select, native date, datepicker with defaults and another with some tweaks
• When any modal opens, the first form field is focused (this is because in my actual app, I'm implementing focus-trap in modals, which is an accessibility requirement for dialogs)

Native select and input type="date":

• ✅ Do not automatically open their dropdowns when they receive focus.
• ✅ When selecting an option or date, the dropdown is automatically closed
• ✅ When their dropdowns are open, and Escape is pressed, it only closes their dropdowns, the event does not bubble up to the modal. This allows the user to close the dropdown without closing the modal.
• ✅ When the input has focus, dropdown is hidden, and Escape is pressed, it closes the modal & does not open the dropdown

☝️ I'm trying to replicate the above behavior

Datepicker with default settings:

• ❌ Shows the dropdown on focus, which is undesirable when using autofocus/focus-trap inside a modal, as it hides other UI elements behind the dropdown. This makes it harder for the user to see all the options in the UI at first glance. It seems like they are forced to select a date in order to move on.
• ❌ Does not automatically close the dropdown when selecting a date
• ❌ Bubbles the Escape event up to the modal, so that when user is trying to close the datepicker dropdown only, it closes the modal as well
• ❌ When the input has focus, it always shows the dropdown, which means the last point from native controls cannot be replicated at all.

Datepicker with tweaks: (picker dropdown will open when clicking or typing in the date field)

• ✅ Using the showOnFocus: false option, does not automatically open their dropdowns when it receives focus.
• ✅ Using the autohide: true option, when selecting an option or date, the dropdown is automatically closed
• ❌ Bubbles the Escape event up to the modal, so that when user is trying to close the datepicker dropdown only, it closes the modal as well
• ❌ When the input has focus, dropdown is hidden, and Escape is pressed, it closes the modal, but also opens the datepicker dropdown (which is the flicker I mentioned)

As you can see, I can get somewhat close to the native control behavior using showOnFocus: false combined with autohide: true. To achieve the last 2 criteria, the following would be needed:

• Stop bubbling Escape press event if the datepicker dropdown is visible (I think this would make sense as default in any case)
• Stop handling Escape event at all, when datepicker dropdown is not visible (could be controlled by an option like showOnEsc: true|false)

If the goal is make a library that behaves similar to native form controls, wouldn't it make sense to at least provide options for doing so?

I'd be happy to submit a PR if you think you can agree with the general direction.

[mymth]

OK, I get you point. (Why you didn’t say that from the beginning?) However, I’m reluctant to add patchy option without seeing high demand. If you could submit a PR to add an option to change the key to toggle picker’s visibility, it would be more preferable and welcome. (This is to prevent the code from becoming spaghetti like bootstrap-datepicker. It would be appreciated if you understand the policy.)

[mymth]

By the way, the bubbling of Escape keydown event is actually a bug from the changes for #88. So it will be fixed in the next version.