[EuiDataGrid] Fix row height changes from the rowHeightsOptions prop not correctly triggering grid rerenders

src-docs/src/views/datagrid/basics/datagrid.js

@@ -12,6 +12,7 @@ import { Link } from 'react-router-dom';
 import { fake } from 'faker';
 
 import {
+  EuiFieldNumber,
   EuiButton,
   EuiButtonEmpty,
   EuiButtonIcon,
@@ -375,6 +376,10 @@ const trailingControlColumns = [
 ];
 
 export default () => {
+  // row heights testing
+  const [rowHeight, setRowHeight] = useState(36);
+  const [lineCount, setLineCount] = useState(0);
+
   // Pagination
   const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 10 });
   const onChangeItemsPerPage = useCallback(
@@ -412,6 +417,20 @@ export default () => {
 
   return (
     <DataContext.Provider value={raw_data}>
+      <EuiFieldNumber
+        aria-label="line count"
+        prepend="Line count"
+        value={lineCount}
+        min={0}
+        onChange={(e) => setLineCount(Number(e.currentTarget.value))}
+      />
+      <EuiFieldNumber
+        aria-label="static height"
+        prepend="Static height"
+        value={rowHeight}
+        min={34}
+        onChange={(e) => setRowHeight(Number(e.currentTarget.value))}
+      />
       <EuiDataGrid
         aria-label="Data grid demo"
         columns={columns}
@@ -429,6 +448,12 @@ export default () => {
         }}
         onColumnResize={onColumnResize.current}
         ref={gridRef}
+        rowHeightsOptions={
+          lineCount
+            ? { defaultHeight: { lineCount } }
+            : { defaultHeight: rowHeight }
+        }
+        height={600}
       />
     </DataContext.Provider>
   );

src/components/datagrid/body/data_grid_body.tsx

@@ -391,6 +391,7 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
     gridRef: gridRef.current,
     gridStyles,
     columns,
+    rowHeightsOptions,
   });
 
   const { defaultRowHeight, setRowHeight, getRowHeight } = useDefaultRowHeight({

src/components/datagrid/data_grid.test.tsx

@@ -452,6 +452,11 @@ function moveColumnToIndex(
 }
 
 describe('EuiDataGrid', () => {
+  // Mock requestAnimationFrame to run immediately
+  jest
+    .spyOn(window, 'requestAnimationFrame')
+    .mockImplementation((cb: any) => cb());
+
   describe('rendering', () => {
     const getBoundingClientRect =
       window.Element.prototype.getBoundingClientRect;

src/components/datagrid/utils/grid_height_width.ts

@@ -99,12 +99,6 @@ export const useUnconstrainedHeight = ({
 }) => {
   const { getCorrectRowIndex } = useContext(DataGridSortingContext);
 
-  // when a row height is updated, force a re-render of the grid body to update the unconstrained height
-  const forceRender = useForceRender();
-  useEffect(() => {
-    rowHeightUtils.setRerenderGridBody(forceRender);
-  }, [rowHeightUtils, forceRender]);
-
   let knownHeight = 0; // tracks the pixel height of rows we know the size of
   let knownRowCount = 0; // how many rows we know the size of
   for (let i = startRow; i < endRow; i++) {
@@ -137,6 +131,7 @@ export const useUnconstrainedHeight = ({
     innerGridRef.current,
     'width'
   );
+  const forceRender = useForceRender();
   useUpdateEffect(forceRender, [innerWidth]);
 
   const unconstrainedHeight =

src/components/datagrid/utils/row_heights.ts

@@ -16,6 +16,7 @@ import {
 } from 'react';
 import type { VariableSizeGrid as Grid } from 'react-window';
 import { isObject, isNumber } from '../../../services/predicate';
+import { useForceRender } from '../../../services';
 import {
   EuiDataGridStyleCellPaddings,
   EuiDataGridStyle,
@@ -201,6 +202,9 @@ export class RowHeightUtils {
     rowHeights.set(colId, adaptedHeight);
     this.heightsCache.set(rowIndex, rowHeights);
     this.resetRow(visibleRowIndex);
+
+    // When an auto row height is updated, force a re-render
+    // of the grid body to update the unconstrained height
     this.rerenderGridBody();
   }
 
@@ -246,24 +250,41 @@ export class RowHeightUtils {
 }
 
 /**
- * Hook for instantiating RowHeightUtils, and also updating
- * internal vars from outside props via useEffects
+ * Hook for instantiating RowHeightUtils, setting internal class vars,
+ * and setting up various row-height-related side effects
  */
 export const useRowHeightUtils = ({
   gridRef,
   gridStyles,
   columns,
+  rowHeightsOptions,
 }: {
   gridRef: Grid | null;
   gridStyles: EuiDataGridStyle;
   columns: EuiDataGridColumn[];
+  rowHeightsOptions?: EuiDataGridRowHeightsOptions;
 }) => {
   const rowHeightUtils = useMemo(() => new RowHeightUtils(), []);
 
-  // Update rowHeightUtils with grid ref
+  // Update rowHeightUtils with internal vars from outside dependencies
+  const forceRender = useForceRender();
   useEffect(() => {
     if (gridRef) rowHeightUtils.setGrid(gridRef);
-  }, [gridRef, rowHeightUtils]);
+    rowHeightUtils.setRerenderGridBody(forceRender);
+  }, [gridRef, forceRender, rowHeightUtils]);
+
+  // Forces a rerender whenever the row heights change, as this can cause the
+  // grid to change height/have scrollbars. Without this, grid rerendering is stale
+  useEffect(() => {
+    requestAnimationFrame(forceRender);
+  }, [
+    // Effects that should cause rerendering
+    rowHeightsOptions?.defaultHeight,
+    rowHeightsOptions?.rowHeights,
+    // Dependencies
+    rowHeightUtils,
+    forceRender,
+  ]);
 
   // Re-cache styles whenever grid density changes
   useEffect(() => {

upcoming_changelogs/5712.md

@@ -0,0 +1,3 @@
+**Bug fixes**
+
+- Fixed EuiDataGrid not rerendering correctly on row heights change