question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

onMenuScrollToBottom not fired on desktop when the scrollbar is mouse-dragged to the bottom

See original GitHub issue

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)

Issue Analytics

  • State:open
  • Created 5 years ago
  • Reactions:13
  • Comments:7

github_iconTop GitHub Comments

3reactions
M-Yankovcommented, Jan 1, 2022

I understood that onMenuScrollToBottom is weakness of react-select. It also not working with keyboard navigation and for asynchronous select. My workaround is redefine MenuList component.

https://github.com/vtaits/react-select-async-paginate/blob/master/src/wrap-menu-list.jsx

It is my decorator, but is uses custom handler handleScrolledToBottom, you can replace it with onMenuScrollToBottom. Looped setTimeout is not beautiful but works.

Here is the correct link of the wrapper ~https://github.com/vtaits/react-select-async-paginate/blob/master/packages/react-select-async-paginate/src/wrap-menu-list.jsx~ https://github.com/vtaits/react-select-async-paginate/blob/master/packages/react-select-async-paginate/src/wrapMenuList.tsx

0reactions
Duarte10commented, Dec 28, 2021
Read more comments on GitHub >

github_iconTop Results From Across the Web

Scroll bar moves by itself, gets stuck on bottom, can't control
Sometimes scroll bar moves by itself, it goes down and stuck on bottom. It happens in any browser and folder. Format the pc...
Read more >
MouseDragged & MouseMoved not working in Java Applet
I've successfully implemented the ability to click on a tile and change its value (from say a 4 way tile to a 2...
Read more >
How to Fix Mouse Wheel Scrolling Problem (Easy Way)
Best Fix if mouse wheel not working or mouse wheel reset. mouse wheel not scrolling or mouse wheel fail is common issue.
Read more >
Scrollbar (Java Platform SE 8 ) - Oracle Help Center
AdjustmentEvent.UNIT_DECREMENT is sent out when the user clicks in the right arrow of a horizontal scroll bar, or the bottom arrow of a...
Read more >
How to Fix the Wheel on My Mouse if It's Not Working
Computer Mouse. The mouse wheel or roller on the top of a wheel mouse can malfunction, causing up and down scrolling to not...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found