Fix custom button clicks not working

docs/src/components/CodeSample.tsx

@@ -1,7 +1,8 @@
-import type { Config, DriveStep } from "driver.js";
+import type { Config, DriveStep, PopoverDOM } from "driver.js";
 import { driver } from "driver.js";
 import "driver.js/dist/driver.css";
 import { useState } from "react";
+import { onDriverClick } from "../../../src/events";
 
 type CodeSampleProps = {
   heading?: string;
@@ -40,18 +41,32 @@ function mountDummyElement() {
   document.body.appendChild(newDiv);
 }
 
+function attachFirstButton(popover: PopoverDOM) {
+  const firstButton = document.createElement("button");
+  firstButton.innerText = "First";
+  popover.footerButtons.appendChild(firstButton);
+
+  console.log(firstButton);
+  firstButton.addEventListener("click", () => {
+    console.log('clicked');
+  });
+}
+
 export function CodeSample(props: CodeSampleProps) {
-  const [driverObj, setDriverObj] = useState<any>(null);
   const { heading, id, children, buttonText = "Show me an Example", className, config, highlight, tour } = props;
 
+  if (id === "demo-hook-theme") {
+    config!.onPopoverRendered = attachFirstButton;
+  }
+
   function onClick() {
     if (highlight) {
       const driverObj = driver({
         ...config,
       });
-      driverObj.highlight(highlight);
 
-      setDriverObj(driverObj);
+      window.driverObj = driverObj;
+      driverObj.highlight(highlight);
     } else if (tour) {
       if (id === "confirm-destroy") {
         config!.onDestroyStarted = () => {
@@ -113,8 +128,8 @@ export function CodeSample(props: CodeSampleProps) {
         steps: tour,
       });
 
+      window.driverObj = driverObj;
       driverObj.drive();
-      setDriverObj(driverObj);
     }
   }
 

docs/src/content/guides/styling-popover.mdx

@@ -12,38 +12,123 @@ Alternatively, if want to modify the Popover DOM, you can use the `onPopoverRend
 
 We have added a few examples below but have a look at the [theming section](/docs/theming#styling-popover) for detailed guide including class names to target etc.
 
-## Using CSS
+<CodeSample
+  heading="Using CSS"
+  buttonText={"Driver.js Website Theme"}
+  config={{
+    prevBtnText: '&larr; Previous',
+    nextBtnText: 'Next &rarr;',
+    doneBtnText: 'Done',
+    showButtons: ['next', 'previous'],
+    popoverClass: 'driverjs-theme'
+  }}
+  tour={[
+    {
+      element: '#demo-theme',
+      popover: {
+        align: 'start',
+        side: 'left',
+        title: 'Style However You Want',
+        description: 'You can use the default class names and override the styles or you can pass a custom class name to the popoverClass option either globally or per step.'
+      }
+    },
+    {
+      element: 'h1',
+      popover: {
+        align: 'start',
+        side: 'bottom',
+        title: 'Style However You Want',
+        description: 'You can use the default class names and override the styles or you can pass a custom class name to the popoverClass option either globally or per step.'
+      }
+    },
+    {
+      element: 'p a',
+      popover: {
+        align: 'start',
+        side: 'left',
+        title: 'Style However You Want',
+        description: 'You can use the default class names and override the styles or you can pass a custom class name to the popoverClass option either globally or per step.'
+      }
+    }
+  ]}
+  id={"demo-theme"}
+  client:load
+>
+  ```js
+  import { driver } from "driver.js";
+  import "driver.js/dist/driver.css";
 
-Here are some driver.js examples with different overlay colors.
+  const driverObj = driver({
+    popoverClass: 'driverjs-theme'
+  });
 
-```js
-import { driver } from "driver.js";
-import "driver.js/dist/driver.css";
+    driverObj.highlight({
+    element: '#demo-theme',
+    popover: {
+      title: 'Style However You Want',
+      description: 'You can use the default class names and override the styles or you can pass a custom class name to the popoverClass option either globally or per step.'
+    }
+  });
+  ```
+</CodeSample>
 
-const driverObj = driver();
+<br/>
 
-driverObj.highlight({
-  popover: {
-    title: 'Pass any RGB Color',
-    description: 'Here we have set the overlay color to be blue. You can pass any RGB color to overlayColor option.'
-  }
-});
-```
-
-<div className='flex flex-col gap-1 -mt-5'>
-  <CodeSample
-    buttonText={"Red Color"}
-    config={{
-      overlayColor: 'red',
-      overlayOpacity: 0.3
-    }}
-    highlight={{
+<CodeSample
+  heading="Using Hook"
+  buttonText={"Driver.js Website Theme"}
+  config={{
+    prevBtnText: '&larr; Previous',
+    nextBtnText: 'Next &rarr;',
+    doneBtnText: 'Done',
+    showButtons: ['next', 'previous'],
+  }}
+  tour={[
+    {
+      element: '#demo-hook-theme',
       popover: {
-        title: 'Pass any RGB Color',
-        description: 'Here we have set the overlay color to be blue. You can pass any RGB color to overlayColor option.',
+        align: 'start',
+        side: 'left',
+        title: 'Style However You Want',
+        description: 'You can use the default class names and override the styles or you can pass a custom class name to the popoverClass option either globally or per step.'
       }
-    }}
-    id={"left-start"}
-    client:load
-  />
-</div>
+    },
+    {
+      element: 'h1',
+      popover: {
+        align: 'start',
+        side: 'bottom',
+        title: 'Style However You Want',
+        description: 'You can use the default class names and override the styles or you can pass a custom class name to the popoverClass option either globally or per step.'
+      }
+    },
+    {
+      element: 'p a',
+      popover: {
+        align: 'start',
+        side: 'left',
+        title: 'Style However You Want',
+        description: 'You can use the default class names and override the styles or you can pass a custom class name to the popoverClass option either globally or per step.'
+      }
+    }
+  ]}
+  id={"demo-hook-theme"}
+  client:load
+>
+  ```js
+  import { driver } from "driver.js";
+  import "driver.js/dist/driver.css";
+
+  const driverObj = driver({
+  popoverClass: 'driverjs-theme'
+});
+
+  driverObj.highlight({
+  element: '#demo-theme',
+  popover: {
+  title: 'Style However You Want',
+  description: 'You can use the default class names and override the styles or you can pass a custom class name to the popoverClass option either globally or per step.'
+}
+});
+  ```
+</CodeSample>

docs/src/layouts/BaseLayout.astro

@@ -17,6 +17,69 @@ const { title } = Astro.props;
 		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
 		<meta name="generator" content={Astro.generator} />
 		<title>{title}</title>
+
+		<style is:global>
+			.driver-popover.driverjs-theme {
+				background-color: #fde047;
+				color: #000;
+			}
+
+			.driver-popover.driverjs-theme .driver-popover-title {
+				font-size: 20px;
+			}
+
+			.driver-popover.driverjs-theme .driver-popover-title,
+			.driver-popover.driverjs-theme .driver-popover-description,
+			.driver-popover.driverjs-theme .driver-popover-progress-text {
+				color: #000;
+			}
+
+			.driver-popover.driverjs-theme button {
+				flex: 1;
+				text-align: center;
+				background-color: #000;
+				color: #ffffff;
+				border: 2px solid #000;
+				text-shadow: none;
+				font-size: 14px;
+				padding: 5px 8px;
+				border-radius: 6px;
+			}
+
+			.driver-popover.driverjs-theme button:hover {
+				background-color: #000;
+				color: #ffffff;
+			}
+
+			.driver-popover.driverjs-theme .driver-popover-navigation-btns {
+				justify-content: space-between;
+				gap: 3px;
+			}
+
+			.driver-popover.driverjs-theme .driver-popover-close-btn {
+				color: #9b9b9b;
+			}
+
+			.driver-popover.driverjs-theme .driver-popover-close-btn:hover {
+				color: #000;
+			}
+
+			.driver-popover.driverjs-theme .driver-popover-arrow-side-left.driver-popover-arrow {
+				border-left-color: #fde047;
+			}
+
+			.driver-popover.driverjs-theme .driver-popover-arrow-side-right.driver-popover-arrow {
+				border-right-color: #fde047;
+			}
+
+			.driver-popover.driverjs-theme .driver-popover-arrow-side-top.driver-popover-arrow {
+				border-top-color: #fde047;
+			}
+
+			.driver-popover.driverjs-theme .driver-popover-arrow-side-bottom.driver-popover-arrow {
+				border-bottom-color: #fde047;
+			}
+		</style>
 	</head>
 	<body>
 		<slot />

index.html

@@ -188,6 +188,7 @@
         <button id="disabled-buttons">Disabled Buttons</button>
         <button id="button-config-events">Button Listeners</button>
         <button id="button-tour-events">Tour Button Listeners</button>
+        <button id="popover-hook-config">Popover Modified in Hook</button>
       </div>
 
       <br />
@@ -757,6 +758,27 @@ npm install driver.js</pre
         driverObj.drive();
       });
 
+      document.getElementById("popover-hook-config").addEventListener("click", () => {
+        const driverObj = driver({
+          onPopoverRendered: popover => {
+            const firstButton = document.createElement("button");
+            firstButton.innerText = "First";
+            popover.footerButtons.appendChild(firstButton);
+
+            firstButton.addEventListener("click", () => {
+              console.log("First Button Clicked");
+            });
+          },
+          steps: [
+            { popover: { title: "Some title", description: "Some description" }},
+            { popover: { title: "Another title", description: "Some description" }},
+            { popover: { title: "Yet another title", description: "Some description" }},
+          ]
+        });
+
+        driverObj.drive();
+      });
+
       document.getElementById("is-active-btn").addEventListener("click", () => {
         alert(driver().isActive());
       });

src/events.ts

@@ -50,11 +50,10 @@ export function onDriverClick(
 
     if (!shouldPreventDefault || shouldPreventDefault(target)) {
       e.preventDefault();
+      e.stopPropagation();
+      e.stopImmediatePropagation();
     }
 
-    e.stopPropagation();
-    e.stopImmediatePropagation();
-
     listener?.(e);
   };
 
@@ -84,6 +83,7 @@ export function initEvents() {
 }
 
 export function destroyEvents() {
+  window.removeEventListener("keyup", onKeyup);
   window.removeEventListener("resize", requireRefresh);
   window.removeEventListener("scroll", requireRefresh);
 }

src/popover.ts

@@ -193,9 +193,11 @@ export function renderPopover(element: Element, step: DriveStep) {
       return undefined;
     },
     target => {
-      // Only prevent the default action if we're clicking on a button
+      // Only prevent the default action if we're clicking on a driver button
       // This allows us to have links inside the popover title and description
-      return !popover?.description.contains(target) && !popover?.title.contains(target);
+      return !popover?.description.contains(target)
+        && !popover?.title.contains(target)
+        && target.className.includes("driver-popover");
     }
   );