Merge pull request #798 from tailwindlabs/stop-propagation-on-escape

Ensure we stop the event from propagating
tailwindlabs · Sep 12, 2021 · 33c5c6e · 33c5c6e
2 parents 452b2c2 + 7f55847
commit 33c5c6e
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,11 +7,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased - React]
 
-- Nothing yet!
+### Fixes
+
+- Stop the event from propagating in the `Popover` component ([#798](https://github.com/tailwindlabs/headlessui/pull/798))
 
 ## [Unreleased - Vue]
 
-- Nothing yet!
+### Fixes
+
+- Stop the event from propagating in the `Popover` component ([#798](https://github.com/tailwindlabs/headlessui/pull/798))
 
 ## [@headlessui/react@v1.4.1] - 2021-08-30
 

diff --git a/packages/@headlessui-react/src/components/popover/popover.tsx b/packages/@headlessui-react/src/components/popover/popover.tsx
@@ -353,6 +353,8 @@ let Button = forwardRefWithAs(function Button<TTag extends ElementType = typeof
             if (state.popoverState !== PopoverStates.Open) return closeOthers?.(state.buttonId)
             if (!internalButtonRef.current) return
             if (!internalButtonRef.current.contains(document.activeElement)) return
+            event.preventDefault()
+            event.stopPropagation()
             dispatch({ type: ActionTypes.ClosePopover })
             break
 
@@ -603,6 +605,7 @@ let Panel = forwardRefWithAs(function Panel<TTag extends ElementType = typeof DE
           if (!internalPanelRef.current) return
           if (!internalPanelRef.current.contains(document.activeElement)) return
           event.preventDefault()
+          event.stopPropagation()
           dispatch({ type: ActionTypes.ClosePopover })
           state.button?.focus()
           break

diff --git a/packages/@headlessui-vue/src/components/popover/popover.ts b/packages/@headlessui-vue/src/components/popover/popover.ts
@@ -304,6 +304,8 @@ export let PopoverButton = defineComponent({
               if (api.popoverState.value !== PopoverStates.Open) return closeOthers?.(api.buttonId)
               if (!dom(api.button)) return
               if (!dom(api.button)?.contains(document.activeElement)) return
+              event.preventDefault()
+              event.stopPropagation()
               api.closePopover()
               break
 
@@ -571,6 +573,7 @@ export let PopoverPanel = defineComponent({
             if (!dom(api.panel)) return
             if (!dom(api.panel)?.contains(document.activeElement)) return
             event.preventDefault()
+            event.stopPropagation()
             api.closePopover()
             dom(api.button)?.focus()
             break