JedWatson / JedWatson/react-select
Horizontal Scroll Issue Even with menuShouldScrollIntoView={false}
Nobody has claimed this yet.
- 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
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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