Ensure the Popover.Panel is clickable without closing the Popover (…

…#1443) * ensure the `Popover.Panel` is clickable without closing * update changelog
tailwindlabs · May 13, 2022 · 9a39fc3 · 9a39fc3
1 parent e1ee36a
commit 9a39fc3
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Ignore `Escape` when event got prevented in `Dialog` component ([#1424](https://github.com/tailwindlabs/headlessui/pull/1424))
 - Improve `FocusTrap` behaviour ([#1432](https://github.com/tailwindlabs/headlessui/pull/1432))
 - Simplify `Popover` Tab logic by using sentinel nodes instead of keydown event interception ([#1440](https://github.com/tailwindlabs/headlessui/pull/1440))
+- Ensure the `PopoverPanel` is clickable without closing the `Popover` ([#1443](https://github.com/tailwindlabs/headlessui/pull/1443))
 
 ## [Unreleased - @headlessui/react]
 
@@ -22,6 +23,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Ignore `Escape` when event got prevented in `Dialog` component ([#1424](https://github.com/tailwindlabs/headlessui/pull/1424))
 - Improve `FocusTrap` behaviour ([#1432](https://github.com/tailwindlabs/headlessui/pull/1432))
 - Simplify `Popover` Tab logic by using sentinel nodes instead of keydown event interception ([#1440](https://github.com/tailwindlabs/headlessui/pull/1440))
+- Ensure the `Popover.Panel` is clickable without closing the `Popover` ([#1443](https://github.com/tailwindlabs/headlessui/pull/1443))
 
 ## [@headlessui/react@1.6.1] - 2022-05-03
 

diff --git a/packages/@headlessui-react/src/components/popover/popover.tsx b/packages/@headlessui-react/src/components/popover/popover.tsx
@@ -689,6 +689,7 @@ let Panel = forwardRefWithAs(function Panel<TTag extends ElementType = typeof DE
     ref: panelRef,
     id: state.panelId,
     onKeyDown: handleKeyDown,
+    tabIndex: -1,
   }
 
   let direction = useTabDirection()

diff --git a/packages/@headlessui-vue/src/components/popover/popover.ts b/packages/@headlessui-vue/src/components/popover/popover.ts
@@ -614,6 +614,7 @@ export let PopoverPanel = defineComponent({
         ref: api.panel,
         id: api.panelId,
         onKeydown: handleKeyDown,
+        tabIndex: -1,
       }
 
       return h(Fragment, [