From c92feaa3b3bbb6674f4241f42aeb7a47960f2ad2 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Mon, 21 Mar 2022 17:09:04 +0100
Subject: [PATCH] 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
---
 CHANGELOG.md                                                  | 2 ++
 packages/@headlessui-react/src/components/popover/popover.tsx | 2 ++
 packages/@headlessui-vue/src/components/popover/popover.ts    | 4 +++-
 3 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9a7430b..3b87b49 100644
--- 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
index 375cbd1..67eb05d 100644
--- 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
index df05064..c6fdf40 100644
--- 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()