Fix outside click detection when component is mounted in the Shadow DOM

tailwindlabs · Dec 5, 2023 · 0756779 · 0756779
1 parent 24486b3
commit 0756779
Showing 1 changed file with 1 addition and 0 deletions.
diff --git a/packages/@headlessui-react/src/hooks/use-root-containers.tsx b/packages/@headlessui-react/src/hooks/use-root-containers.tsx
@@ -43,6 +43,7 @@ export function useRootContainers({
       if (!(container instanceof HTMLElement)) continue // Skip non-HTMLElements
       if (container.id === 'headlessui-portal-root') continue // Skip the Headless UI portal root
       if (container.contains(mainTreeNodeRef.current)) continue // Skip if it is the main app
+      if (container.contains((mainTreeNodeRef.current?.getRootNode() as ShadowRoot)?.host)) continue // Skip if it is the main app (and the component is inside a shadow root)
       if (containers.some((defaultContainer) => container.contains(defaultContainer))) continue // Skip if the current container is part of a container we've already seen (e.g.: default container / portal)
 
       containers.push(container)