[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.

[Primajin]

Great thanks - what's the anticipated release cycle for these fixes? Roughly - doesn't need to be super exact. Just for us to know when to plan for upgrading from alpha.36 to 4.0.1.

[m4theushw]

@Primajin This bug fix will be included in the next release (probably next week), which will be v5.0.0-beta.0. However, v4 is not dead. Some of the bug fixes added to v5 will be cherry-picked to the older version. This includes this fix. We plan to release 4.0.1 once there're enough fixes to do a big release, maybe at the end of this month.

[bartvde]

@m4theushw can you confirm if this made it into 4.0.1?

[m4theushw]

@m4theushw can you confirm if this made it into 4.0.1?

It was not included. You can use MUI X v5 with MUI Core v4 by changing the CSS prefixes used. Here's an example of how to do it: https://codesandbox.io/s/datagriddemo-material-demo-forked-8myv0?file=/src/demo.js