[data grid] Scroll jumps if column header is focused and columns flicker when scrolling

[lauri865]

Steps to reproduce

Steps 1/2:

1. Open this link to live example: https://mui.com/x/react-data-grid/#pro-version
2. Focus e.g. Sub Total column header
3. Scroll left until sub total is out of the viewport, scroll slowly back, all columns flicker

Steps 2/2:

1. Open this link to live example: https://mui.com/x/react-data-grid/#premium-version
2. Focus the Sub Total column header
3. Scroll fully to the left
4. Witness the scroll jump back

Current behavior

No response

Expected behavior

No response

Context

No response

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: flicker scroll jump

[lauri865]

muix-video.mp4

[lauri865]

I'm guess the issue is with the virtualizer @romgrk. The focused element jumps in and out of the render context:

A single scroll (starting from when the focused column header cell is unmounted) can cause 3 updates to the focused column:
useGridLoggerFactory.js:22 MUI X: useGridFocus - Focusing on column header with colIndex=status
useGridLoggerFactory.js:22 MUI X: useGridFocus - Focusing on column header with colIndex=status
useGridLoggerFactory.js:22 MUI X: useGridFocus - Focusing on column header with colIndex=status

[lauri865]

Smoothly scrolling, render context jumps to col-index=0 when the column header gets focused:

I guess a good fix would be to handle it similarly how it's done on the row level – avoid unmounting the focused element altogether.

[lauri865]

Firefox is completely broken when column header is focused, can't scroll back at all.

[spagnon7]

+1, we have been experiencing the scroll jumping issue as well

[michelengelen]

@MBilalShafi could this also be the cause for #19085 ?

[MBilalShafi]

@MBilalShafi could this also be the cause for #19085 ?

Could be, it seems to be introduced with the virtualizer change in 8.9.2 as 8.9.1 doesn't have it: https://stackblitz.com/edit/qfmfuuxt-2bbrctkc