fix(interaction-outside): click event on mobile

chakra-ui · Sep 5, 2024 · 611ab97 · 611ab97
1 parent 6e35eed
commit 611ab97
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git a/.changeset/chilly-apricots-report.md b/.changeset/chilly-apricots-report.md
@@ -0,0 +1,5 @@
+---
+"@zag-js/interact-outside": patch
+---
+
+Fix issue where clicking outside of a dialog on mobile passes click events through
diff --git a/packages/utilities/interact-outside/src/index.ts b/packages/utilities/interact-outside/src/index.ts
@@ -1,4 +1,4 @@
-import { addDomEvent, fireCustomEvent, isContextMenuEvent, queueBeforeEvent } from "@zag-js/dom-event"
+import { addDomEvent, fireCustomEvent, isContextMenuEvent } from "@zag-js/dom-event"
 import { contains, getDocument, getEventTarget, getWindow, isFocusable, isHTMLElement, raf } from "@zag-js/dom-query"
 import { callAll } from "@zag-js/utils"
 import { getWindowFrames } from "./get-window-frames"
@@ -127,8 +127,8 @@ function trackInteractOutsideImpl(node: MaybeElement, options: InteractOutsideOp
       pointerdownCleanups.forEach((fn) => fn())
 
       // add a pointerup event listener to the document and all frame documents
-      pointerdownCleanups.add(queueBeforeEvent(doc, "pointerup", handler))
-      pointerdownCleanups.add(frames.queueBeforeEvent("pointerup", handler))
+      pointerdownCleanups.add(addDomEvent(doc, "click", handler, { once: true }))
+      pointerdownCleanups.add(frames.addEventListener("click", handler, { once: true }))
     } else {
       handler()
     }