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.53k stars 1.32k forks source link

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

Open N3cr0s1s opened 1 day ago

N3cr0s1s commented 1 day ago

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

image

then I call programatically this:

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

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

image

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 commented 1 day ago

Hey @N3cr0s1s It does work for me

https://github.com/user-attachments/assets/ce972192-82d8-49cd-9eae-81064531ba1b

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 commented 1 day ago

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

https://github.com/user-attachments/assets/d498bb79-ac97-4b12-af04-5b677544f80f

michelengelen commented 1 day ago

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! 👍🏼