JedWatson / JedWatson/react-select

Horizontal Scroll Issue Even with menuShouldScrollIntoView={false}

Open
#6,053 5 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

I have a select in a parent container that overflows horizontally. If I scroll where the select is partially visible on the left side, it causes the parent container to scroll the start of the select to the center. I have menuShouldScrollIntoView={false} and can't figure out how to get it to stop scrolling the parent horizontally. The scroll only happens when the select is on the left, it doesn't happen when partially out of view on the right.

It wouldn't be so bad if it scrolled the select to be aligned to the left of the scroll parent, but centering it is causing a jarring UX and I'd prefer the select to not cause the parent to scroll at all if possible. Is there a way to achieve this? Thank you in advance!

https://github.com/user-attachments/assets/18261b32-eee7-43b5-83aa-7a90a0f5a2e2

Sandbox Reproduction

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, especially example.tsx around the referenced lines, and reproduce the horizontal scroll with menuShouldScrollIntoView={false}. Trace the select's menu visibility and scroll handling from that example. Done means the parent no longer scrolls horizontally when the partially visible select is on the left, while the reported menu behavior remains intact.

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.