From 684623131b99d9e75dfc1c1f6d27244c334a95d9 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Tue, 5 Dec 2023 11:22:33 -0500 Subject: [PATCH] Fix outside click detection when component is mounted in the Shadow DOM in Vue --- packages/@headlessui-vue/src/hooks/use-root-containers.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/@headlessui-vue/src/hooks/use-root-containers.ts b/packages/@headlessui-vue/src/hooks/use-root-containers.ts index 8cb5c66..32ccc87 100644 --- a/packages/@headlessui-vue/src/hooks/use-root-containers.ts +++ b/packages/@headlessui-vue/src/hooks/use-root-containers.ts @@ -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(dom(mainTreeNodeRef))) continue // Skip if it is the main app + if (container.contains((dom(mainTreeNodeRef)?.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)