From 7be6bb8887c38451bfaf5aaa43d41525a91a5c25 Mon Sep 17 00:00:00 2001
From: josias-r <josias.ribi@gmail.com>
Date: Fri, 4 Nov 2022 10:11:52 +0100
Subject: [PATCH] fix: use specific clickhandler for overlay element to improve
 stability

---
 src/lib/boarding.ts     | 27 +++++++++++++--------------
 src/lib/core/overlay.ts | 16 +++++++++++++++-
 2 files changed, 28 insertions(+), 15 deletions(-)

diff --git a/src/lib/boarding.ts b/src/lib/boarding.ts
index c1640ab..a87d383 100644
--- a/src/lib/boarding.ts
+++ b/src/lib/boarding.ts
@@ -65,6 +65,18 @@ class Boarding {
       padding: this.options.padding,
       onReset: this.options.onReset,
       opacity: this.options.opacity,
+      onOverlayClick: () => {
+        // Perform the 'Next' operation when clicked outside the highlighted element
+        if (this.options.overlayClickNext) {
+          this.handleNext();
+          return;
+        }
+        // Remove the overlay If clicked outside the highlighted element
+        if (this.options.allowClose) {
+          this.reset();
+          return;
+        }
+      },
     });
 
     // bind this class to eventHandlers
@@ -260,9 +272,7 @@ class Boarding {
       .getElement()
       .contains(e.target);
 
-    const clickedOverlay = this.overlay.getOverlayElement()?.contains(e.target);
-
-    const clickedUnknown = !clickedOverlay && !clickedHighlightedElement;
+    const clickedUnknown = !clickedHighlightedElement;
 
     // with strict click handling any click that is not the active element (or a UI element of boarding.js) is ignored
     if (this.options.strictClickHandling && clickedUnknown) {
@@ -271,17 +281,6 @@ class Boarding {
       e.stopPropagation();
       return;
     }
-
-    // Perform the 'Next' operation when clicked outside the highlighted element
-    if (clickedOverlay && this.options.overlayClickNext) {
-      this.handleNext();
-      return;
-    }
-    // Remove the overlay If clicked outside the highlighted element
-    if (clickedOverlay && this.options.allowClose) {
-      this.reset();
-      return;
-    }
   }
 
   /**
diff --git a/src/lib/core/overlay.ts b/src/lib/core/overlay.ts
index 4f330b8..d2f7e44 100644
--- a/src/lib/core/overlay.ts
+++ b/src/lib/core/overlay.ts
@@ -33,7 +33,12 @@ export interface OverlayTopLevelOptions {
 
 interface OverlayOptions
   extends OverlaySupportedSharedOptions,
-    OverlayTopLevelOptions {}
+    OverlayTopLevelOptions {
+  /**
+   * Click handler attached to overlay element
+   */
+  onOverlayClick: () => void;
+}
 
 type AnimatableCutoutDefinition = Pick<
   CutoutDefinition,
@@ -314,6 +319,15 @@ class Overlay {
     const newSvgElement = createSvgCutout(cutoutDefinition);
     this.cutoutSVGElement = newSvgElement;
     document.body.appendChild(newSvgElement);
+
+    // attach eventListener
+    newSvgElement.addEventListener("click", (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      this.options.onOverlayClick();
+    });
+
+    // note - garbage collection will take of "removeEventListener", since element will get removed from the dom without reference at some point
   }
 
   private unmountCutoutElement() {