Fix visual jitter in `Combobox` component when using native scrollbar

[danthomps]

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

https://github.com/danthomps/headlessui/assets/7358641/0fa2cc8b-7855-4a7a-a04e-0c5551a5e221

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.

https://github.com/danthomps/headlessui/assets/7358641/b12fd80f-ddda-41fa-b3a8-68d3a7c6b931

A Fix

Adding a onScroll handler that ignores mobile and sets the ActivationTrigger to pointer.

https://github.com/danthomps/headlessui/assets/7358641/c44864a9-be83-4477-b1b1-9e2d4f271374

Feel free to discard any or all of this fix or improve it further. If nothing else, this demonstrates how to reproduce it.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
headlessui-react	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 29, 2024 0:15am
headlessui-vue	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 29, 2024 0:15am

[RobinMalfait]

Hey!

Thank you for this PR, I really appreciate it.

I made some changes, here is a quick breakdown:

1. I rebased on top of the main branch to be in sync with the latest changes
2. I moved the setActivationTrigger to the mousedown event. The reason is twofold:
   • The mousedown and pointerdown events will be triggered (once) when you click in the sidebar.
   • The scroll event triggered the callback n times, but the code doesn't rely on any information from that event (such as scroll position). The only thing we need to do right now is to set the activation trigger. Doing it in the mousedown event means that we only do it once instead of n times while still fixing the jittery behavior.

Thanks again for your initial work!