Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork217
refactor: improve shadow dom support#2152
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.
Already on GitHub?Sign in to your account
Uh oh!
There was an error while loading.Please reload this page.
Conversation
vercelbot commentedJan 1, 2025 • edited
Loading Uh oh!
There was an error while loading.Please reload this page.
edited
Uh oh!
There was an error while loading.Please reload this page.
The latest updates on your projects. Learn more aboutVercel for Git ↗︎
|
|
@zag-js/anatomy@zag-js/anatomy-icons@zag-js/docs@zag-js/core@zag-js/store@zag-js/typescommit: |
mbeckem commentedFeb 24, 2025 • edited
Loading Uh oh!
There was an error while loading.Please reload this page.
edited
Uh oh!
There was an error while loading.Please reload this page.
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.
diff --git a/dist/index.mjs b/dist/index.mjsindex 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) } }); }); |
Thanks@mbeckem. Your approach seems to work better. Testing to see if I can find any issues before using it as the solution. |
Closing based on my recent commit. |
No description provided.