Arrow navigation no longer works in dropdown with input #36598
Comments
|
according to your 2 fiddles, same behavior here not work for (mac.... safari) |
|
The issue is specific to the bootstrap's new 5.2 javascript plugin. |
|
I'd say this issue comes from bb7664d. |
|
Guys, may I ask a question here? Is there any link, on BS documentation, that provides an example with this markup as valid, or we are just discussing for a side effect that some devs took advantage of? /CC @patrickhlauke, do you think this is UX valid, to use this markup? |
|
The use case seemed explicitly developed in the JS code but on my side, I haven't found this example in the BS documentation nor in the history of this component's JS modifications. I wasn't able to define if it was a side effect or really implemented voluntarily in BS. |
|
It is not documented, but it should be. It's great feature for ajax search fields. Yes, it is possible to add own arrow navigation, but why not take advantage of that one in BS? It works in BS 5.0.2 https://jsfiddle.net/az34jtew/ and in 4.6.1 as well https://jsfiddle.net/5a0Lofvs/ |
|
From memory, the old behavior is an old remnant/side effect from an early version of Bootstrap (possibly before version 4?) that was never properly documented. The only official documentation regarding cursor keys appeared back in version 4 https://getbootstrap.com/docs/4.6/components/dropdowns/#accessibility
And I seem to remember the original code was quite hacky in terms of having to override normal keyboard behavior inside form fields that happen to be in a dropdown (e.g. things like textareas, where all of a sudden cursor keys didn't work as they should because of the override). While I understand that having this undocumented feature helped create some interesting/creative approaches, like the ajax search above, note that those approaches are not fully "correct" from an accessibility point of view - you'd really want to implement them along these lines https://www.w3.org/WAI/ARIA/apg/patterns/combobox/ Even just for dropdowns with links, the current additional cursor navigation is "non-standard" really, but left there as a nice-to-have extra that doesn't interfere with regular accessibility of those dropdowns (which, in essence, are simply expand/collapse panels in the ARIA sense). In short, I would suggest not reintroducing the old behavior and noting it as a change (but not a breaking change, since this was never an explicit/official feature of BS it seems). |
|
This was great undocumented feature but okay, I understand. I'll try to recreate arrow navigation with custom js. |
Perfect. This works as suggested. Hopefully this would be permanently fixed in Bootstrap 5.2 soon. |
|
Ehm @itsraghz it will never be fixed, read properly comments above. |
Prerequisites
Describe the issue
After upgrade to the current 5.2.0 beta-1 arrow navigation (up/down) no longer works in dropdown with input. And it doesn't produce any errors in console so Im not sure where the problem is since it worked fine in v5.1.3.
Reduced test cases
Open jsfiddle and click to input field, it opens dropdown menu with items but only in v5.1.3 you can navigate through items with up/down arrows.
BS 5.1.3 https://jsfiddle.net/2onqv40u/
BS 5.2.0 beta-1 https://jsfiddle.net/ot8nvqmL/
What operating system(s) are you seeing the problem on?
Windows
What browser(s) are you seeing the problem on?
Chrome
What version of Bootstrap are you using?
v5.2.0-beta-1
The text was updated successfully, but these errors were encountered: