[question] Issue with jumping x-grid starting from alpha.37

[bartvde]

Order id 💳

25229

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

The grid jumps, starting with alpha.37 (alpha.36 is fine). When clicking a row and then scrolling until this row is not visible anymore, the grid jumps.

The problem in depth 🔍

Video of what happens in alpha.36:

Video of what happens in alpha.37 and later:

Context 🔦

No response

Your Environment 🌎

Chrome: Version 92.0.4515.159 (Official Build) (64-bit)

System:
OS: Linux 5.11 Ubuntu 21.04 (Hirsute Hippo)
Binaries:
Node: 16.3.0 - ~/.nvm/versions/node/v16.3.0/bin/node
Yarn: 1.22.10 - ~/.nvm/versions/node/v16.3.0/bin/yarn
npm: 7.20.5 - ~/.nvm/versions/node/v16.3.0/bin/npm
Browsers:
Chrome: 92.0.4515.159
Firefox: 91.0.2
npmPackages:
@material-ui/codemod: ^4.5.0 => 4.5.0
@material-ui/core: ^4.12.3 => 4.12.3
@material-ui/icons: ^4.11.2 => 4.11.2
@material-ui/lab: 4.0.0-alpha.60 => 4.0.0-alpha.60
@material-ui/pickers: ^3.3.10 => 3.3.10
@material-ui/styles: 4.11.4
@material-ui/system: 4.12.1
@material-ui/types: 5.1.0
@material-ui/utils: 4.11.2
@material-ui/x-grid: ^4.0.0-alpha.37 => 4.0.0-alpha.37
@material-ui/x-license: 4.0.0-alpha.37
@types/react: ^17.0.19 => 17.0.19
react: ^17.0.2 => 17.0.2
react-dom: ^17.0.2 => 17.0.2
typescript: ^4.3.5 => 4.3.5

[m4theushw]

Please provide a minimal reproduction test case with the latest version. This would help a lot 👷 .
A live example would be perfect. This codesandbox.io template may be a good starting point. Thank you!

[bartvde]

will do today

[bartvde]

@m4theushw you can reproduce it here: https://stackblitz.com/edit/eqrt4n?file=demo.js

Edit Olivier: Updated reproduction:

• v4.0.0 is reproducible: https://codesandbox.io/s/stoic-torvalds-mk8xd1?file=/package.json
• v5.7.0 is not reproducible: https://codesandbox.io/s/charming-wave-cfwhlc?file=/package.json.

[zzossig]

Jumping issue still exist.
This is just happened sometimes.
In my case, when I click checkbox or when cell contains image, jumping happened.
This bug is very difficult to reproduce so thank you @bartvde for taking time.
I don't want my users experience this bug.

[bartvde]

@m4theushw any update on this one? TIA

[Primajin]

This prevents us from upgrading beyond alpha.36 to 4.0.0 as our customers rely on the steady position of the rows

[m4theushw]

We have a race condition between the selection and the focus management introduced in #2239. When a cell is clicked, the internal state is updated to store which cell received focus. The problem is that the selection is also listing to the click event. That way, whenever a cell is selected, the grid rerenders, but still with the old focused cell in the state. When the old focused cell is rendered it calls .focus(), which makes the browser to try to scroll to it, so the jump.

As a workaround, you can disable the selection on click with:

<DataGridPro disableSelectionOnClick />

You can use the checkboxSelection to still be able to select rows.