search

jxom / bumbag-ui

Build themeable React & React Native applications with your Bumbag 👝
https://bumbag.style
MIT License
1.01k stars 50 forks source link

Cannot use keyboard navigation in SelectMenu search #176

Closed maxmorlocke closed 2 years ago

maxmorlocke commented 2 years ago

Describe the bug

With hasSearch enabled, you can't use the arrow keys, etc. to escape the search box and select an item.

To Reproduce

  1. Open https://www.bumbag.style/docs/form/select-menu
  2. Ctrl+F for "hasSearch"
  3. Open the menu
  4. Start typing "a"
  5. Try to use keyboard up/down to get to the options and watch nothing happen...

Expected behavior

Keydown takes you to the first option. Keyup from the first option takes you back to the search text. Enter on an option selects it. Enter while in the search area gets you the first option selected. Scrolling via keyboard (e.g. keydown, tab) should invoke pagination if enabled.

maxmorlocke commented 2 years ago

I've added a tabindex={0} to the rendered options in my own environment as a somewhat janky workaround if anyone else encounters this before we get a fully working fix in.

maxmorlocke commented 2 years ago

Ignore, I did something stupid locally. Tab works out of the box to highlight the menu...