[DataGrid] Fix error when keyboard navigating an empty grid (#10081)

mui · Aug 31, 2023 · e743bf5 · e743bf5
1 parent 55afbc8
commit e743bf5
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 2 deletions.
diff --git a/packages/grid/x-data-grid/src/hooks/features/keyboardNavigation/useGridKeyboardNavigation.ts b/packages/grid/x-data-grid/src/hooks/features/keyboardNavigation/useGridKeyboardNavigation.ts
@@ -171,7 +171,7 @@ export const useGridKeyboardNavigation = (
 
   const getRowIdFromIndex = React.useCallback(
     (rowIndex: number) => {
-      return currentPageRows?.[rowIndex].id;
+      return currentPageRows[rowIndex]?.id;
     },
     [currentPageRows],
   );
@@ -197,7 +197,7 @@ export const useGridKeyboardNavigation = (
 
       const viewportPageSize = apiRef.current.getViewportPageSize();
       const colIndexBefore = params.field ? apiRef.current.getColumnIndex(params.field) : 0;
-      const firstRowIndexInPage = 0;
+      const firstRowIndexInPage = currentPageRows.length > 0 ? 0 : null;
       const lastRowIndexInPage = currentPageRows.length - 1;
       const firstColIndex = 0;
       const lastColIndex = gridVisibleColumnDefinitionsSelector(apiRef).length - 1;

diff --git a/packages/grid/x-data-grid/src/tests/keyboard.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/keyboard.DataGrid.test.tsx
@@ -715,4 +715,19 @@ describe('<DataGrid /> - Keyboard', () => {
     fireEvent.keyDown(firstCell, { key: 'ArrowDown' });
     expect(virtualScroller.scrollLeft).to.equal(0);
   });
+
+  it('should not throw when moving into an empty grid', async () => {
+    const columns = [{ field: 'id', width: 400 }, { field: 'name' }];
+    const rows = [] as any[];
+
+    render(
+      <div style={{ width: 300, height: 300 }}>
+        <DataGrid rows={rows} columns={columns} />
+      </div>,
+    );
+
+    const cell = getColumnHeaderCell(0);
+    act(() => cell.focus());
+    fireEvent.keyDown(cell, { key: 'ArrowDown' });
+  });
 });