From 1927cb1863d63c0502b2e66b1c3993bbed7e6cb0 Mon Sep 17 00:00:00 2001 From: Simone Todaro Date: Tue, 28 May 2024 14:10:19 +0100 Subject: [PATCH] Prevent tab focus on mousedown (#4239) Co-authored-by: Simone Todaro --- packages/ui/src/tabs.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/ui/src/tabs.js b/packages/ui/src/tabs.js index 8183f94b5..22ba191d3 100644 --- a/packages/ui/src/tabs.js +++ b/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()