JedWatson / JedWatson/react-select
*TAB* should focus the next input when tabSelectsValue is true
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 28k
- Forks
- 4.1k
- PR merge metrics
- No merged PRs in 30d
Description
Title:
[Help] TAB should focus the next input when tabSelectsValue: true
Version: 5.6.0
Description:
I am looking for a way to focus the next input automatically when TAB is pressed and tabSelectsValue option is set to true
Steps to Reproduce:
Here's a simple codesandbox on which you can try out the below steps.
- Focus the first select input, navigate through different option using arrow keys
- Press TAB on any option (this will select that option and close the menu)
Current Behaviour -
When I press TAB, it closes the menu, and I again have to press TAB to go to the next input
Behaviour needed -
When I press TAB, it should close the menu and automatically should focus the next input (without me pressing the tab twice, first time to select option and second time to focus the next input)
Approaches I have tried:
- We can store the ref of the next input and invoke the
focusmethod when TAB is pressed, but this doesn't seem very reliable solution to me if we have lots of inputs lined up (I do not want to store ref for everything). - I tried accessing
nextElementSiblingproperty but that didn't work. We can access this property ononKeyPressevent but react-select is only exposingonKeyDownand notonKeyPress - I tried accessing the
nextElementSiblingby passingrefto the<Select>itself, but in that also I couldn't find a field which would help me grab the next sibling.
Thank you for your attention to this issue. I look forward to any insights, suggestions, or possible solutions from the maintainers or the community.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the react-select keyboard handling for the tabSelectsValue option and reproduce the behavior in the linked CodeSandbox. Check the exposed onKeyDown path and confirm how TAB currently selects an option and closes the menu. Done means one TAB both selects the option and moves focus to the next input.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- accessibility, frontend
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100