Ensure the Popover.Panel is clickable without closing the Popover (#1443)

RobinMalfait · web-flow · commit 9a39fc349f62 · 2022-05-13T16:04:08.000+02:00
* ensure the `Popover.Panel` is clickable without closing

* update changelog
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, [

Original file line number	Diff line number	Diff line change
`@@ -689,6 +689,7 @@ let Panel = forwardRefWithAs(function Panel<TTag extends ElementType = typeof DE`
`689`	`689`	`ref: panelRef,`
`690`	`690`	`id: state.panelId,`
`691`	`691`	`onKeyDown: handleKeyDown,`
	`692`	`+ tabIndex: -1,`
`692`	`693`	`}`
`693`	`694`
`694`	`695`	`let direction = useTabDirection()`
Original file line number	Diff line number	Diff line change
`@@ -614,6 +614,7 @@ export let PopoverPanel = defineComponent({`
`614`	`614`	`ref: api.panel,`
`615`	`615`	`id: api.panelId,`
`616`	`616`	`onKeydown: handleKeyDown,`
	`617`	`+ tabIndex: -1,`
`617`	`618`	`}`
`618`	`619`
`619`	`620`	`return h(Fragment, [`