search

mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
4.08k stars 1.26k forks source link

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

Closed bjornarvh closed 3 months ago

bjornarvh commented 4 months ago

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 commented 4 months ago

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

aried3r commented 3 months ago

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 commented 3 months ago

I noticed this issue while working on https://github.com/mui/mui-x/pull/13453 It's a v7 regression indeed, I can reproduce it using @mui/x-data-grid-pro@7.0.0: https://stackblitz.com/edit/react-vsshne-cx1p9g

github-actions[bot] commented 3 months ago

:warning: 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.