[DataGrid] Prevent scroll when selecting rows (#2558) (#2999)

mui · Oct 28, 2021 · 5eed68e · 5eed68e
1 parent 925ad72
commit 5eed68e
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 3 deletions.
diff --git a/packages/grid/_modules_/grid/components/cell/GridCell.tsx b/packages/grid/_modules_/grid/components/cell/GridCell.tsx
@@ -32,6 +32,20 @@ export interface GridCellProps {
   tabIndex: 0 | -1;
 }
 
+// Based on https://stackoverflow.com/a/59518678
+let cachedSupportsPreventScroll: boolean;
+function doesSupportPreventScroll(): boolean {
+  if (cachedSupportsPreventScroll === undefined) {
+    document.createElement('div').focus({
+      get preventScroll() {
+        cachedSupportsPreventScroll = true;
+        return false;
+      },
+    });
+  }
+  return cachedSupportsPreventScroll;
+}
+
 export const GridCell = React.memo(function GridCell(props: GridCellProps) {
   const {
     align,
@@ -146,10 +160,14 @@ export const GridCell = React.memo(function GridCell(props: GridCellProps) {
 
     if (cellRef.current && !cellRef.current.contains(doc.activeElement!)) {
       const focusableElement = cellRef.current!.querySelector('[tabindex="0"]') as HTMLElement;
-      if (focusableElement) {
-        focusableElement!.focus();
+      const elementToFocus = focusableElement || cellRef.current;
+
+      if (doesSupportPreventScroll()) {
+        elementToFocus.focus({ preventScroll: true });
       } else {
-        cellRef.current!.focus();
+        const scrollPosition = apiRef.current.getScrollPosition();
+        elementToFocus.focus();
+        apiRef.current.scroll(scrollPosition);
       }
     }
   });

diff --git a/test/e2e/fixtures/DataGrid/RowSelection.tsx b/test/e2e/fixtures/DataGrid/RowSelection.tsx
@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { DataGrid } from '@mui/x-data-grid';
+
+const baselineProps = {
+  rows: [
+    {
+      id: 0,
+      brand: 'Nike',
+      year: 1990,
+    },
+    {
+      id: 1,
+      brand: 'Adidas',
+      year: 1995,
+    },
+    {
+      id: 2,
+      brand: 'Puma',
+      year: 1993,
+    },
+    {
+      id: 3,
+      brand: 'Gucci',
+      year: 1996,
+    },
+  ],
+  columns: [
+    { field: 'brand', width: 120 },
+    { field: 'year', width: 120 },
+  ],
+};
+
+export default function RowSelection() {
+  return (
+    <div style={{ width: 400, height: 200 }}>
+      <DataGrid
+        {...baselineProps}
+        headerHeight={50}
+        rowHeight={50}
+        hideFooter
+        disableVirtualization
+      />
+    </div>
+  );
+}
diff --git a/test/e2e/index.test.ts b/test/e2e/index.test.ts
@@ -194,5 +194,21 @@ describe('e2e', () => {
         ),
       ).to.contain('Mui-selected');
     });
+
+    it('should not scroll when changing the selected row', async () => {
+      await renderFixture('DataGrid/RowSelection');
+      await page.click('[role="cell"][data-rowindex="0"]');
+      await page.evaluate(() =>
+        document.querySelector('[role="cell"][data-rowindex="3"]')!.scrollIntoView(),
+      );
+      const scrollTop = await page.evaluate(
+        () => document.querySelector('.MuiDataGrid-window')!.scrollTop!,
+      );
+      expect(scrollTop).not.to.equal(0);
+      await page.click('[role="cell"][data-rowindex="3"]');
+      expect(
+        await page.evaluate(() => document.querySelector('.MuiDataGrid-window')!.scrollTop!),
+      ).to.equal(scrollTop);
+    });
   });
 });