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

Author: RobinMalfait

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
 

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 })

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()