Prevent tab focus on mousedown (#4239)

Co-authored-by: Simone Todaro <[email protected]>

Author: SimoTod

packages/ui/src/tabs.js

@@ -105,6 +105,11 @@ function handleTab(el, Alpine) {
         '@keydown.up.prevent.stop'() { this.$focus.within(this.$data.__activeTabs()).withWrapAround().prev() },
         '@keydown.left.prevent.stop'() { this.$focus.within(this.$data.__activeTabs()).withWrapAround().prev() },
         ':tabindex'() { return this.$tab.isSelected ? 0 : -1 },
+        // This is important because we want to only focus the tab when it gets focus
+        // OR it finished the click event (mouseup). However, if you perform a `click`,
+        // then you will first get the `focus` and then get the `click` event.
+        // See https://github.com/tailwindlabs/headlessui/pull/1192
+        '@mousedown'(event) { event.preventDefault() },
         '@focus'() {
             if (this.$data.__manualActivation) {
                 this.$el.focus()