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.04k stars 1.24k forks source link

Infinite resize loop while scrolling when datagrid only has pinned columns #11131

Open camain-elie opened 9 months ago

camain-elie commented 9 months ago

Steps to reproduce

Link to live example: https://codesandbox.io/p/sandbox/cocky-https-8rghsm

https://github.com/mui/mui-x/assets/22938221/c8f2cc3e-7a0a-4f59-9098-8e2020af474c screen capture of the bug

Steps:

  1. Set a datagrid with only pinned columns on the left side and enough rows to be scrollable.
  2. Slowly scroll down.
  3. The datagrid then goes into a resize frenzy until you scroll up or down again.

This behaviour can be avoided by adding an empty columns instead of no column at all.

Current behavior

When a datagrid is displaying only columns pinned to the left and the user slowly scroll down, the container of the pinned columns enters in an infinite loop of resizing itself. The movement prevent the user to correctly read the displayed data.

Expected behavior

In the setup described above, when the user scroll down the datagrid should smoothly scroll down as usual.

Context

No response

Your environment

npx @mui/envinfo ``` System: OS: macOS 14.1 Binaries: Node: 18.18.0 - /usr/local/bin/node Yarn: 1.22.15 - ~/.yarn/bin/yarn npm: 7.24.0 - /usr/local/bin/npm Browsers: Chrome: 119.0.6045.159 Edge: Not Found Safari: 17.1 npmPackages: @emotion/react: ^11.9.3 => 11.11.1 @emotion/styled: ^11.9.3 => 11.11.0 @mui/base: 5.0.0-beta.20 @mui/core-downloads-tracker: 5.14.14 @mui/icons-material: ^5.14.14 => 5.14.14 @mui/lab: ^5.0.0-alpha.149 => 5.0.0-alpha.149 @mui/material: ^5.14.14 => 5.14.14 @mui/private-theming: 5.14.14 @mui/styled-engine: 5.14.14 @mui/system: 5.14.14 @mui/types: 7.2.6 @mui/utils: 5.14.14 @mui/x-data-grid: 6.18.1 @mui/x-data-grid-pro: ^6.18.1 => 6.18.1 @mui/x-license-pro: ^6.10.2 => 6.10.2 @mui/x-tree-view: 6.0.0-alpha.1 @types/react: ^18.2.28 => 18.2.28 react: ^18.2.0 => 18.2.0 react-dom: ^18.2.0 => 18.2.0 typescript: ^5.2.2 => 5.2.2 ```

Search keywords: datagrid resize loop pinned columns

cherniavskii commented 9 months ago

Interestingly, I can even reproduce it with Data Grid v5: https://codesandbox.io/p/sandbox/unruffled-smoke-tjpkfr Thanks for reporting it!

gitstart commented 9 months ago

Hi @cherniavskii We will like to work on this issue.

romgrk commented 9 months ago

I would wait until #10059 is done before picking this up.