feat: stopPropagation on click and pointerdown

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",

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;
 };

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 },
   ]);
 };
 

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);