[BUG]
Vazerthon opened this issue · comments
Description
When I press the tab key while a select list is open I expect the next focusable element to be focused. Instead, items from the list are added to the current selection.
chakra-react-select Version
4.1.3
Link to Reproduction
https://codesandbox.io/s/chakra-react-select-vsvr0?file=/example.js
TypeScript?
- Yes I use TypeScript
Steps to reproduce
- Go to https://codesandbox.io/s/chakra-react-select-vsvr0?file=/example.js
- Tab into select
- Press down arrow to open list
- Press tab a few times
Operating System
- macOS
- Windows
- Linux
- iOS/iPadOS
- Android
Additional Information
Hey! First off, this isn't a bug, its an intended behavior. Second, not my intended behavior, its the default behavior of react-select. Luckily there's an easy solution! react-select offers the tabSelectsValue prop which defaults to true. If you pass in tabSelectsValue={false} the select will behave like you expect it to.
From the react-select docs:
tabSelectsValueSelect the currently focused option when the user presses tab
boolean
Here's a complete example: https://codesandbox.io/s/chakra-react-select-tabselectsvalue-false-4b57dj?file=/example.js
Thanks for that, I hadn't spotted the prop and all the examples I'd seen of react-select seemed to work the way I expected (presumably setting this to false).
I appreciate your time.