JedWatson / JedWatson/react-select

menuShouldScrollIntoView does not scroll all menu into view

Open
#4,615 3 comments 6 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

issue/bug-confirmed menu-bug
Dominant language
TypeScript
Stars
28k
Forks
4.1k
PR merge metrics
No merged PRs in 30d

Description

React-select with menuShouldScrollIntoView set to true does not scrolled into view properly.
Although menu is scrolled into view, last options are still invisible.

On the screenshot below, only option 1 to 4 is visible and options 5 and 6 are not. Parent size is expanded to accommodate full menu and parent can be scrolled manually to see full menu.

image

Sandbox is here https://codesandbox.io/s/reactselectscrollintoview-44b7n

To reproduce:

  1. Make sure, that react select is located at the very bottom of the window, Just above the footer. There should be no empty space between react-select and footer. (it may be required to decrease browser window size)
  2. Open react-select.
  3. Observe, that although container has been scrolled down, it is not scrolled down enough to include all options. To see last options, manual scrolling of the container is required.

Expected result: container is scrolled to accommodate all options.

Also, if header and footer will not be present, parent will be scrolled properly.

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 CodeSandbox reproduction and compare the behavior when the select is above the footer versus at the bottom of the window. Trace the menu scrolling behavior and verify completion when all options are visible without manual parent scrolling.

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
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.