search

tbleckert / react-select-search

⚡️ Lightweight select component for React
https://react-select-search.com
MIT License
676 stars 147 forks source link

SelectSearch inside of div tabIndex={0} has bad behavior #94

Open vvo opened 4 years ago

vvo commented 4 years ago

Hi there, if you use SelectSearch inside a div with tabIndex={0} then the menu will close as soon as you touch the scrollbar, see:

https://codesandbox.io/s/admiring-kepler-29e6x?file=/src/App.js

Kapture 2020-06-27 at 1 58 46

Why use tabIndex={0}? It seems to offer extended keyboard navigation, see https://webaim.org/techniques/keyboard/tabindex#zero-negative-one. In my case, the https://tailwindui.com/ application layouts recommend to use it.

tbleckert commented 4 years ago

Thanks for reporting, I'll take a look!

vvo commented 4 years ago

Side note, I asked tailwindui peeps and they said tabIndex=0 was on purpose on the main div of their layouts, so that users can skip to content and navigate it easily. Now should react-select-search have tabIndex=0 too? I am not so sure :D

tbleckert commented 4 years ago

The tabindex=0 on the input field is not necessary, but it also doesn't produce any side effects. It comes from the valueProps and is needed if you use a div instead of an input as the value component for example.

But we might need to reconsider the focus handling here. Need to experiment with this.