[Bug]: Tabs component: tab change is triggered on "mousedown" instead of "mouseup"

[manuhabitela]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v1.4.1

What browser are you using?

Firefox

Reproduction repository

https://headlessui.dev/react/tabs

Describe your issue

Hello and thanks for headlessui 👋

When using the tab components, clicking a <Tab> with the mouse instantaneously triggers the tab change, on mousedown. This doesn't match a normal button behavior that usually trigger an action on mouseup.

This behavior is visible directly on the documentation website.

I'm pretty sure this bug is here because the tab selection is handled, in addition to the click event, via the focus event, that is internally triggered by browsers on mousedown. In the end, with a mouse click, before the actual onClick handler is called, the onFocus is called and selects the tab.

Here is an example where keyboard interaction code doesn't impact usual mouse behavior.

I'm not really familiar with the headlessui source code (yet?) so I didn't think of a specific solution for a fix.

Do you first agree this behavior should be changed?

Thanks

[RobinMalfait]

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

Good catch, I didn't notice this because this doesn't happen on Safari.

[RobinMalfait]

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

This should be fixed by #1192, 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.

[manuhabitela]

Hey, thanks a lot for handling this :)