JedWatson / JedWatson/react-select
onMenuScrollToBottom not fired on desktop when the scrollbar is mouse-dragged to the bottom
Nobody has claimed this yet.
- #4484 by @vadimka123 — closed without merging
- Dominant language
- TypeScript
- Stars
- 28k
- Forks
- 4.1k
- PR merge metrics
- No merged PRs in 30d
Description
Greetings!
Thank you so much for taking time out to maintain react-select
One of our users reported that the dropdowns in our product (the ones powered by react-select) were not loading further options when she scrolled to the bottom. On further investigation, we realized that this was because react-select does not fire onMenuScrollToBottom when the scrolling is performed by dragging the scrollbar to the bottom using a mouse-drag. Unfortunately for us and for this user, her mouse lacks a scroll wheel and so this is the only way she can scroll to the bottom.
Here's a code sandbox demonstrating this issue: https://codesandbox.io/s/x20ppz92xw Note that when scrolled using the mousewheel, an alert dialog is displayed when the menu is scrolled to the bottom. However, when the scrollbar is dragged to the bottom using the mouse, the alert dialog isn't displayed.
Looking at the source code, I can see that the ScrollCaptor is only listening for the wheel, touchstart and touchmove events. The use-case of dragging the scrollbar with a mouse is ignored.
I've confirmed that this works in the previous major version (v1.2.1)
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 ScrollCaptor event handling described in the issue and reproduce the behavior using the linked CodeSandbox. Compare mouse-wheel scrolling with dragging the scrollbar to the bottom, then verify that onMenuScrollToBottom fires in both cases without regressing touch or wheel behavior.
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
- Clearly specified
- Newbie friendliness
- 35/100