Custom select active item keyboard navigation conflicts with mouseevents when scrolling into view

[adrian-sgn]

What component (if applicable)

• URL for category: https://tailwindui.com/components/application-ui/forms/select-menus
• Component name: Custom select examples on this page

Describe the bug
The scrollIntoView() appears to conflict with keyboard up/down navigation when the mouse is positioned over one of the list items.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'the Simple Custom example' (or any of the other custom selects on that page)
2. Close and open the example select so the ul list focuses
3. Hover the mouse over one of the items (ex. Devon Webb)
4. Press down arrow a few times
5. Notice when the down arrow selects an item that is out of view, when that item scrolls into view the activeItem becomes whatever the mouse is hovering over, not the next item in the list.

Expected behavior
In the above example, hovering over Devon Web and pressing down arrow 5 times, you see Tom Cook is active with the mouse pointer over his name.
I'd expect the active item to be Mason Heany, the next item that scrolled into view, with the mouse pointer still over an inactive Tom Cook.

Screenshots

• 

Browser/Device (if applicable)

• OS: Ubuntu 20.04
• Browser: Firefox
• Version: 107.0

Additional context
This example appears to suffer from the issue described in https://stackoverflow.com/questions/26179043/unwanted-mouse-events-when-scrolling-content-by-javascript

[thecrypticace]

Hey, @adrian-sgn. We've released Headless UI v1.7.5 which addresses this problem. The Tailwind UI website has not yet been updated but will be soon (likely today but if not then some time Monday). I'll leave this open until the website has been updated but wanted to let you know that this has been fixed in Headless UI and can be used right now. :)

[thecrypticace]

And the Tailwind UI website has now been updated as well! Thanks again for the report!