JedWatson / JedWatson/react-select

*TAB* should focus the next input when tabSelectsValue is true

Open
#5,680 1 comment 4 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

issue/bug-unconfirmed
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:
  1. We can store the ref of the next input and invoke the focus method 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).
  2. I tried accessing nextElementSibling property but that didn't work. We can access this property on onKeyPress event but react-select is only exposing onKeyDown and not onKeyPress
  3. I tried accessing the nextElementSibling by passing ref to 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.