[data grid] Detail panel for focused row is "sticky" when scrolling

[bjornarvh]

Steps to reproduce

Link to live example: (required) https://codesandbox.io/p/sandbox/trusting-rosalind-ncffpr?file=%2Fsrc%2FDemo.tsx%3A267%2C11

Steps:

1. Show detail panel for a row
2. Keep focus in the opened row, and scroll down

Current behavior

When the detail panel exits the viewport, it jumps back to the top and covers the rows below it. Only happens if focus is in the master row.

Expected behavior

Detail panel should not be visible when scrolling past it.

Context

No response

Your environment

npx @mui/envinfo

System:
OS: Linux 5.15 Ubuntu 22.04.2 LTS 22.04.2 LTS (Jammy Jellyfish)
Binaries:
Node: 20.10.0 - ~/.nvm/versions/node/v20.10.0/bin/node
npm: 10.2.3 - ~/.nvm/versions/node/v20.10.0/bin/npm
pnpm: 8.15.5 - ~/.local/share/pnpm/pnpm
Browsers:
Chrome: 109.0.5414.74
npmPackages:
@emotion/react: ^11.11.4 => 11.11.4
@emotion/styled: ^11.11.5 => 11.11.5
@mui/icons-material: ^5.15.17 => 5.15.17
@mui/lab: ^5.0.0-alpha.121 => 5.0.0-alpha.156
@mui/material: ^5.15.17 => 5.15.17
@mui/x-data-grid-pro: ^7.3.2 => 7.3.2
@mui/x-license: ^7.2.0 => 7.2.0
@types/react: ^18.3.1 => 18.3.1
react: ^18.3.1 => 18.3.1
react-dom: ^18.3.1 => 18.3.1
typescript: ^5.4.5 => 5.4.5

Search keywords: detail panel scroll
Order ID: 90083

[michelengelen]

Hey @bjornarvh
thanks for raising this.
I can confirm that this is a regression.
The bug does not occur in v6.19.11

[aried3r]

Is there any known workaround?

Your environment

npx @mui/envinfo

``` System: OS: macOS 14.5 Binaries: Node: 18.18.2 - ~/Library/Caches/fnm_multishells/9337_1717403406901/bin/node npm: 9.8.1 - ~/Library/Caches/fnm_multishells/9337_1717403406901/bin/npm pnpm: 9.0.6 - ~/Library/Caches/fnm_multishells/9337_1717403406901/bin/pnpm Browsers: Chrome: 125.0.6422.142 Edge: Not Found Safari: 17.5 npmPackages: @emotion/react: ^11.11.1 => 11.11.1 @emotion/styled: ^11.11.0 => 11.11.0 @mui/base: ^5.0.0-alpha.127 => 5.0.0-beta.40 @mui/core-downloads-tracker: 5.15.15 @mui/material: ^5.15.15 => 5.15.15 @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-data-grid: 7.6.1 @mui/x-data-grid-premium: ^7.6.1 => 7.6.1 @mui/x-data-grid-pro: 7.6.1 @mui/x-license: 7.6.1 @types/react: 18.2.47 => 18.2.47 react: ^18.2.0 => 18.2.0 react-dom: ^18.2.0 => 18.2.0 typescript: ^5.0.4 => 5.0.4 ```

Order ID: 85016

[cherniavskii]

I noticed this issue while working on #13453
It's a v7 regression indeed, I can reproduce it using @mui/[email protected]: https://stackblitz.com/edit/react-vsshne-cx1p9g

[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.

@bjornarvh: 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.