JedWatson / JedWatson/react-select

Dynamically updating the option list rests the focus to the first element.

Open
#5,367 7 comments 0 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

Dynamically updating the options list resets the focus to the first element.
Even though the options are the same (same value), just a new object reference.

In my use case, this happens because the select controls a filter and the results change when selecting options. The filter options have the count (facet filtering) of the results associated with the filter option in their label. So when updating the results we also update the options to update the counts. This means that selecting an option with the keyboard triggers an update of the results, which leads to the recomputation of the options and shortly after the focus is set to the first option in the results list.

This makes keyboard usage very annoying.

This is a v5 bug: https://codesandbox.io/s/react-select-v5-sandbox-forked-s58hcn?file=/example.js

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 linked React Select v5 CodeSandbox, especially example.js, and reproduce the focus reset with keyboard selection and newly referenced but equivalent options. Trace the v5 option-list update and focus handling; done means updating option labels or counts preserves the currently focused or selected option instead of moving focus to the first result.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.