[DataGrid] Horizontal scrollbar position is not updated after scrollToIndexes

[David548219]

Steps to reproduce

Link to live example: https://codesandbox.io/p/sandbox/eager-satoshi-zvqygs

Setup:

1. DataGrid with with horizontal scrollbar & apiRef
2. Button, onClick call apiRef.current.scrollToIndexes({ colIndex: 1 })

Steps:

1. Refresh the page
2. Scroll DataGrid to the rightmost position (or just sufficiently to the right) via mouse click and drag on the scrollbar
3. Press the scroll button
4. If horizontal scrollbar behaves as expected repeat steps 2-3 again, sometimes initial scroll behaves correctly

Using gestures to scroll right does not reproduce this issue, only mouse click & drag on the scrollbar does

Current behavior

Horizontal scrollbar position is not updated, leaving it in outdated state. Moving the scrollbar after this result is snapping back to initial scroll position

Expected behavior

Horizontal scrollbar position is adjusted after programmatic scroll

Context

Application requires programmatic scrolling to specific columns (in a wide table). This is achievable with current API, but horizontal scroll behavior is bad UX.

Your environment

npx @mui/envinfo

System:
    OS: Linux 5.15 Ubuntu 22.04.5 LTS 22.04.5 LTS (Jammy Jellyfish)
  Binaries:
    Node: 20.14.0 - ~/.nvm/versions/node/v20.14.0/bin/node
    npm: 10.7.0 - ~/.nvm/versions/node/v20.14.0/bin/npm
    pnpm: 9.9.0 - ~/.local/share/pnpm/pnpm
  Browsers:
    Chrome: Not Found
  npmPackages:
    @emotion/react: ^11.13.3 => 11.13.3 
    @emotion/styled: ^11.13.0 => 11.13.0 
    @mui/icons-material: ^6.1.2 => 6.1.2 
    @mui/material: ^6.1.2 => 6.1.2 
    @mui/x-data-grid: ^7.18.0 => 7.18.0 
    @mui/x-date-pickers: ^7.18.0 => 7.18.0 
    @types/react: ^18.3.11 => 18.3.11 
    react: ^18.3.1 => 18.3.1 
    react-dom: ^18.3.1 => 18.3.1 
    typescript: ^5.6.2 => 5.6.2

User agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:130.0) Gecko/20100101 Firefox/130.0

Search keywords: scrollbar position scrollToIndexes datagrid