From 8dd65bef404ee1a43a61e5bc27483792bd17c175 Mon Sep 17 00:00:00 2001
From: Jakub Hampl <jakub@nlx.ai>
Date: Wed, 24 Jul 2024 10:28:36 +0100
Subject: [PATCH 1/2] Fixes issues with button that have stop propagation

---
 packages/journey-manager/src/index.ts         | 10 ++-
 .../website/src/components/Prototyping.tsx    | 71 ++++++++++++++++++-
 2 files changed, 76 insertions(+), 5 deletions(-)

diff --git a/packages/journey-manager/src/index.ts b/packages/journey-manager/src/index.ts
index 5eb60810..cd9f23f9 100644
--- a/packages/journey-manager/src/index.ts
+++ b/packages/journey-manager/src/index.ts
@@ -646,13 +646,17 @@ export const run = async (props: RunProps): Promise<RunOutput> => {
   });
 
   // eslint-disable-next-line @typescript-eslint/no-misused-promises --  initial eslint integration: disable all existing eslint errors
-  document.addEventListener("click", handleGlobalClickForAnnotations);
+  document.addEventListener("click", handleGlobalClickForAnnotations, true);
 
   return {
     client,
     teardown: () => {
-      // eslint-disable-next-line @typescript-eslint/no-misused-promises --  initial eslint integration: disable all existing eslint errors
-      document.removeEventListener("click", handleGlobalClickForAnnotations);
+      document.removeEventListener(
+        "click",
+        // eslint-disable-next-line @typescript-eslint/no-misused-promises --  initial eslint integration: disable all existing eslint errors
+        handleGlobalClickForAnnotations,
+        true,
+      );
       teardownIntersectionObserve?.();
       documentObserver.disconnect();
       teardownUiElement?.();
diff --git a/packages/website/src/components/Prototyping.tsx b/packages/website/src/components/Prototyping.tsx
index 348cc7dc..2fbd22da 100644
--- a/packages/website/src/components/Prototyping.tsx
+++ b/packages/website/src/components/Prototyping.tsx
@@ -92,6 +92,19 @@ const triggersWithNames: Record<string, { name: string; trigger: Trigger }> = {
       },
     },
   },
+  "c773436a-b523-4871-b01d-06ce1f8e4c50": {
+    name: "Test custom click behaviors",
+    trigger: {
+      event: "click",
+      once: false,
+      query: {
+        parent: null,
+        options: { name: { regexp: "Test", flags: "i" } },
+        name: "Role",
+        target: "button",
+      },
+    },
+  },
 };
 
 const triggersForRun = (): Record<string, Trigger> => {
@@ -178,6 +191,60 @@ const LoremIpsumParagraph: FC<unknown> = () => {
   );
 };
 
+const ButtonHandlerForm: FC<unknown> = () => {
+  const [shouldPreventDefault, setShouldPreventDefault] =
+    useState<boolean>(false);
+  const [shouldStopPropagation, setShouldStopPropagation] =
+    useState<boolean>(true);
+
+  const handleButtonPress = (e: React.MouseEvent<HTMLButtonElement>): void => {
+    console.log("handleB", shouldPreventDefault, shouldStopPropagation);
+    if (shouldPreventDefault) {
+      e.preventDefault();
+    }
+    if (shouldStopPropagation) {
+      e.stopPropagation();
+    }
+  };
+
+  return (
+    <div className="flex gap-2 items-start grow justify-around">
+      <button
+        className="bg-blueMain px-4 py-1 text-white rounded hover:bg-blueDarker"
+        onClick={handleButtonPress}
+      >
+        Test
+      </button>
+      <div className="flex flex-col">
+        <div className="flex grow items-center justify-start gap-2">
+          <input
+            type="checkbox"
+            className="shrink grow-0 basis-3"
+            id="preventDefault"
+            checked={shouldPreventDefault}
+            onChange={() => {
+              setShouldPreventDefault(!shouldPreventDefault);
+            }}
+          />
+          <label htmlFor="preventDefault">Prevent default</label>
+        </div>
+        <div className="flex grow items-center justify-start gap-2">
+          <input
+            type="checkbox"
+            className="shrink grow-0 basis-3"
+            id="stopPropagation"
+            checked={shouldStopPropagation}
+            onChange={() => {
+              setShouldStopPropagation(!shouldStopPropagation);
+            }}
+          />
+          <label htmlFor="stopPropagation">Stop propagation</label>
+        </div>
+      </div>
+    </div>
+  );
+};
+
 export const Prototyping: FC<unknown> = () => {
   const isRun = useRef(false);
 
@@ -255,7 +322,7 @@ export const Prototyping: FC<unknown> = () => {
           onClick={() => {
             setTab("tab3");
           }}
-          label="Tab 3"
+          label="Custom buttons"
         />
       </div>
       {tab === "tab1" ? <div>tab 1</div> : null}
@@ -286,7 +353,7 @@ export const Prototyping: FC<unknown> = () => {
           <LoremIpsumParagraph />
         </div>
       ) : null}
-      {tab === "tab3" ? <div>tab 3</div> : null}
+      {tab === "tab3" ? <ButtonHandlerForm /> : null}
     </div>
   );
 };

From e76fa1b2b36627eec8aa5701b9149c2e598b703d Mon Sep 17 00:00:00 2001
From: Jakub Hampl <jakub@nlx.ai>
Date: Wed, 24 Jul 2024 10:53:05 +0100
Subject: [PATCH 2/2] Fixes lint

---
 packages/website/src/components/Prototyping.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/website/src/components/Prototyping.tsx b/packages/website/src/components/Prototyping.tsx
index 2fbd22da..81de85df 100644
--- a/packages/website/src/components/Prototyping.tsx
+++ b/packages/website/src/components/Prototyping.tsx
@@ -198,7 +198,6 @@ const ButtonHandlerForm: FC<unknown> = () => {
     useState<boolean>(true);
 
   const handleButtonPress = (e: React.MouseEvent<HTMLButtonElement>): void => {
-    console.log("handleB", shouldPreventDefault, shouldStopPropagation);
     if (shouldPreventDefault) {
       e.preventDefault();
     }