diff --git a/packages/@headlessui-react/CHANGELOG.md b/packages/@headlessui-react/CHANGELOG.md index 2b412e5c59..69503b6274 100644 --- a/packages/@headlessui-react/CHANGELOG.md +++ b/packages/@headlessui-react/CHANGELOG.md @@ -20,6 +20,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Fix crash when reading `headlessuiFocusGuard` of `relatedTarget` in the `FocusTrap` component ([#2203](https://github.com/tailwindlabs/headlessui/pull/2203)) - Fix `FocusTrap` in `Dialog` when there is only 1 focusable element ([#2172](https://github.com/tailwindlabs/headlessui/pull/2172)) - Improve `Tabs` wrapping around when controlling the component and overflowing the `selectedIndex` ([#2213](https://github.com/tailwindlabs/headlessui/pull/2213)) +- Fix `shadow-root` bug closing `Dialog` containers ([#2217](https://github.com/tailwindlabs/headlessui/pull/2217)) ### Added diff --git a/packages/@headlessui-react/src/components/dialog/dialog.tsx b/packages/@headlessui-react/src/components/dialog/dialog.tsx index cf321d788b..4db3b4bbb3 100644 --- a/packages/@headlessui-react/src/components/dialog/dialog.tsx +++ b/packages/@headlessui-react/src/components/dialog/dialog.tsx @@ -317,8 +317,10 @@ let DialogRoot = forwardRefWithAs(function Dialog< let resolveContainers = useEvent(() => { // Third party roots let rootContainers = Array.from( - ownerDocument?.querySelectorAll('body > *, [data-headlessui-portal]') ?? [] + ownerDocument?.querySelectorAll('html > *, body > *, [data-headlessui-portal]') ?? [] ).filter((container) => { + if (container === document.body) return false // Skip `` + if (container === document.head) return false // Skip `` if (!(container instanceof HTMLElement)) return false // Skip non-HTMLElements if (container.contains(mainTreeNode.current)) return false // Skip if it is the main app if (state.panelRef.current && container.contains(state.panelRef.current)) return false diff --git a/packages/@headlessui-vue/CHANGELOG.md b/packages/@headlessui-vue/CHANGELOG.md index a7100a75c9..3421bcae08 100644 --- a/packages/@headlessui-vue/CHANGELOG.md +++ b/packages/@headlessui-vue/CHANGELOG.md @@ -21,6 +21,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Fix crash when reading `headlessuiFocusGuard` of `relatedTarget` in the `FocusTrap` component ([#2203](https://github.com/tailwindlabs/headlessui/pull/2203)) - Fix `FocusTrap` in `Dialog` when there is only 1 focusable element ([#2172](https://github.com/tailwindlabs/headlessui/pull/2172)) - Improve `Tabs` wrapping around when controlling the component and overflowing the `selectedIndex` ([#2213](https://github.com/tailwindlabs/headlessui/pull/2213)) +- Fix `shadow-root` bug closing `Dialog` containers ([#2217](https://github.com/tailwindlabs/headlessui/pull/2217)) ### Added diff --git a/packages/@headlessui-vue/src/components/dialog/dialog.ts b/packages/@headlessui-vue/src/components/dialog/dialog.ts index fec5d4ff6f..fb16837ec4 100644 --- a/packages/@headlessui-vue/src/components/dialog/dialog.ts +++ b/packages/@headlessui-vue/src/components/dialog/dialog.ts @@ -186,8 +186,10 @@ export let Dialog = defineComponent({ function resolveAllowedContainers() { // Third party roots let rootContainers = Array.from( - ownerDocument.value?.querySelectorAll('body > *, [data-headlessui-portal]') ?? [] + ownerDocument.value?.querySelectorAll('html > *, body > *, [data-headlessui-portal]') ?? [] ).filter((container) => { + if (container === document.body) return false // Skip `` + if (container === document.head) return false // Skip `` if (!(container instanceof HTMLElement)) return false // Skip non-HTMLElements if (container.contains(dom(mainTreeNode))) return false // Skip if it is the main app if (api.panelRef.value && container.contains(api.panelRef.value)) return false