[DataGrid] Fix scroll jump with dynamic row height (#16763)

Author: cherniavskii

packages/x-data-grid/src/hooks/features/rows/useGridRowsMeta.ts

@@ -22,7 +22,7 @@ import {
 } from '../dimensions/gridDimensionsSelectors';
 import { getValidRowHeight, getRowHeightWarning } from './gridRowsUtils';
 import type { HeightEntry } from './gridRowsMetaInterfaces';
-
+import { gridFocusedVirtualCellSelector } from '../virtualization/gridFocusedVirtualCellSelector';
 /* eslint-disable no-underscore-dangle */
 
 export const rowsMetaStateInitializer: GridStateInitializer = (state, props, apiRef) => {
@@ -262,6 +262,13 @@ export const useGridRowsMeta = (
               ? entry.borderBoxSize[0].blockSize
               : entry.contentRect.height;
           const rowId = (entry.target as any).__mui_id;
+          const focusedVirtualRowId = gridFocusedVirtualCellSelector(apiRef)?.id;
+          if (focusedVirtualRowId === rowId && height === 0) {
+            // Focused virtual row has 0 height.
+            // We don't want to store it to avoid scroll jumping.
+            // https://github.com/mui/mui-x/issues/14726
+            return;
+          }
           apiRef.current.unstable_storeRowHeightMeasurement(rowId, height);
         }
         if (!isHeightMetaValid.current) {

test/e2e/fixtures/DataGrid/DynamicRowHeight.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { DataGrid } from '@mui/x-data-grid';
+
+const rows = [
+  { id: 0 },
+  { id: 1 },
+  { id: 2 },
+  { id: 3 },
+  { id: 4 },
+  { id: 5 },
+  { id: 6 },
+  { id: 7 },
+  { id: 8 },
+  { id: 9 },
+  { id: 10 },
+  { id: 11 },
+  { id: 12 },
+  { id: 13 },
+  { id: 14 },
+  { id: 15 },
+  { id: 16 },
+  { id: 17 },
+  { id: 18 },
+  { id: 19 },
+  { id: 20 },
+];
+
+export default function DynamicRowHeight() {
+  return (
+    <div style={{ height: 300, width: 400 }}>
+      <DataGrid rows={rows} columns={[{ field: 'id' }]} getRowHeight={() => 'auto'} />
+    </div>
+  );
+}

test/e2e/index.test.ts

@@ -600,6 +600,39 @@ async function initializeEnvironment(
         });
         expect(scrollTop).not.to.equal(0);
       });
+
+      // https://github.com/mui/mui-x/issues/14726
+      it('should not cause scroll jumping when the focused cell is outside of the viewport', async () => {
+        await renderFixture('DataGrid/DynamicRowHeight');
+
+        await page.click('[role="row"][data-id="2"] [role="gridcell"][data-field="id"]');
+
+        const scrollPositions: number[] = [];
+        await page.exposeFunction('storeScrollPosition', async (scrollTop: number) => {
+          scrollPositions.push(scrollTop);
+        });
+        await page.evaluate(() => {
+          const virtualScroller = document.querySelector('.MuiDataGrid-virtualScroller')!;
+          virtualScroller.addEventListener('scroll', () => {
+            // @ts-ignore
+            window.storeScrollPosition(virtualScroller.scrollTop);
+          });
+        });
+
+        await page.mouse.wheel(0, 150);
+        await page.waitForTimeout(500);
+
+        const hadScrollJump = scrollPositions.some((scrollTop, index) => {
+          if (index === 0) {
+            return false;
+          }
+          // When scrolling down, the scrollTop should be always decreasing
+          const prevScrollTop = scrollPositions[index - 1];
+          return scrollTop < prevScrollTop;
+        });
+
+        expect(hadScrollJump).to.equal(false, `Scroll jumped, scrollPositions: ${scrollPositions}`);
+      });
     });
 
     describe('<DatePicker />', () => {