After tabbing to a selectr element, pressing the typical keyboard activation keys (space, up/down) wouldn't open the selectr container. Pressing Enter wouldn't submit the form (or do anything).
After dismissing the dialog (e.g. via pressing enter), the tab focus was lost thus starting you back over at the top of the document (making using keyboard only navigation painful).
These behaviors (except form submission on Enter; see below) already exist in Selectr.
To enable them, you should set config.nativeKeyboard = true.
Personally, I would be in favor of enabling them by default, which might also prevent confusion like this in the future.
Unfortunately, these changes did not simply duplicate existing behavior, but caused some problems as well:
The event listeners that were added/modified were previously only set up when the nativeDropdown option was enabled, but are now set up unconditionally.
This causes conflicts and duplicated events when nativeKeyboard is enabled.
Making Enter submit the form when a <select> element is focused is unexpected and often undesired.
When a select box is focused, normal browser behavior when pressing Enter is to open the select box (or select an option if already open).
Implicit form submission should only happen when a form <input> is in focus.
See the whatwg standard for more info: https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#implicit-submission
returning focus to the select container when closing it is also (imo) unexpected, but, more importantly, cause focus to become "stuck" on the selectr in some cases.
For example, if an onBlur event listener calls close() on the select, then focus will immediately return to it, and the form (potentially, the entire page) becomes unusable.
When using nativeKeyboard, closing the select via Enter or Escape does not cause focus to be lost.
Suggestions for future changes:
If there is some standard keyboard behavior that is missing from Selectr, if should be added behind the nativeKeyboard config option.
If there is some nonstandard keyboard behavior that is deemed desirable, it should be added behind its own config option, or, if added globally, should be disabled when the nativeKeyboard option is enabled.
re: https://github.com/Mobius1/Selectr/pull/51
These behaviors (except form submission on Enter; see below) already exist in Selectr. To enable them, you should set
config.nativeKeyboard = true. Personally, I would be in favor of enabling them by default, which might also prevent confusion like this in the future.Unfortunately, these changes did not simply duplicate existing behavior, but caused some problems as well:
The event listeners that were added/modified were previously only set up when the
nativeDropdownoption was enabled, but are now set up unconditionally. This causes conflicts and duplicated events whennativeKeyboardis enabled.Making Enter submit the form when a
<select>element is focused is unexpected and often undesired. When a select box is focused, normal browser behavior when pressing Enter is to open the select box (or select an option if already open). Implicit form submission should only happen when a form<input>is in focus. See the whatwg standard for more info: https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#implicit-submissionreturning focus to the select container when closing it is also (imo) unexpected, but, more importantly, cause focus to become "stuck" on the selectr in some cases. For example, if an
onBlurevent listener callsclose()on the select, then focus will immediately return to it, and the form (potentially, the entire page) becomes unusable. When usingnativeKeyboard, closing the select via Enter or Escape does not cause focus to be lost.Suggestions for future changes:
If there is some standard keyboard behavior that is missing from Selectr, if should be added behind the
nativeKeyboardconfig option.If there is some nonstandard keyboard behavior that is deemed desirable, it should be added behind its own config option, or, if added globally, should be disabled when the
nativeKeyboardoption is enabled.TL;DR:
Set
config.nativeKeyboard = trueinstead.