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.12k stars 1.28k forks source link

[data grid] Scrolling with scrollbar jumps back to a previous position when `getRowHeight={() => 'auto'}` is used #14802

Open annawatson-wk opened 3 days ago

annawatson-wk commented 3 days ago

Steps to reproduce

Link to live example: https://stackblitz.com/edit/react-sux3md?file=Demo.tsx

Steps:

  1. Scroll down on the Data Grid using the scrollbar
  2. Make note of which row id you're looking at when you're about to stop scrolling
  3. Note that the row id after you've stopped scrolling, they are different

Current behavior

The row you're viewing when you release the scrollbar aren't the rows you see when you release the scrollbar. We don't see this behavior for a smaller number of rows where virtualization of rows doesn't come into play.

Expected behavior

The row you're viewing when you release the scrollbar are the rows you see when you release the scrollbar.

Context

We had a customer report this jumping behavior when they scroll using the scrollbar. The seems like this might be related to virtualization on the grid rows then those rows adjusting their size due to rowHeight auto. This was seen in version 6 and version 7 of mui-x. We're really looking for a way that we can make this virtualization/rowHeight behavior seem less clunky.

Your environment

npx @mui/envinfo ``` System: OS: macOS 13.6.2 Binaries: Node: 20.8.1 - ~/.asdf/installs/nodejs/20.8.1/bin/node npm: 10.1.0 - ~/.asdf/plugins/nodejs/shims/npm Browsers: Chrome: 129.0.6668.71 ```

Search keywords: scrollbar data grid jumping pro premium rowHeight Order ID: 82849

michelengelen commented 3 days ago

Hey @annawatson-wk ... I can confirm this bug and it indeed seems like the virtualization is at fault here. The scrolling position is correct, however the scrollbar will jump back to a previous position once you stop scrolling. This can be easily reproduced by quickly scrolling and keeping the scrollbar clicked when stopping the scroll movement.

https://github.com/user-attachments/assets/acfbdc3d-0e5d-4c04-bd71-63d2ac3332c6

cc @romgrk

annawatson-wk commented 3 days ago

I just went back to change autoHeight to getRowHeight and didn't catch that you already did that. Thank you!