New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Fix jitter in Combobox
when using native scrollbar
#3190
base: main
Are you sure you want to change the base?
Fix jitter in Combobox
when using native scrollbar
#3190
Conversation
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
@@ -1675,6 +1683,7 @@ function OptionsFn<TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG>( | |||
'--button-width': useElementSize(data.buttonRef, true).width, | |||
} as CSSProperties, | |||
onWheel: handleWheel, | |||
onScroll: handleScroll, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Chose to use an onScroll
event as none of the other events would fire if the first thing we move our mouse into is the native scrollbar.
// trigger to pointer, in order to let them scroll through the list. | ||
let handleScroll = useEvent(() => { | ||
if (isMobile()) return | ||
actions.setActivationTrigger(ActivationTrigger.Pointer) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The bug appears to only occur on desktop, so we're ignoring scroll reactions on mobile. An alternative approach could be to maintain state around mousedown
, mouseup
, and onScroll
events, but this method allows us to avoid adding any additional useState
functions.
Fixes #3189
Bug
The dropdown will jitter when using the native scrollbar before entering the dropdown list with your cursor or using the mouse wheel to scroll.
This is because the
ActivationTrigger
has not been set to pointer. As a result, scrollToIndex
is called while you are attempting to scroll, leading to the rubberband effect.How to Reproduce
If you are on macOS, go to System Settings and set Show Scroll Bars to Always.
It can be difficult to reproduce without this, as you must hover over the native scroll bar first avoid triggering any React events.
The bug on the Tailwind blog demo
tw-blog-scroll.mp4
Occasionally, React can render the scrolling quickly enough to make the rubberbanding non-visible, making it somewhat challenging to consistently reproduce on the blog post.
Reproducing on the Playground
Adding a 250ms artificial delay on the scrolling makes it much more obvious.
If you scroll with your mouse wheel or move your pointer inside the dropdown, the issue will resolve itself. The bug only occurs when you enter native scrollbar first and interact with it directly.
native-scroll-delay.mp4
A Fix
Adding a
onScroll
handler that ignores mobile and sets theActivationTrigger
to pointer.native-scroll-fix.mp4
Feel free to discard any or all of this fix or improve it further. If nothing else, this demonstrates how to reproduce it.