fix: remove "active" CSS classes before navigating to another cell (#1095)

* fix: remove "active" CSS classes before navigating to another cell

Author: ghiscoding

src/slick.grid.ts

@@ -5860,11 +5860,20 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
   //////////////////////////////////////////////////////////////////////////////////////////////
   // Cell switching
 
-  /**  Resets active cell. */
+  /** Resets active cell by making cell normal and other internal resets. */
   resetActiveCell() {
     this.setActiveCellInternal(null, false);
   }
 
+  /** Clear active cell by making cell normal & removing "active" CSS class. */
+  unsetActiveCell() {
+    if (Utils.isDefined(this.activeCellNode)) {
+      this.makeActiveCellNormal();
+      this.activeCellNode.classList.remove('active');
+      this.rowsCache[this.activeRow]?.rowNode?.forEach((node) => node.classList.remove('active'));
+    }
+  }
+
   /** @alias `setFocus` */
   focus() {
     this.setFocus();
@@ -5913,11 +5922,8 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
   }
 
   protected setActiveCellInternal(newCell: HTMLDivElement | null, opt_editMode?: boolean | null, preClickModeOn?: boolean | null, suppressActiveCellChangedEvent?: boolean, e?: Event | SlickEvent_) {
-    if (Utils.isDefined(this.activeCellNode)) {
-      this.makeActiveCellNormal();
-      this.activeCellNode.classList.remove('active');
-      this.rowsCache[this.activeRow]?.rowNode?.forEach((node) => node.classList.remove('active'));
-    }
+    // make current active cell as normal cell & remove "active" CSS classes
+    this.unsetActiveCell();
 
     // let activeCellChanged = (this.activeCellNode !== newCell);
     this.activeCellNode = newCell;
@@ -6350,11 +6356,13 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
 
   /** Navigate to the top of the grid */
   navigateTop() {
+    this.unsetActiveCell();
     this.navigateToRow(0);
   }
 
   /** Navigate to the bottom of the grid */
   navigateBottom() {
+    this.unsetActiveCell();
     this.navigateToRow(this.getDataLength() - 1);
   }
 
@@ -6689,6 +6697,7 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
       return true;
     }
     this.setFocus();
+    this.unsetActiveCell();
 
     const tabbingDirections = {
       'up': -1,