Scrollbar jumping on non touch capable devices (scroll using mouse)

[syam1123]

I found this weird scrollbar issue when using a mouse instead of the trackpad. Attaching the screen recording for a better understanding

Scroll using a mouse

https://user-images.githubusercontent.com/6171514/122398497-3cec2200-cf7a-11eb-81a4-90b6ebfd494e.mov

Scroll using a trackpad

https://user-images.githubusercontent.com/6171514/122398649-5f7e3b00-cf7a-11eb-91bb-c464cd25bafe.mov

PS: In both the screen recordings I am trying to scroll fast using the mouse as well as the trackpad.

When I pass captureMenuScroll={false}, the jumping issue has been fixed. But, it generates another problem that the scroll prevents in the select box and the body started scrolling. Could someone please have a look at this issue and fix it? Thanks!

Version: 4.3.1 Example used: One from the official website Live demo: CodeSandbox OS: macOS Big Sur, v11.3.1 Browser: Google Chrome, Version 91.0.4472.77 (Official Build) (x86_64)

[Rall3n]

Hello @syam1123,

at a first glance I suspect a state that is updating continuously causing the tree to re-render.

But to confirm suspicion would you be so kind and provide a reproducible example using a fork of this CodeSandbox?

Could you also provide additional information regarding the react-select version you used, the browser and operating system?

[bripkens]

@Rall3n: I can also reproduce this via the CodeSandbox and the live demo on the official website. Note that this does not happen with a Macbook touchpad. For me this happens with my connected mouse. It also doesn't require fast scrolling.

The following video shows this on my Mac. Scrolling as slowly as possible to trigger these up/down scrollbar jumping effects.

https://user-images.githubusercontent.com/596443/122718274-07db1a80-d26d-11eb-8c84-db0b20e00ec3.mov

[ebonow]

@bripkens would you kindly update your codesandbox link to point to a codesandbox url? I'm on a MacBook with mouse and have some bandwidth to look at this.

[bripkens]

Whoops, sorry @ebonow. Link updated.

[Rall3n]

Seems like this is an issue with the implementation of our internal useScrollCapture hook.

The basic gist is, that we try to anticipate if we would reach the top or bottom and then jump to it (specifically this piece of code). I currently don't now if this is still necessary at this point.

For now a workaround for this is to set the captureMenuScroll prop to false. Be warned that this will disable the onMenuScrollTo... props.

[Navayuvan-SB]

@Rall3n, Is this still open to fix? If yes, Can I pick it?