Fix shadow-root bug closing Dialog containers (#2217)

RobinMalfait · web-flow · commit d8b263cb42c1 · 2023-01-27T14:49:43.000+01:00
* ensure we consider `html &gt; *` as valid containers as well

* update changelog
diff --git 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
@@ -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 `<body>`
+      if (container === document.head) return false // Skip `<head>`
       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
@@ -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
@@ -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 `<body>`
+        if (container === document.head) return false // Skip `<head>`
         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
