Fix onDeselected not being called

index.html

@@ -401,20 +401,14 @@ npm install driver.js</pre
       document.getElementById("async-tour").addEventListener("click", () => {
         const driverObj = driver({
           animate: true,
-          backdropColor: "blue",
           opacity: 0.3,
-          onDeselected: (element => {
-            if (element?.classList?.contains('dynamic-el')) {
-              element?.parentElement?.removeChild(element);
-            }
-          }),
           steps: [
             {
               element: ".page-header",
               popover: {
                 title: "Async Driver.js",
                 description:
-                        "Driver.js has been written from the ground up. The new version is more powerful, has less surprises, more customizable and tons of new features.",
+                  "Driver.js has been written from the ground up. The new version is more powerful, has less surprises, more customizable and tons of new features.",
                 side: "bottom",
                 align: "start",
               },
@@ -427,38 +421,41 @@ npm install driver.js</pre
                 side: "left",
                 align: "start",
                 onNextClick: () => {
-                  const newDiv = document.querySelector('.dynamic-el') || document.createElement('div');
-
-                  newDiv.innerHTML = 'This is a new Element';
-                  newDiv.style.display = 'block';
-                  newDiv.style.padding = '20px';
-                  newDiv.style.backgroundColor = 'black';
-                  newDiv.style.color = 'white';
-                  newDiv.style.fontSize = '14px';
-                  newDiv.style.position = 'fixed';
+                  const newDiv = document.querySelector(".dynamic-el") || document.createElement("div");
+
+                  newDiv.innerHTML = "This is a new Element";
+                  newDiv.style.display = "block";
+                  newDiv.style.padding = "20px";
+                  newDiv.style.backgroundColor = "black";
+                  newDiv.style.color = "white";
+                  newDiv.style.fontSize = "14px";
+                  newDiv.style.position = "fixed";
                   newDiv.style.top = `${Math.random() * (500 - 30) + 30}px`;
                   newDiv.style.left = `${Math.random() * (500 - 30) + 30}px`;
-                  newDiv.className = 'dynamic-el';
+                  newDiv.className = "dynamic-el";
 
                   document.body.appendChild(newDiv);
 
                   driverObj.moveNext();
-                }
+                },
               },
             },
             {
-              element: '.dynamic-el',
+              element: ".dynamic-el",
               popover: {
                 title: "Dynamic Elements",
-                description: "This was created before we moved here"
-              }
+                description: "This was created before we moved here",
+                onDeselected: element => {
+                  element?.parentElement?.removeChild(element);
+                },
+              },
             },
             {
               element: ".page-header sup",
               popover: {
                 title: "Improved Hooks",
                 description:
-                        "Unlike the older version, new version doesn't work with z-indexes so no more positional issues.",
+                  "Unlike the older version, new version doesn't work with z-indexes so no more positional issues.",
                 side: "bottom",
                 align: "start",
               },
@@ -621,7 +618,7 @@ npm install driver.js</pre
         const driverObj = driver({
           stagePadding: 0,
           popoverOffset: 20,
-          stageRadius: 10
+          stageRadius: 10,
         });
 
         driverObj.highlight({

src/driver.ts

@@ -149,7 +149,7 @@ export function driver(options: Config = {}) {
     const activeElement = getState("activeElement");
     const activeStep = getState("activeStep");
 
-    const onDeselected = getConfig("onDeselected");
+    const onDeselected = activeStep?.popover?.onDeselected || getConfig("onDeselected");
     const onDestroyed = getConfig("onDestroyed");
 
     document.body.classList.remove("driver-active", "driver-fade", "driver-simple");

src/highlight.ts

@@ -72,7 +72,7 @@ function transferHighlight(toElement: Element, toStep: DriveStep) {
   const isAnimatedTour = getConfig("animate");
   const highlightStartedHook = getConfig("onHighlightStarted");
   const highlightedHook = getConfig("onHighlighted");
-  const deselectedHook = getConfig("onDeselected");
+  const deselectedHook = fromStep?.popover?.onDeselected || getConfig("onDeselected");
 
   if (!isFirstHighlight && deselectedHook) {
     deselectedHook(isFromDummyElement ? undefined : fromElement, fromStep!);

src/popover.ts

@@ -28,6 +28,7 @@ export type Popover = {
 
   // Called after the popover is rendered
   onPopoverRendered?: (popover: PopoverDOM) => void;
+  onDeselected?: (element: Element | undefined, step: DriveStep) => void;
 
   // Button callbacks
   onNextClick?: (element: Element | undefined, step: DriveStep) => void;