refactor: improve shadow dom support

[segunadebayo]

No description provided.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
zag-nextjs	✅ Ready (Inspect)	Visit Preview	Jan 1, 2025 10:50pm
zag-solid	✅ Ready (Inspect)	Visit Preview	Jan 1, 2025 10:50pm
zag-svelte	✅ Ready (Inspect)	Visit Preview	Jan 1, 2025 10:50pm
zag-vue	✅ Ready (Inspect)	Visit Preview	Jan 1, 2025 10:50pm
zag-website	✅ Ready (Inspect)	Visit Preview	Jan 1, 2025 10:50pm

[changeset-bot]

⚠️ No Changeset found

Latest commit: 4b171e7

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[pkg-pr-new]

Open in Stackblitz

@zag-js/anatomy

npm i https://pkg.pr.new/chakra-ui/zag/@zag-js/anatomy@2152

@zag-js/anatomy-icons

npm i https://pkg.pr.new/chakra-ui/zag/@zag-js/anatomy-icons@2152

@zag-js/docs

npm i https://pkg.pr.new/chakra-ui/zag/@zag-js/docs@2152

@zag-js/core

npm i https://pkg.pr.new/chakra-ui/zag/@zag-js/core@2152

@zag-js/store

npm i https://pkg.pr.new/chakra-ui/zag/@zag-js/store@2152

@zag-js/types

npm i https://pkg.pr.new/chakra-ui/zag/@zag-js/types@2152

commit: 4b171e7

[mbeckem]

Hi, i've stumbled upon this PR while debugging issues with outside click detectionwithin shadow doms. Do you plan to merge this in the near future? I think it could resolve the issues i've observed.

For example, when clicking the select trigger in a shadow dom, the popover closes and immediately reopens.

For reference, this is the patch I went ahead with for now.

@zag-js/interact-outside/dist/index.mjs:

diff --git a/dist/index.mjs b/dist/index.mjs
index e346d526de4f6cb0683e31f12589ee053d6a30b2..19c51cfe8e81cf31638b974d81f6b351b6a3e991 100644
--- a/dist/index.mjs
+++ b/dist/index.mjs
@@ -106,8 +106,7 @@ function trackInteractOutsideImpl(node, options) {
   const win = getWindow(node);
   const frames = getWindowFrames(win);
   const parentWin = getParentWindow(win);
-  function isEventOutside(event) {
-    const target = getEventTarget(event);
+  function isEventOutside(event, target) {
     if (!isHTMLElement(target)) return false;
     if (!target.isConnected) return false;
     if (contains(node, target)) return false;
@@ -126,8 +125,9 @@ function trackInteractOutsideImpl(node, options) {
     function handler() {
       const func = defer ? raf : (v) => v();
       const composedPath = event.composedPath?.() ?? [event.target];
+      const target = getEventTarget(event);
       func(() => {
-        if (!node || !isEventOutside(event)) return;
+        if (!node || !isEventOutside(event, target)) return;
         if (onPointerDownOutside || onInteractOutside) {
           const handler2 = callAll(onPointerDownOutside, onInteractOutside);
           node.addEventListener(POINTER_OUTSIDE_EVENT, handler2, { once: true });
@@ -160,8 +160,9 @@ function trackInteractOutsideImpl(node, options) {
   }, 0);
   function onFocusin(event) {
     const func = defer ? raf : (v) => v();
+    const target = getEventTarget(event);
     func(() => {
-      if (!node || !isEventOutside(event)) return;
+      if (!node || !isEventOutside(event, target)) return;
       if (onFocusOutside || onInteractOutside) {
         const handler = callAll(onFocusOutside, onInteractOutside);
         node.addEventListener(FOCUS_OUTSIDE_EVENT, handler, { once: true });
@@ -172,7 +173,7 @@ function trackInteractOutsideImpl(node, options) {
         detail: {
           originalEvent: event,
           contextmenu: false,
-          focusable: isFocusable(getEventTarget(event))
+          focusable: isFocusable(target)
         }
       });
     });