product tour id refactor and nested element detection

GleapSDK · Oct 4, 2024 · 329c505 · 329c505
1 parent 4558906
commit 329c505
Show file tree

Hide file tree

Showing 8 changed files with 23 additions and 8 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/build/cjs/index.js b/build/cjs/index.js
diff --git a/build/esm/index.mjs b/build/esm/index.mjs
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "gleap",
-  "version": "14.0.3",
+  "version": "14.0.4",
   "main": "build/cjs/index.js",
   "module": "build/esm/index.mjs",
   "exports": {

diff --git a/published/14.0.4/index.js b/published/14.0.4/index.js
diff --git a/published/latest/index.js b/published/latest/index.js
diff --git a/src/GleapProductTours.js b/src/GleapProductTours.js
@@ -106,8 +106,12 @@ export default class GleapProductTours {
                 const element = gleapTourObj.getActiveElement();
 
                 if (step?.mode === "CLICK" && evnt?.target !== element) {
-                    // Ignore clicks outside of the actual element.
-                    return;
+                    const isInsideElement = element.contains(evnt?.target);
+
+                    if (!isInsideElement) {
+                        // Ignore clicks outside of the actual element.
+                        return;
+                    }
                 }
 
                 if ((element && element.tagName === 'INPUT') || step.mode === "INPUT" || evnt?.target?.id.includes("tooltip-svg")) {

diff --git a/src/GleapTours.js b/src/GleapTours.js
@@ -224,8 +224,18 @@ const GleapTours = function () {
     }
     function highlight(step, attemptTime = 2000) {
         const { element } = step;
-        let elemObj = typeof element === "string" ? document.querySelector(element) : element;
-
+        let elemObj = element;
+        if (typeof elemObj === "string") {
+            try {
+                elemObj = document.querySelector(element);
+            } catch (error) {
+                // This will escape colons within IDs but not affect pseudo-classes or other valid uses of colons
+                let refactoredElement = element.replace(/(#[^#\s]+)/g, function(match) {
+                    return match.replace(/:/g, '\\:');
+                });
+                elemObj = document.querySelector(refactoredElement);
+            }            
+        }
         if (element && !elemObj && attemptTime >= 0) {
             setTimeout(() => {
                 hidePopover();