[EuiDataGrid] Fix row height not updating dynamically when set to auto

CHANGELOG.md

@@ -6,6 +6,7 @@
 
 - Fixed default text alignment in `EuiTableRowCell` on Safari ([#5283](https://github.com/elastic/eui/pull/5283))
 - Fixed `mobileOptions.truncateText` from getting overridden by `truncateText` in `EuiTableRowCell` ([#5283](https://github.com/elastic/eui/pull/5283))
+- Fixed `EuiDataGrid` to dynamically update row heights when set to `auto` ([#5281](https://github.com/elastic/eui/pull/5281))
 
 **Theme: Amsterdam**
 

src-docs/src/views/datagrid/row_height_auto.tsx

@@ -5,6 +5,7 @@ import React, {
   useContext,
   useMemo,
   ReactNode,
+  useEffect,
 } from 'react';
 // @ts-ignore not configured to import json
 import githubData from './row_auto_height_data.json';
@@ -50,7 +51,7 @@ type DataContextShape =
     };
 const DataContext = createContext<DataContextShape>(undefined);
 
-const columns = [
+const gridColumns = [
   {
     id: 'index',
     displayAsText: 'Index',
@@ -160,6 +161,11 @@ export default () => {
     [setSortingColumns]
   );
 
+  const [columns, setColumns] = useState(gridColumns);
+  useEffect(() => {
+    setColumns([...gridColumns]);
+  }, [sortingColumns]);
+
   const onChangeItemsPerPage = useCallback(
     (pageSize) =>
       setPagination((pagination) => ({

src-docs/src/views/datagrid/row_line_height.tsx

@@ -138,9 +138,7 @@ export default () => {
   // matches the snippet example
   const rowHeightsOptions = useMemo(
     () => ({
-      defaultHeight: {
-        lineCount: 3,
-      },
+      defaultHeight: 'auto' as any,
       lineHeight: '2em',
     }),
     []

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

@@ -148,16 +148,6 @@ describe('EuiDataGridCell', () => {
           component.setState({ disableCellTabIndex: true });
         });
       });
-
-      it('when cell height changes', () => {
-        Object.defineProperty(HTMLElement.prototype, 'offsetHeight', {
-          configurable: true,
-          value: 10,
-        });
-        const getRowHeight = jest.fn(() => 20);
-
-        component.setProps({ getRowHeight });
-      });
     });
 
     it('should not update for prop/state changes not specified above', () => {
@@ -167,19 +157,40 @@ describe('EuiDataGridCell', () => {
   });
 
   describe('componentDidUpdate', () => {
-    it('recalculates row height on every update', () => {
-      const { isAutoHeight, setRowHeight } = mockRowHeightUtils;
-      (isAutoHeight as jest.Mock).mockImplementation(() => true);
+    describe('setAutoRowHeight', () => {
+      beforeEach(() => {
+        (mockRowHeightUtils.setRowHeight as jest.Mock).mockClear();
+      });
+      afterEach(() => {
+        (mockRowHeightUtils.isAutoHeight as jest.Mock).mockRestore();
+      });
+
+      const triggerUpdate = (component: ReactWrapper) =>
+        component.setProps({ rowIndex: 2 });
 
-      const component = mountEuiDataGridCellWithContext({
-        rowHeightsOptions: { defaultHeight: 'auto' },
-        getRowHeight: jest.fn(() => 50),
+      it('sets the auto row height cache with cell heights on update', () => {
+        (mockRowHeightUtils.isAutoHeight as jest.Mock).mockReturnValue(true);
+
+        const component = mountEuiDataGridCellWithContext({
+          rowHeightsOptions: { defaultHeight: 'auto' },
+          getRowHeight: jest.fn(() => 50),
+        });
+
+        triggerUpdate(component);
+        expect(mockRowHeightUtils.setRowHeight).toHaveBeenCalled();
       });
 
-      component.setProps({ rowIndex: 2 }); // Trigger any update
-      expect(setRowHeight).toHaveBeenCalled();
+      it('does not update the cache if cell height is not auto', () => {
+        (mockRowHeightUtils.isAutoHeight as jest.Mock).mockReturnValue(false);
 
-      (isAutoHeight as jest.Mock).mockRestore();
+        const component = mountEuiDataGridCellWithContext({
+          rowHeightsOptions: { defaultHeight: 34 },
+          getRowHeight: jest.fn(() => 50),
+        });
+
+        triggerUpdate(component);
+        expect(mockRowHeightUtils.setRowHeight).not.toHaveBeenCalled();
+      });
     });
 
     it('resets cell props when the cell columnId changes', () => {

src/components/datagrid/body/data_grid_cell.tsx

@@ -194,32 +194,24 @@ export class EuiDataGridCell extends Component<
     }
   };
 
-  recalculateRowHeight() {
-    const cellRef = this.cellRef.current;
-    const { getRowHeight, rowHeightUtils, rowHeightsOptions } = this.props;
-
-    if (cellRef && getRowHeight && rowHeightUtils && rowHeightsOptions) {
-      const { rowIndex, colIndex, visibleRowIndex } = this.props;
+  setAutoRowHeight = () => {
+    const { rowHeightUtils, rowHeightsOptions, rowIndex } = this.props;
+    if (
+      this.cellContentsRef &&
+      rowHeightUtils &&
+      rowHeightUtils.isAutoHeight(rowIndex, rowHeightsOptions)
+    ) {
+      const { colIndex, visibleRowIndex } = this.props;
+      const rowHeight = this.cellContentsRef.offsetHeight;
 
-      const isAutoHeight = rowHeightUtils.isAutoHeight(
+      rowHeightUtils.setRowHeight(
         rowIndex,
-        rowHeightsOptions
-      );
-      const isHeightSame = rowHeightUtils.compareHeights(
-        cellRef.offsetHeight,
-        getRowHeight(rowIndex)
+        colIndex,
+        rowHeight,
+        visibleRowIndex
       );
-
-      if (isAutoHeight && !isHeightSame) {
-        rowHeightUtils.setRowHeight(
-          rowIndex,
-          colIndex,
-          this.cellContentsRef?.offsetHeight,
-          visibleRowIndex
-        );
-      }
     }
-  }
+  };
 
   componentDidMount() {
     this.unsubscribeCell = this.context.onFocusUpdate(
@@ -244,7 +236,7 @@ export class EuiDataGridCell extends Component<
   }
 
   componentDidUpdate(prevProps: EuiDataGridCellProps) {
-    this.recalculateRowHeight();
+    this.setAutoRowHeight();
 
     if (this.props.columnId !== prevProps.columnId) {
       this.setCellProps({});
@@ -286,22 +278,6 @@ export class EuiDataGridCell extends Component<
     if (nextState.disableCellTabIndex !== this.state.disableCellTabIndex)
       return true;
 
-    // check if we should update cell because height was changed
-    if (
-      this.cellRef.current &&
-      nextProps.getRowHeight &&
-      nextProps.rowHeightUtils
-    ) {
-      if (
-        !nextProps.rowHeightUtils?.compareHeights(
-          this.cellRef.current.offsetHeight,
-          nextProps.getRowHeight(nextProps.rowIndex)
-        )
-      ) {
-        return true;
-      }
-    }
-
     return false;
   }
 
@@ -311,27 +287,10 @@ export class EuiDataGridCell extends Component<
 
   setCellContentsRef = (ref: HTMLDivElement | null) => {
     this.cellContentsRef = ref;
-    const { rowHeightUtils, rowHeightsOptions, rowIndex } = this.props;
-    if (
-      hasResizeObserver &&
-      rowHeightUtils &&
-      rowHeightsOptions &&
-      rowHeightUtils.isAutoHeight(rowIndex, rowHeightsOptions)
-    ) {
-      if (ref) {
-        const { colIndex, visibleRowIndex } = this.props;
-
-        const setRowHeight = (rowHeight: number) =>
-          rowHeightUtils.setRowHeight(
-            rowIndex,
-            colIndex,
-            rowHeight,
-            visibleRowIndex
-          );
-        this.contentObserver = this.observeHeight(ref, setRowHeight);
-      } else if (this.contentObserver) {
-        this.contentObserver.disconnect();
-      }
+    if (ref && hasResizeObserver) {
+      this.contentObserver = this.observeHeight(ref, this.setAutoRowHeight);
+    } else if (this.contentObserver) {
+      this.contentObserver.disconnect();
     }
     this.preventTabbing();
   };

src/components/datagrid/row_height_utils.ts

@@ -109,13 +109,13 @@ export class RowHeightUtils {
 
   isAutoHeight(
     rowIndex: number,
-    rowHeightsOptions: EuiDataGridRowHeightsOptions
+    rowHeightsOptions?: EuiDataGridRowHeightsOptions
   ) {
-    if (rowHeightsOptions.rowHeights?.[rowIndex] === AUTO_HEIGHT) {
+    if (rowHeightsOptions?.rowHeights?.[rowIndex] === AUTO_HEIGHT) {
       return true;
     }
 
-    if (rowHeightsOptions.defaultHeight === AUTO_HEIGHT) {
+    if (rowHeightsOptions?.defaultHeight === AUTO_HEIGHT) {
       return true;
     }