From 0c631f7e0228ac15f9643e19924eed67bc1447e5 Mon Sep 17 00:00:00 2001
From: ghiscoding <gbeaulac@gmail.com>
Date: Sat, 18 Jan 2025 01:03:08 -0500
Subject: [PATCH] chore: fix a small regression with navigateTop/Bottom

---
 cypress/e2e/example4-model-esm.cy.ts          |  8 +++++++
 cypress/e2e/example4-model.cy.ts              |  8 +++++++
 examples/example-0031-row-span-employees.html | 22 -----------------
 examples/example4-model-esm.html              | 17 ++++++++++++-
 examples/example4-model.html                  | 10 +++++++-
 src/slick.grid.ts                             | 12 ++++++----
 src/styles/example-demo.scss                  | 24 +++++++++++++++++++
 7 files changed, 73 insertions(+), 28 deletions(-)

diff --git a/cypress/e2e/example4-model-esm.cy.ts b/cypress/e2e/example4-model-esm.cy.ts
index 199e86a2..a958a5fd 100644
--- a/cypress/e2e/example4-model-esm.cy.ts
+++ b/cypress/e2e/example4-model-esm.cy.ts
@@ -162,4 +162,12 @@ describe('Example 4 - Model (ESM)', () => {
     cy.get(`[style*="top: ${GRID_ROW_HEIGHT * 18}px;"] > .slick-cell:nth(2)`).should('contain', '5 days').click();
     cy.get('.editor-text').should('not.exist');
   });
+
+  it('should navigate to bottom/top of the grid with command execution', () => {
+    cy.get('[data-test="navigate-bottom"]').click();
+    cy.get('[data-row=49999]').should('contain', 'Task 49999');
+
+    cy.get('[data-test="navigate-top"]').click();
+    cy.get('[data-row=1]').should('contain', 'Task 1');
+  });
 });
diff --git a/cypress/e2e/example4-model.cy.ts b/cypress/e2e/example4-model.cy.ts
index e7f0755c..64c92d92 100644
--- a/cypress/e2e/example4-model.cy.ts
+++ b/cypress/e2e/example4-model.cy.ts
@@ -49,6 +49,14 @@ describe('Example 4 - Model', () => {
       });
   });
 
