[data grid] detailPanel persisting when row scrolls out of view

[ryanbruns]

Steps to reproduce

Link to live example: Stackblitz

Steps:

1. Load a large data set into the grid
2. Click to expand a row
3. Scroll down the grid until the detail content area goes out of the viewport.
4. The detail content area will flicker onto the grid intermittently

Screen.Recording.2024-05-21.at.13.41.29.mov

Current behavior

While I am scrolling down the grid after opening a detail panel I'm getting the last opened detail panel to show up at the top of the grid. If I scroll up the grid the issue settles down it seems to be mostly scrolling down.

Expected behavior

When an open detailPanel scrolls out of view it shouldn't persist to the top of the grid.

Context

We have large data sets that we put into the grid and records can have more detail on them so once expanded if the user scrolls they shouldn't be getting that detailPanel to flicker around the top of the grid area.

Your environment

npx @mui/envinfo

Was using Chromium based browser and also replicated it in Safari on the stackblitz

    @emotion/react: ^11.11.4 => 11.11.4 
    @emotion/styled: ^11.11.5 => 11.11.5 
    @mui/icons-material: ^5.15.15 => 5.15.15 
    @mui/material: ^5.15.15 => 5.15.15 
    @mui/system: ^5.15.15 => 5.15.15 
    @mui/x-charts: ^6.19.8 => 6.19.8 
    @mui/x-data-grid-pro: ^7.5.0 => 7.5.0 
    @mui/x-date-pickers: ^7.5.0 => 7.5.0 
    @mui/x-date-pickers-pro: ^7.5.0 => 7.5.0 
    @mui/x-license: ^7.0.0 => 7.2.0 

Search keywords: detailPanel

[michelengelen]

Duplicate of #13073

[github-actions]

⚠️ This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@ryanbruns: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.