[data grid] adding a new row with the autoHeight prop causes first row flicker

[Luis-Ramirez21x]

The problem in depth

I have a DataGrid component that lets you add a new row and auto-adds a new row after being saved.
The issue is a re-render on the first row is triggered when adding a row and it causes a flicker. Ths only occurs when the autoHeight prop is added.

See this demo. Simply add a row and notice the flicker on the first row.

Your environment

`npx @mui/envinfo`

  System:
    OS: Linux 6.1 Debian GNU/Linux 12 (bookworm) 12 (bookworm)
  Binaries:
    Node: 18.19.0 - /usr/bin/node
    npm: 9.2.0 - /usr/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 124.0.6367.60
  npmPackages:
    @emotion/react: ^11.10.6 => 11.10.6 
    @emotion/styled: ^11.10.6 => 11.10.6 
    @mui/base: ^5.0.0-beta.34 => 5.0.0-beta.40 
    @mui/core-downloads-tracker:  5.15.18 
    @mui/icons-material: ^5.11.11 => 5.11.11 
    @mui/joy: ^5.0.0-beta.11 => 5.0.0-beta.11 
    @mui/lab: ^5.0.0-alpha.126 => 5.0.0-alpha.126 
    @mui/material: ^5.11.12 => 5.15.18 
    @mui/private-theming:  5.15.14 
    @mui/styled-engine:  5.15.14 
    @mui/system:  5.15.15 
    @mui/types:  7.2.14 
    @mui/utils:  5.15.14 
    @mui/x-charts: ^6.0.0-alpha.15 => 6.0.0-alpha.15 
    @mui/x-data-grid:  6.6.0 
    @mui/x-data-grid-generator: ^6.6.0 => 6.6.0 
    @mui/x-data-grid-premium:  6.6.0 
    @mui/x-data-grid-pro: ^7.4.0 => 7.4.0 
    @mui/x-date-pickers:  6.16.2 
    @mui/x-date-pickers-pro: ^6.16.2 => 6.16.2 
    @mui/x-license:  7.2.0 
    @mui/x-license-pro: ^6.6.0 => 6.6.0 
    @types/react:  18.0.28 
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0 
    typescript:  4.9.5 

Search keywords: autoHeight, DataGrid, flicker
Order ID: 67382

[michelengelen]

Hey @Luis-Ramirez21x it works if you make the click handler asynchronous:

  const handleClick = async () => {
    const id = randomId();
    await apiRef.current.updateRows([{ id, isNew: true, name: "" }]);
    apiRef.current.startRowEditMode({ id, fieldToFocus: "name" });
  };

Does that solve your problem?

[Luis-Ramirez21x]

Hey @michelengelen ! Thanks for the quick reply.
This does solve the flicker when clicking the add button but not the auto-added row flicker.
See this demo. You can recreate it by adding a row, inputting a name, and saving it. A new row is added but still causes the first row to flicker.
Thanks in advance!

[michelengelen]

Hey @michelengelen ! Thanks for the quick reply. This does solve the flicker when clicking the add button but not the auto-added row flicker. See this demo. You can recreate it by adding a row, inputting a name, and saving it. A new row is added but still causes the first row to flicker. Thanks in advance!

just use await on the handleAddRow fixed it for me:

if (isNew) {
  apiRef.current.updateRows([{ ...res }]);

  await handleAddRow();
  return { ...oldRow, _action: "delete" };
}