+  it('should navigate to bottom/top of the grid with command execution', () => {
+    cy.get('[data-test="navigate-bottom"]').click();
+    cy.get('[data-row=49999]').should('contain', 'Task 49999');
+
+    cy.get('[data-test="navigate-top"]').click();
+    cy.get('[data-row=1]').should('contain', 'Task 1');
+  });
+
   it('Should display "Showing page 1 of 1000" text after changing Pagination to 50 items per page', () => {
     cy.get('.sgi-lightbulb')
       .click();
diff --git a/examples/example-0031-row-span-employees.html b/examples/example-0031-row-span-employees.html
index 27cf3746..45f1ba2b 100644
--- a/examples/example-0031-row-span-employees.html
+++ b/examples/example-0031-row-span-employees.html
@@ -9,28 +9,6 @@
   <link rel="stylesheet" href="../dist/styles/css/slick-alpine-theme.css" type="text/css"/>
   <link rel="stylesheet" href="../dist/styles/css/slick-icons.css" type="text/css"/>
 	<style>
-    button.btn {
-      background-color: white;
-      border: 1px solid #9a9a9a;
-      border-radius: 3px;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      padding: 6px 8px;
-      gap: 4px;
-    }
-    .rotate-90 {
-      transform: rotate(90deg);
-    }
-    .rotate-180 {
-      transform: rotate(180deg);
-    }
-    .rotate-270 {
-      transform: rotate(270deg);
-    }
-    .text-italic {
-      font-style: italic;
-    }
     #myGrid {
       --alpine-odd-row-color: #fff;
       --alpine-cell-border-width: 0 1px 1px 0;
diff --git a/examples/example4-model-esm.html b/examples/example4-model-esm.html
index 9a72205c..62d99d2b 100644
--- a/examples/example4-model-esm.html
+++ b/examples/example4-model-esm.html
@@ -92,7 +92,15 @@ <h2>
       <label style="width:200px;float:left">And title including:</label>
       <input type=text id="txtSearch" style="width:100px;">
       <br/><br/>
-      <button id="btnSelectRows">Select first 10 rows</button>
+      <div style="display: flex; gap: 4px;">
+        <button class="btn" id="btnSelectRows">Select first 10 rows</button>
+        <button class="btn" id="btnNavigateBottom" data-test="navigate-bottom" title="Navigate Down Cell">
+          <span class="sgi sgi-chevron-left rotate-270"> </span>
+        </button>
+        <button class="btn" id="btnNavigateTop" data-test="navigate-top" title="Navigate Up Cell">
+          <span class="sgi sgi-chevron-left rotate-90"> </span>
+        </button>
+      </div>
 
       <br/>
 
@@ -379,6 +387,13 @@ <h2>View Source:</h2>
     dataView.refresh();
   }
 
+  document.querySelector("#btnNavigateBottom").addEventListener('click', () => {
+    grid.navigateBottom();
+  });
+  document.querySelector("#btnNavigateTop").addEventListener('click', () => {
+    grid.navigateTop();
+  });
+
   document.querySelector("#btnSelectRows").addEventListener('click', () => {
     if (!SlickGlobalEditorLock.commitCurrentEdit()) {
       return;
diff --git a/examples/example4-model.html b/examples/example4-model.html
index 020d70c9..871974d3 100644
--- a/examples/example4-model.html
+++ b/examples/example4-model.html
@@ -60,7 +60,15 @@ <h2>
       <label style="width:200px;float:left">And title including:</label>
       <input type=text id="txtSearch" style="width:100px;">
       <br/><br/>
-      <button id="btnSelectRows">Select first 10 rows</button>
+      <div style="display: flex; gap: 4px;">
+        <button class="btn" id="btnSelectRows">Select first 10 rows</button>
+        <button class="btn" id="btnNavigateBottom" data-test="navigate-bottom" title="Navigate Down Cell" onclick="grid.navigateBottom()">
+          <span class="sgi sgi-chevron-left rotate-270"> </span>
+        </button>
+        <button class="btn" id="btnNavigateTop" data-test="navigate-top" title="Navigate Up Cell" onclick="grid.navigateTop()">
+          <span class="sgi sgi-chevron-left rotate-90"> </span>
+        </button>
+      </div>
 
       <br/>
 
diff --git a/src/slick.grid.ts b/src/slick.grid.ts
index b15f7901..908d9ffd 100644
--- a/src/slick.grid.ts
+++ b/src/slick.grid.ts
@@ -6675,8 +6675,11 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
     let tmpRow = this.getParentRowSpanByCell(row, this.activeCell)?.start ?? row;
 
     do {
-      this.setActiveRow(tmpRow);
-      if (this.navigateToRow(tmpRow) && this.activeCell === this.activePosX) {
+      if (this._options.enableCellRowSpan) {
+        this.setActiveRow(tmpRow);
+      }
+      const isValidMode = this.navigateToRow(tmpRow);
+      if ((isValidMode && this.activeCell === this.activePosX) || !Utils.isDefined(this.activeCell)) {
         break;
       }
     } while (--tmpRow > 0);
@@ -6693,7 +6696,8 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
     }
 
     this.scrollCellIntoView(row, 0, true);
-    let isValidMove = false;
+    let isValidMove = !Utils.isDefined(this.activeCell) || !Utils.isDefined(this.activeRow);
+
     if (this._options.enableCellNavigation && Utils.isDefined(this.activeRow)) {
       let cell = 0;
       let prevCell: number | null = null;
@@ -6701,7 +6705,7 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
       while (cell <= this.activePosX) {
         if (this.canCellBeActive(row, cell)) {
           prevCell = cell;
-          if (cell === this.activeCell) {
+          if (!Utils.isDefined(this.activeCell) || cell === this.activeCell) {
             isValidMove = true;
           }
         }
diff --git a/src/styles/example-demo.scss b/src/styles/example-demo.scss
index a4d1bde7..d575ea21 100644
--- a/src/styles/example-demo.scss
+++ b/src/styles/example-demo.scss
@@ -52,4 +52,28 @@ ul {
     font-family: var(--alpine-font-family, $alpine-font-family);
     font-size: 12px;
   }
+}
+
+button.btn {
+  cursor: pointer;
+  background-color: white;
+  border: 1px solid #9a9a9a;
+  border-radius: 3px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 6px 8px;
+  gap: 4px;
+}
+.rotate-90 {
+  transform: rotate(90deg);
+}
+.rotate-180 {
+  transform: rotate(180deg);
+}
+.rotate-270 {
+  transform: rotate(270deg);
+}
+.text-italic {
+  font-style: italic;
 }
\ No newline at end of file