[Bug]: Listbox Hover Focus Shouldn't Cause Scroll

[agusterodin]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v1.4.0

What browser are you using?

Chrome

Reproduction repository

https://headlessui.dev/react/listbox

Describe your issue

Add a max height to the first listbox example on the page. Notice that when hovering over an item with the mouse, the newly focused item gets scrolled to. This behavior is desirable for keyboard up + down navigation but is super janky when using the mouse.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus <- take advantage of the preventScroll property for mouse hover events only. Keyboard focus scroll should remain intact!

This video is literally just me hovering, not using touchpad scroll or keyboard:

Headless.UI.Mouse.Focus.Scroll.Bug.mov

[RobinMalfait]

Hey! Thank you for your bug report!
Much appreciated! 🙏

This should be fixed, and will be available in the next release.

You can already try it using:

• npm install @headlessui/react@insiders or yarn add @headlessui/react@insiders.
• npm install @headlessui/vue@insiders or yarn add @headlessui/vue@insiders.