[data grid] Horizontal scrollbar don't change on apiref.current.scroll

[N3cr0s1s]

The problem in depth

If I scroll programatically to the first column, then the horizontal scrollbar stayes the same. If I grab the slider, the grid gets little confusing, and the view moves to the right side of the grid.

The first image shows, that i scrolled to the right side of the grid

then I call programatically this:

apiRef.current.scrollToIndexes({rowIndex: 0, colIndex: 0});

and the horizontal scroll stays at the right side of the view

Your environment

`npx @mui/envinfo`

  System:
    OS: Linux 6.5 Ubuntu 23.10 23.10 (Mantic Minotaur)
  Binaries:
    Node: 20.18.0 - /usr/bin/node
    npm: 10.8.2 - /usr/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: Not Found
    Edge: Version 129.0.2792.89 (Official build) (64-bit)
  npmPackages:
    @emotion/react: ^11.10.4 => 11.10.4 
    @emotion/styled: ^11.10.4 => 11.10.4 
    @mui/base:  5.0.0-alpha.75 
    @mui/core-downloads-tracker:  5.10.6 
    @mui/icons-material: ^5.10.6 => 5.10.6 
    @mui/lab: ^5.0.0-alpha.76 => 5.0.0-alpha.76 
    @mui/material: ^5.10.6 => 5.10.6 
    @mui/private-theming:  5.16.6 
    @mui/styled-engine:  5.16.6 
    @mui/system:  5.16.7 
    @mui/types:  7.2.15 
    @mui/utils:  5.16.6 
    @mui/x-data-grid:  7.16.0 
    @mui/x-data-grid-pro: ^7.16.0 => 7.16.0 
    @mui/x-date-pickers:  5.0.0-alpha.0 
    @mui/x-internals:  7.16.0 
    @mui/x-license:  7.16.0 
    @mui/x-license-pro: ^6.10.2 => 6.10.2 
    @types/react: ^18.0.28 => 18.0.28 
    react: ^17.0.2 => 17.0.2 
    react-dom: ^17.0.2 => 17.0.2 
    styled-components: ^5.0.1 => 5.3.3 
    typescript: ^4.9.5 => 4.9.5 

Search keywords: scrollbar, scroll, scrollTo, horizontal
Order ID: 98530

[michelengelen]

Hey @N3cr0s1s
It does work for me

Screen.Recording.2024-11-13.at.11.48.34.mov

I can see from your screenshots that you have quite a few stylistic adjustments made to the grid. This could potentially have an influence on that if scrollbars have been styled as well. Could you try and create a minimal reproduction that showcases that behavior?

In the meantime could someone from @mui/xgrid test this on a linux machine? @romgrk maybe?

[N3cr0s1s]

Hi, thank you for the prompt response.

I don’t have any scroll-related styling applied—only background colors.

I’m also able to reproduce this error on Windows(11) and Ubuntu(23).

You can reproduce the issue here as well (apologies for the random color strips).
https://codesandbox.io/p/sandbox/compassionate-margulis-327v45?file=%2Fsrc%2FDemo.js%3A27%2C48

Screencast.from.2024-11-13.12-10-22.mp4

[michelengelen]

All right ... thanks for the reproduction.
It is still not showing for me, but I am on MacOS, so it might be only showing on Linux and Windows. I did also test Firefox and Safari with no luck.

I'll add this to the board for the team to have a look! 👍🏼