From adf01be28d297692d20f741c581f3dde0409587b Mon Sep 17 00:00:00 2001
From: binrysearch <me@binarysearch.dev>
Date: Sun, 8 Sep 2024 09:25:42 +0100
Subject: [PATCH] Fix the showElement bug in previous step

---
 src/packages/tour/exitIntro.ts         |  4 +++-
 src/packages/tour/removeShowElement.ts | 16 ----------------
 src/packages/tour/showElement.ts       | 20 ++++++++++++++++++--
 src/packages/tour/steps.ts             | 10 ++++++++--
 4 files changed, 29 insertions(+), 21 deletions(-)
 delete mode 100644 src/packages/tour/removeShowElement.ts

diff --git a/src/packages/tour/exitIntro.ts b/src/packages/tour/exitIntro.ts
index 3cf38197f..0ab281198 100644
--- a/src/packages/tour/exitIntro.ts
+++ b/src/packages/tour/exitIntro.ts
@@ -1,4 +1,4 @@
-import removeShowElement from "./removeShowElement";
+import { removeShowElement } from "./showElement";
 import { Tour } from "./tour";
 
 /**
@@ -28,6 +28,8 @@ export default async function exitIntro(
   await tour.callback("exit")?.call(tour);
 
   // set the step to default
+  // this would update the signal to the tour that the tour has ended
+  // and the corresponding components would be updated
   tour.resetCurrentStep();
 
   return true;
diff --git a/src/packages/tour/removeShowElement.ts b/src/packages/tour/removeShowElement.ts
deleted file mode 100644
index 829299190..000000000
--- a/src/packages/tour/removeShowElement.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { queryElementsByClassName } from "../../util/queryElement";
-import { removeClass } from "../../util/className";
-import { showElementClassName } from "./classNames";
-
-/**
- * To remove all show element(s)
- *
- * @api private
- */
-export default function removeShowElement() {
-  const elms = Array.from(queryElementsByClassName(showElementClassName));
-
-  for (const elm of elms) {
-    removeClass(elm, /introjs-[a-zA-Z]+/g);
-  }
-}
diff --git a/src/packages/tour/showElement.ts b/src/packages/tour/showElement.ts
index 34bcc1326..83d275932 100644
--- a/src/packages/tour/showElement.ts
+++ b/src/packages/tour/showElement.ts
@@ -1,8 +1,11 @@
 import { addClass } from "../../util/className";
 import { TourStep } from "./steps";
-import removeShowElement from "./removeShowElement";
 import { Tour } from "./tour";
 import getPropValue from "../../util/getPropValue";
+import { queryElementsByClassName } from "../../util/queryElement";
+import { removeClass } from "../../util/className";
+import { showElementClassName } from "./classNames";
+
 /**
  * To set the show element
  * This function set a relative (in most cases) position and changes the z-index
@@ -29,7 +32,7 @@ function setShowElement(targetElement: HTMLElement) {
  *
  * @api private
  */
-export default async function _showElement(tour: Tour, step: TourStep) {
+export async function showElement(tour: Tour, step: TourStep) {
   tour.callback("change")?.call(tour, step.element);
 
   //remove old classes if the element still exist
@@ -39,3 +42,16 @@ export default async function _showElement(tour: Tour, step: TourStep) {
 
   await tour.callback("afterChange")?.call(tour, step.element);
 }
+
+/**
+ * To remove all show element(s)
+ *
+ * @api private
+ */
+export function removeShowElement() {
+  const elms = Array.from(queryElementsByClassName(showElementClassName));
+
+  for (const elm of elms) {
+    removeClass(elm, /introjs-[a-zA-Z]+/g);
+  }
+}
diff --git a/src/packages/tour/steps.ts b/src/packages/tour/steps.ts
index 2ec711571..161ef4b74 100644
--- a/src/packages/tour/steps.ts
+++ b/src/packages/tour/steps.ts
@@ -1,5 +1,4 @@
 import { TooltipPosition } from "../../packages/tooltip";
-import showElement from "./showElement";
 import { queryElement, queryElements } from "../../util/queryElement";
 import cloneObject from "../../util/cloneObject";
 import { Tour } from "./tour";
@@ -14,6 +13,7 @@ import {
   dataTitleAttribute,
   dataTooltipClass,
 } from "./dataAttributes";
+import { showElement } from "./showElement";
 
 export type ScrollTo = "off" | "element" | "tooltip";
 
@@ -80,13 +80,19 @@ export async function nextStep(tour: Tour) {
  * @api private
  */
 export async function previousStep(tour: Tour) {
-  const currentStep = tour.getCurrentStep();
+  let currentStep = tour.getCurrentStep();
 
   if (currentStep === undefined || currentStep <= 0) {
     return false;
   }
 
   tour.decrementCurrentStep();
+  // update the current step after decrementing
+  currentStep = tour.getCurrentStep();
+
+  if (currentStep === undefined) {
+    return false;
+  }
 
   const nextStep = tour.getStep(currentStep);
   let continueStep: boolean | undefined = true;