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.51k stars 1.31k forks source link

[data grid] Row auto height scroll glitch #14726

Open boldurean opened 1 month ago

boldurean commented 1 month ago

The problem in depth

Hi. We've noticed a problem with DataGrid scroll when using dynamic row height. We thought it's our grid setup but we noticed same behaviour on the docs page as well as in your sandbox example please see the videos below:

https://github.com/user-attachments/assets/34937cb1-d0ec-4ae0-bee9-a933dcb42eb8

https://github.com/user-attachments/assets/08a513a4-7858-43c0-94b6-224da66f825d

It looks like it's happening not only when cell is selected, it happens in the sandbox when scrolling until end of the grid. We have a dynamic row height with specific actions in each grid. It looks like this bugs affecting the users and they're unable to complete their actions as grid scroll randomly changes position. This happens in all browsers provided in the envinfo.

Your environment

`npx @mui/envinfo` ``` System: OS: macOS 14.7 Binaries: Node: 20.12.0 - ~/.nvm/versions/node/v20.12.0/bin/node npm: 10.5.0 - ~/.nvm/versions/node/v20.12.0/bin/npm pnpm: 9.10.0 - ~/Library/pnpm/pnpm Browsers: Chrome: Version 129.0.6668.59 (Official Build) (arm64) Edge: 129.0.2792.52 Safari: 18.0 npmPackages: @emotion/react: ^11.13.3 => 11.13.3 @emotion/styled: ^11.13.0 => 11.13.0 @mui/icons-material: ^6.1.1 => 6.1.1 @mui/lab: 6.0.0-beta.10 => 6.0.0-beta.10 @mui/material: ^6.1.1 => 6.1.1 @mui/x-data-grid-premium: 7.18.0 => 7.18.0 @mui/x-date-pickers: ^7.18.0 => 7.18.0 @mui/x-tree-view: ^7.18.0 => 7.18.0 react: ^18.3.1 => 18.3.1 react-dom: ^18.3.1 => 18.3.1 ```

Search keywords: rowAutoHeight, rowHeight, getRowHeight, row height scroll glitch Order ID: 85137

boldurean commented 1 month ago

Just fyi changed version to ^6.x.x in the codesandbox example and seems this doesn't happen.

MBilalShafi commented 1 month ago

Thank you @boldurean for reporting, I can reproduce the bug, it seems that the virtual scroller is miscomputing the render zone through the end when a cell is focused. And yes it isn't there in v6 which makes it a regression.

boldurean commented 1 month ago

@MBilalShafi thanks for response. It looks like it happens as well when cell is not selected. Some cells could render images and be auto-sized based on the img height, not selecting the row in this case will cause same issue.