[data grid] Incomplete rendering issue releated to getRowHeight={() => "auto"}

[meezin]

Steps to reproduce

Steps:

The issue is random and difficult to reproduce consistently, but it follows these general steps:

1. Load the data grid.
2. Observe that initially, not all data appears immediately.
3. After a short period, the missing data may eventually display.
4. Perform a refresh: sometimes, the data grid renders correctly after refresh, and other times the issue persists.

Screen.Recording.2024-12-24.at.10.33.02.PM.mp4

Current behavior

The server successfully fetches all data, but the data grid does not display all the data immediately.

• Missing data areas may eventually fill in after a delay.
• Refreshing the data grid sometimes resolves the issue, but it can also reappear after subsequent refreshes.

Additional Investigation:

• Initially, we suspected that getRowHeight={() => "auto"} was causing the issue, so we set a fixed height value for rows.
• With fixed height rows, the issue did not occur, suggesting a potential link.
• We discovered that using getEstimatedRowHeight={() => 85} could optimize row rendering and applied this prop.
• This initially appeared to solve the issue but eventually failed as the problem resurfaced.
• This indicates that the rendering issue persists and cannot be resolved simply by using estimated row heights, pointing to a deeper root cause.

Expected behavior

The data grid should render all fetched data immediately and consistently, without missing areas or requiring multiple refresh attempts.

Context

The data grid intermittently fails to fully render data, leaving blank areas in the grid. This issue occurs randomly and behaves inconsistently across different refresh attempts.

                <DataGrid
                  rows={srList.filter((sr) => sr.company.id === company.id)}
                  columns={columns}
                  getRowHeight={() => "auto"} //calculate the height of each row based on its content.
                  getEstimatedRowHeight={() => 85} // To prevent delays in rendering each row, set the default estimated row height (85px) to be used before the row is rendered. This value corresponds to the minimum height needed when the title spans 3 lines and is replaced with the actual height once the row is rendered.
                  autoHeight //adjusts the height of the entire grid based on the number of rows
                  onRowClick={handleRowClick}
                  disableRowSelectionOnClick={true} //temporary disabled selected row count. Delete this line once you use the row count
                />

Your environment

npx @mui/envinfo

  System:
    OS: macOS 12.5
  Binaries:
    Node: 18.20.2 - ~/.nvm/versions/node/v18.20.2/bin/node
    npm: 10.9.2 - /opt/homebrew/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 131.0.6778.265
    Edge: Not Found
    Safari: 15.6
  npmPackages:
    @emotion/react: ^11.11.4 => 11.11.4 
    @emotion/styled: ^11.11.5 => 11.11.5 
    @mui/base:  5.0.0-beta.40 
    @mui/core-downloads-tracker:  5.15.16 
    @mui/icons-material: ^5.15.17 => 5.15.17 
    @mui/material: ^5.15.16 => 5.15.16 
    @mui/private-theming:  5.15.14 
    @mui/styled-engine:  5.15.14 
    @mui/system:  5.15.15 
    @mui/types:  7.2.21 
    @mui/utils:  5.15.14 
    @mui/x-data-grid: ^7.3.2 => 7.24.0 
    @mui/x-internals:  7.24.0 
    @types/react: ^18.0.10 => 18.2.6 
    react: ^18.1.0 => 18.2.0 
    react-dom: ^18.1.0 => 18.2.0 
    typescript: ^4.9.1 => 4.9.5 

Search keywords: data grid

[michelengelen]

Possibly related to #16197 ... Did we change anything on that logic recently @arminmeh ?

[arminmeh]

From the environment info, I see that the grid version is 7.3.2
@meezin did you try updating to the most recent version of the grid to check if the issue is still there?

[meezin]

@arminmeh @michelengelen Hello. I have updated the version and still have a glitch on the system.