JedWatson / JedWatson/react-select

Pressing on Tab key takes me to outside of the form instead of next input.

Open
#5,882 14 comments 10 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

Thanks for using react-select!

If you are going to ask a question or want to propose a change or a new feature, then please don't file an issue for this.
Questions and feature requests have their own place in our discussions section.

Are you reporting a bug or runtime error?

Bug

I am using this inside of react-hook form and pressing tab while the input is focused seems to move the focus on to the outer box (tabindex -1) than the next input element. You can also see in the recording that in a normal input field, this works fine and he focus is moved to the next input:

https://github.com/JedWatson/react-select/assets/35889246/ce23ae41-5e01-430c-bbcb-85bdcde11b19

Is there an option I am missing?

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 by reproducing the reported Tab sequence in react-select, including the react-hook-form context, and compare it with a normal input using the linked recording. Trace the focus handling around the select input and outer box; done means Tab moves focus to the next form control rather than the outer box.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
accessibility, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.