[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