Stop propagation on the Popover Button (#1263)

* stop propagation on Popover Button This is only done on buttons that are **not** inside the Popover Panel. * update changelog * trigger CI
tailwindlabs · Mar 21, 2022 · c92feaa · c92feaa
1 parent 2dbc38c
commit c92feaa
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -29,6 +29,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add `multi` value support for Listbox & Combobox ([#1243](https://github.com/tailwindlabs/headlessui/pull/1243))
 - Improve Combobox Input value ([#1248](https://github.com/tailwindlabs/headlessui/pull/1248))
 - Fix Tree-shaking support ([#1247](https://github.com/tailwindlabs/headlessui/pull/1247))
+- Stop propagation on the Popover Button ([#1263](https://github.com/tailwindlabs/headlessui/pull/1263))
 
 ### Added
 
@@ -60,6 +61,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add `multi` value support for Listbox & Combobox ([#1243](https://github.com/tailwindlabs/headlessui/pull/1243))
 - Improve Combobox Input value ([#1248](https://github.com/tailwindlabs/headlessui/pull/1248))
 - Fix Tree-shaking support ([#1247](https://github.com/tailwindlabs/headlessui/pull/1247))
+- Stop propagation on the Popover Button ([#1263](https://github.com/tailwindlabs/headlessui/pull/1263))
 
 ### Added
 

diff --git a/packages/@headlessui-react/src/components/popover/popover.tsx b/packages/@headlessui-react/src/components/popover/popover.tsx
@@ -461,6 +461,8 @@ let Button = forwardRefWithAs(function Button<TTag extends ElementType = typeof
         dispatch({ type: ActionTypes.ClosePopover })
         state.button?.focus() // Re-focus the original opening Button
       } else {
+        event.preventDefault()
+        event.stopPropagation()
         if (state.popoverState === PopoverStates.Closed) closeOthers?.(state.buttonId)
         state.button?.focus()
         dispatch({ type: ActionTypes.TogglePopover })

diff --git a/packages/@headlessui-vue/src/components/popover/popover.ts b/packages/@headlessui-vue/src/components/popover/popover.ts
@@ -363,12 +363,14 @@ export let PopoverButton = defineComponent({
       }
     }
 
-    function handleClick() {
+    function handleClick(event: MouseEvent) {
       if (props.disabled) return
       if (isWithinPanel) {
         api.closePopover()
         dom(api.button)?.focus() // Re-focus the original opening Button
       } else {
+        event.preventDefault()
+        event.stopPropagation()
         if (api.popoverState.value === PopoverStates.Closed) closeOthers?.(api.buttonId)
         dom(api.button)?.focus()
         api.togglePopover()