Fixes #383 - adds support for disableActiveInteraction option

Author: kamranahmedse

index.html

@@ -386,6 +386,13 @@ <h2>Usage and Demo</h2>
             description: "You can now have popovers without elements as well",
           },
         },
+        {
+          element: '.buttons',
+          popover: {
+            title: "Buttons",
+            description: "Here are some buttons",
+          },
+        },
         {
           element: "#scrollable-area",
           popover: {
@@ -457,6 +464,7 @@ <h2>Usage and Demo</h2>
         const driverObj = driver({
           animate: true,
           steps: basicTourSteps,
+          disableActiveInteraction: true,
           showProgress: true,
           progressText: "{{current}} of {{total}} done",
           onPopoverRender: (popover) => {

src/config.ts

@@ -15,6 +15,8 @@ export type Config = {
   stagePadding?: number;
   stageRadius?: number;
 
+  disableActiveInteraction?: boolean;
+
   allowKeyboardControl?: boolean;
 
   // Popover specific configuration
@@ -54,6 +56,7 @@ export function configure(config: Config = {}) {
     allowClose: true,
     overlayOpacity: 0.7,
     smoothScroll: false,
+    disableActiveInteraction: false,
     showProgress: false,
     stagePadding: 10,
     stageRadius: 5,

src/driver.css

@@ -80,7 +80,8 @@
   transition-duration: 200ms;
 }
 
-.driver-popover-close-btn:hover, .driver-popover-close-btn:focus {
+.driver-popover-close-btn:hover,
+.driver-popover-close-btn:focus {
   color: #2d2d2d;
 }
 
@@ -140,7 +141,12 @@
   overflow: hidden !important;
 }
 
-.driver-popover-footer button:hover, .driver-popover-footer button:focus {
+.driver-no-interaction, .driver-no-interaction * {
+  pointer-events: none !important;
+}
+
+.driver-popover-footer button:hover,
+.driver-popover-footer button:focus {
   background-color: #f7f7f7;
 }
 

src/highlight.ts

@@ -146,11 +146,16 @@ function transferHighlight(toElement: Element, toStep: DriveStep) {
     renderPopover(toElement, toStep);
   }
 
-  fromElement.classList.remove("driver-active-element");
+  fromElement.classList.remove("driver-active-element", "driver-no-interaction");
   fromElement.removeAttribute("aria-haspopup");
   fromElement.removeAttribute("aria-expanded");
   fromElement.removeAttribute("aria-controls");
 
+  const disableActiveInteraction = getConfig("disableActiveInteraction");
+  if (disableActiveInteraction) {
+    toElement.classList.add("driver-no-interaction");
+  }
+
   toElement.classList.add("driver-active-element");
   toElement.setAttribute("aria-haspopup", "dialog");
   toElement.setAttribute("aria-expanded", "true");
@@ -160,7 +165,7 @@ function transferHighlight(toElement: Element, toStep: DriveStep) {
 export function destroyHighlight() {
   document.getElementById("driver-dummy-element")?.remove();
   document.querySelectorAll(".driver-active-element").forEach(element => {
-    element.classList.remove("driver-active-element");
+    element.classList.remove("driver-active-element", "driver-no-interaction");
     element.removeAttribute("aria-haspopup");
     element.removeAttribute("aria-expanded");
     element.removeAttribute("aria-controls");

src/utils.ts

@@ -18,7 +18,9 @@ export function getFocusableElements(parentEls: Element[] | HTMLElement[]) {
 
       return [...(isParentFocusable ? [parentEl as HTMLElement] : []), ...focusableEls];
     })
-    .filter(el => isElementVisible(el));
+    .filter(el => {
+      return getComputedStyle(el).pointerEvents !== "none" && isElementVisible(el);
+    });
 }
 
 export function bringInView(element: Element) {