fix: add class to highlighted element, while it is highlighted

josias-r · Nov 4, 2022 · e43307f · e43307f
1 parent 7be6bb8
commit e43307f
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 0 deletions.
diff --git a/src/lib/common/constants.ts b/src/lib/common/constants.ts
@@ -22,6 +22,7 @@ const CLASS_NEXT_STEP_BTN = "boarding-next-btn";
 const CLASS_PREV_STEP_BTN = "boarding-prev-btn";
 const CLASS_NAVIGATION_BTNS = "boarding-navigation-btns";
 export const CLASS_CUTOUT = "boarding-coutout-svg";
+export const CLASS_ACTIVE_HIGHLIGHTED_ELEMENT = "boarding-highlighted-element";
 
 export const CLASS_BTN_DISABLED = "boarding-disabled";
 export const CLASS_CLOSE_ONLY_BTN = "boarding-close-only-btn";

diff --git a/src/lib/core/highlight-element.ts b/src/lib/core/highlight-element.ts
@@ -1,4 +1,5 @@
 import { BoardingSharedOptions } from "../boarding-types";
+import { CLASS_ACTIVE_HIGHLIGHTED_ELEMENT } from "../common/constants";
 import { bringInView } from "../common/utils";
 import Popover from "./popover";
 
@@ -88,8 +89,12 @@ class HighlightElement {
    * i.e. when moving the focus to next element of closing
    */
   public onDeselected() {
+    // hide popover
     this.popover?.hide();
 
+    // remove active class
+    this.getElement().classList.remove(CLASS_ACTIVE_HIGHLIGHTED_ELEMENT);
+
     this.options.onDeselected?.(this);
   }
 
@@ -111,6 +116,9 @@ class HighlightElement {
     // the cases where the container has scroll overflow
     this.popover?.show(this);
 
+    // add active class
+    this.getElement().classList.add(CLASS_ACTIVE_HIGHLIGHTED_ELEMENT);
+
     this.options.onHighlighted?.(this);
   }