From 72d4dd17f1747abab133a85fedc5af743aa0707f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Vojte=CC=8Cch=20Vidra?= <vojtechvidra@gmail.com>
Date: Mon, 30 Oct 2023 16:06:16 +0100
Subject: [PATCH] feat: stopPropagation on click and pointerdown

---
 package.json    |  2 +-
 src/handlers.ts |  4 ++--
 src/index.ts    | 21 +++++++++++++++++++++
 src/render.tsx  |  2 ++
 4 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index d193b3b0..dab0fd80 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@rbnd/flows",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "description": "A better way to onboard users and drive product adoption.",
   "repository": {
     "type": "git",
diff --git a/src/handlers.ts b/src/handlers.ts
index 2fd24860..75b334d5 100644
--- a/src/handlers.ts
+++ b/src/handlers.ts
@@ -8,10 +8,10 @@ let handlers: Handler[] = [];
 
 export const addHandlers = (handlersToAdd: Handler[]): void => {
   handlers.forEach(({ type, handler }) => {
-    document.removeEventListener(type, handler);
+    document.removeEventListener(type, handler, true);
   });
   handlersToAdd.forEach(({ type, handler }) => {
-    document.addEventListener(type, handler);
+    document.addEventListener(type, handler, true);
   });
   handlers = handlersToAdd;
 };
diff --git a/src/index.ts b/src/index.ts
index 2e2c78c0..69a26585 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -62,6 +62,14 @@ export const init = (options: FlowsOptions): void => {
     const eventTarget = event.target;
     if (!eventTarget || !(eventTarget instanceof Element)) return;
 
+    if (
+      Array.from(document.querySelectorAll(".flows-root")).some((root) =>
+        root.contains(eventTarget),
+      )
+    ) {
+      event.stopPropagation();
+    }
+
     Object.values(context.flowsById ?? {}).forEach((flow) => {
       if (!flow.element) return;
       if (eventTarget.matches(flow.element)) startFlow(flow.id);
@@ -153,6 +161,18 @@ export const init = (options: FlowsOptions): void => {
       }
     });
   };
+  const handlePointerDown = (event: PointerEvent): void => {
+    const eventTarget = event.target;
+    if (!eventTarget || !(eventTarget instanceof Element)) return;
+
+    if (
+      Array.from(document.querySelectorAll(".flows-root")).some((root) =>
+        root.contains(eventTarget),
+      )
+    ) {
+      event.stopPropagation();
+    }
+  };
 
   observer?.disconnect();
   observer = new MutationObserver(() => {
@@ -169,6 +189,7 @@ export const init = (options: FlowsOptions): void => {
     { type: "click", handler: handleClick },
     { type: "submit", handler: handleSubmit },
     { type: "change", handler: handleChange },
+    { type: "pointerdown", handler: handlePointerDown },
   ]);
 };
 
diff --git a/src/render.tsx b/src/render.tsx
index 5654d511..a61ae77b 100644
--- a/src/render.tsx
+++ b/src/render.tsx
@@ -122,6 +122,8 @@ export const render = (state: FlowState): void => {
 
   if ("wait" in step) return;
   const root = document.createElement("div");
+  root.className = "flows-root";
+  root.style.pointerEvents = "auto";
   document.body.appendChild(root);
   if (isTooltipStep(step)) {
     const target = document.querySelector(step.element);