tour click prevent when outside and type is CLICK

Author: LucaB01

build/cjs/index.js

@@ -259,6 +259,9 @@ <h2 class="sub-headline">
   <div class="header-container-image">
     <img class="head-image" src="./pexels-niklas-jeromin-12734294.jpg" />
   </div>
+  <input type="button" value="Start Tour" placeholder="helloo"/>
+  <input type="text" id="userInput" placeholder="Enter your name">
+  <button onclick="greetUser()">Submit</button>
   <div class="content" id="haha">
     <div class="skeleton-text"></div>
     <div class="skeleton-text"></div>
@@ -268,6 +271,17 @@ <h2 class="sub-headline">
     <div class="skeleton-text"></div>
     <div class="skeleton-text"></div>
   </div>
+
+  <script>
+    function greetUser() {
+      var name = document.getElementById("userInput").value;
+      if (name) {
+        alert("Hello, " + name + "! Welcome to Off-Grid-it-Haus.");
+      } else {
+        alert("Please enter your name.");
+      }
+    }
+  </script>
 </body>
 
 </html>

build/esm/index.mjs

@@ -1,6 +1,6 @@
 {
   "name": "gleap",
-  "version": "14.0.0",
+  "version": "14.0.1",
   "main": "build/cjs/index.js",
   "module": "build/esm/index.mjs",
   "exports": {

demo/index.html

@@ -74,6 +74,7 @@ export default class GleapProductTours {
 
             var driverStep = {
                 disableActiveInteraction: disableInteraction,
+                mode: step.mode,
                 popover: {
                     description: message,
                     popoverClass: `gleap-tour-popover-${step.type} ${!hasSender && 'gleap-tour-popover-no-sender'} ${config.allowClose && 'gleap-tour-popover-can-close'}`,
@@ -104,6 +105,11 @@ export default class GleapProductTours {
                 const step = steps[stepIndex];
                 const element = gleapTourObj.getActiveElement();
 
+                if (step?.mode === "CLICK" && evnt?.target !== element) {
+                    // Ignore clicks outside of the actual element.
+                    return;
+                }
+
                 if ((element && element.tagName === 'INPUT') || step.mode === "INPUT" || evnt?.target?.id.includes("tooltip-svg")) {
                     // Prevent.
                 } else {

package.json

@@ -964,6 +964,10 @@ const GleapTours = function () {
             const activeIndex = getState("activeIndex");
             const activeStep = getState("__activeStep");
             const activeElement = getState("__activeElement");
+            
+            if (activeStep.mode === "CLICK") {
+                return;
+            }
             if (typeof activeIndex === "undefined" || typeof activeStep === "undefined") {
                 return;
             }
@@ -989,6 +993,10 @@ const GleapTours = function () {
             const activeIndex = getState("activeIndex");
             const activeStep = getState("__activeStep");
             const activeElement = getState("__activeElement");
+
+            if (activeStep.mode === "CLICK") {
+                return;
+            }
             if (typeof activeIndex === "undefined" || typeof activeStep === "undefined") {
                 return;
             }