diff --git a/src/slick.grid.ts b/src/slick.grid.ts index cd28b6a2..0a86a86d 100644 --- a/src/slick.grid.ts +++ b/src/slick.grid.ts @@ -5860,11 +5860,20 @@ export class SlickGrid = Column, 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 = Column, 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 = Column, 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 = Column, O e return true; } this.setFocus(); + this.unsetActiveCell(); const tabbingDirections = { 'up': -1,