JedWatson / JedWatson/react-select

Not scrolling to the selected group option on menu open

Open
#3,648 33 comments 19 reactions 0 assignees View on GitHub

@louisptremblay is already working on this.

Since Mar 5, 2021.

  • #4477 by @louisptremblay — open
issue/bug-confirmed issue/has-pr menu-bug
Dominant language
TypeScript
Stars
28k
Forks
4.1k
PR merge metrics
No merged PRs in 30d

Description

react-select: 3.0.4

After selecting a value and then re-opening the menu, the component does not scroll the selected value into view.

This behaviour occurs for both standard options and also the new options with group headers.

Options with group header issue:
https://codesandbox.io/s/p68rh?module=/example.js

  • select an option far down the list
  • re-open menu, selected element is highlighted but not scrolled into view when menu is opened

Standard options:
https://codesandbox.io/s/kwv9t?module=/example.js

  • select option 'silver' which is far down the list
  • re-open menu and you will see the view does not scroll to the selected value

similar issue reported by #3535 for custom options as well

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 two linked CodeSandbox example.js reproductions: verify that reopening the menu fails to scroll to the selected option for grouped and standard options. Compare the behavior with the custom-option issue in #3535, then review open pull request #4477; done means the selected option is scrolled into view when the menu reopens in the reported cases.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
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.