JedWatson / JedWatson/react-select
Scroll options become misaligned in the menu pane
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 28k
- Forks
- 4.1k
- PR merge metrics
- No merged PRs in 30d
Description
Thanks for using react-select!
Are you reporting a bug or runtime error?
This is a bug in v4.3.0.
Sandbox which I managed to replicate the issue in https://codesandbox.io/s/react-select-bug-24xcg
When scrolling through the open menu, the options list can become misaligned with the top/bottom and leaves big chunks of whitespace. When hovering over this whitespace, you can see that the menu item hover and click interactions still work, but can be confusing and looks broken.
This occurs frequently within our application.
Replicated in the codesandbox
Occurs within our application
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 by reproducing the issue in the linked CodeSandbox and compare the menu behavior with the attached videos and screenshot. Trace the scrollable options list from there; done means scrolling keeps the options aligned with the menu boundaries, without whitespace that receives misleading hover or click interactions.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100