[EuiDataGrid] improve height calculation

src/components/datagrid/__mocks__/row_height_utils.ts

@@ -27,6 +27,8 @@ export const mockRowHeightUtils = ({
   getLineCount: jest.fn(actual.getLineCount),
   calculateHeightForLineCount: jest.fn(() => 50),
   isRowHeightOverride: jest.fn(actual.isRowHeightOverride),
+  onUpdatedRowHeight: jest.fn(),
+  offUpdatedRowHeight: jest.fn(),
 } as unknown) as ActualRowHeightUtils;
 
 export const RowHeightUtils = jest.fn(() => mockRowHeightUtils);

src/components/datagrid/body/__snapshots__/data_grid_cell.test.tsx.snap

@@ -32,6 +32,8 @@ exports[`EuiDataGridCell renders 1`] = `
       "getStylesForCell": [MockFunction],
       "isAutoHeight": [MockFunction],
       "isRowHeightOverride": [MockFunction],
+      "offUpdatedRowHeight": [MockFunction],
+      "onUpdatedRowHeight": [MockFunction],
       "pruneHiddenColumnHeights": [MockFunction],
       "setGrid": [MockFunction],
       "setRowHeight": [MockFunction],
@@ -96,6 +98,8 @@ exports[`EuiDataGridCell renders 1`] = `
               "getStylesForCell": [MockFunction],
               "isAutoHeight": [MockFunction],
               "isRowHeightOverride": [MockFunction],
+              "offUpdatedRowHeight": [MockFunction],
+              "onUpdatedRowHeight": [MockFunction],
               "pruneHiddenColumnHeights": [MockFunction],
               "setGrid": [MockFunction],
               "setRowHeight": [MockFunction],

src/components/datagrid/body/data_grid_body.tsx

@@ -498,6 +498,15 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
     ]
   );
 
+  const [, setRenderPass] = useState(0);
+  useEffect(() => {
+    const callback = () => {
+      setRenderPass((x) => x + 1);
+    };
+    rowHeightUtils.onUpdatedRowHeight(callback);
+    return () => rowHeightUtils.offUpdatedRowHeight(callback);
+  }, [rowHeightUtils]);
+
   const setGridRef = useCallback(
     (ref: Grid | null) => {
       gridRef.current = ref;
@@ -573,11 +582,33 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
     }
   }, [getRowHeight]);
 
+  let knownHeight = 0;
+  let knownRowCount = 0;
+  for (let i = startRow; i < endRow; i++) {
+    const correctRowIndex = getCorrectRowIndex(i);
+    const rowHeightOption = rowHeightUtils.getRowHeightOption(
+      correctRowIndex,
+      rowHeightsOptions
+    );
+    if (rowHeightOption) {
+      knownRowCount++;
+      knownHeight += rowHeightUtils.getCalculatedHeight(
+        rowHeightOption,
+        defaultHeight,
+        correctRowIndex,
+        rowHeightUtils.isRowHeightOverride(correctRowIndex, rowHeightsOptions)
+      );
+    }
+  }
+
   const rowCountToAffordFor = pagination
     ? pagination.pageSize
     : visibleRowIndices.length;
   const unconstrainedHeight =
-    defaultHeight * rowCountToAffordFor + headerRowHeight + footerRowHeight;
+    defaultHeight * (rowCountToAffordFor - knownRowCount) +
+    knownHeight +
+    headerRowHeight +
+    footerRowHeight;
 
   // unable to determine this until the container's size is known anyway
   const unconstrainedWidth = 0;

src/components/datagrid/data_grid.spec.tsx

@@ -51,6 +51,35 @@ describe('EuiDataGrid', () => {
         .should('have.lengthOf', 0);
     });
   });
+
+  describe('height calculation', async () => {
+    it('computes a new unconstrained height when switching to auto height', () => {
+      const renderCellValue: EuiDataGridProps['renderCellValue'] = ({
+        rowIndex,
+        columnId,
+      }) => (
+        <>
+          row {rowIndex}
+          <br />
+          column {columnId}
+        </>
+      );
+
+      mount(<EuiDataGrid {...baseProps} renderCellValue={renderCellValue} />);
+
+      getGridData();
+      cy.get('[data-test-subj=euiDataGridBody]')
+        .invoke('outerHeight')
+        .then((firstHeight) => {
+          cy.get('[data-test-subj=dataGridDisplaySelectorPopover]').click();
+          cy.get('[data-text="Auto fit"]').click();
+
+          cy.get('[data-test-subj=euiDataGridBody]')
+            .invoke('outerHeight')
+            .should('be.greaterThan', firstHeight);
+        });
+    });
+  });
 });
 
 function getGridData() {

src/components/datagrid/row_height_utils.ts

@@ -28,6 +28,8 @@ export const AUTO_HEIGHT = 'auto';
 export const DEFAULT_ROW_HEIGHT = 34;
 
 export class RowHeightUtils {
+  onUpdateCallbacks: Array<() => void> = [];
+
   getRowHeightOption(
     rowIndex: number,
     rowHeightsOptions?: EuiDataGridRowHeightsOptions
@@ -173,6 +175,15 @@ export class RowHeightUtils {
     return Math.max(...rowHeightValues);
   }
 
+  onUpdatedRowHeight(callback: () => void) {
+    this.onUpdateCallbacks.push(callback);
+  }
+
+  offUpdatedRowHeight(callback: () => void) {
+    const idx = this.onUpdateCallbacks.indexOf(callback);
+    if (idx !== -1) this.onUpdateCallbacks.splice(idx, 1);
+  }
+
   setRowHeight(
     rowIndex: number,
     colId: string,
@@ -192,6 +203,8 @@ export class RowHeightUtils {
     rowHeights.set(colId, adaptedHeight);
     this.heightsCache.set(rowIndex, rowHeights);
     this.resetRow(visibleRowIndex);
+
+    this.onUpdateCallbacks.forEach((callback) => callback());
   }
 
   pruneHiddenColumnHeights(visibleColumns: EuiDataGridColumn[]) {