[data grid] scrollToIndexes results in null reference if called in an effect on mount

[scamden]

Steps to reproduce

Premium customer here

Link to live example: https://codesandbox.io/p/sandbox/datagrid-null-ref-on-suspense-forked-z5vrd5?file=%2Fsrc%2FDemo.tsx%3A78%2C1

Steps:

1. Make a datagrid that scrolls and give it the api ref
2. in a useEffect with no deps scrollToIndexes to any row

Note that adding a 1ms timeout fixes the issue. This is happening for us in v6 but i tried on v7 and it still throws. The codesanbox is v7

Current behavior

NPE

Expected behavior

it scrolls there

Context

Trying to scroll to a matched result in the grid on mount

Your environment

System:
OS: macOS 14.4.1
Binaries:
Node: 18.19.1 - ~/.nodenv/versions/18.19.1/bin/node
npm: 10.7.0 - ~/.nodenv/versions/18.19.1/bin/npm
pnpm: 9.0.6 - ~/.nodenv/versions/18.19.1/bin/pnpm
Browsers:
Chrome: 124.0.6367.203
Edge: Not Found
Safari: 17.4.1
npmPackages:
@emotion/react: 11.9.3
@emotion/styled: 11.9.3
@mui/base: 5.0.0-alpha.87
@mui/core-downloads-tracker: 5.14.18
@mui/icons-material: 5.14.18
@mui/lab: 5.0.0-alpha.88
@mui/material: 5.14.18
@mui/private-theming: 5.14.18
@mui/styled-engine: 5.14.18
@mui/styles: 5.14.18
@mui/system: 5.14.18
@mui/types: 7.2.9
@mui/utils: 5.14.18
@mui/x-data-grid: 6.19.5
@mui/x-data-grid-premium: 6.19.5
@mui/x-data-grid-pro: 6.19.5
@mui/x-date-pickers: 5.0.8
@mui/x-date-pickers-pro: 5.0.20
@mui/x-license-pro: 5.13.1
@types/react: 18.0.18
react: 18.2.0
react-dom: 18.2.0
typescript: 5.3.2 => 5.3.2

Search keywords: datagrid scrollToIndexes null scroll
Order ID: 77647

[michelengelen]

Hey @scamden ... thanks for raising this issue.
I can confirm this as a bug.

What happens is basically that the virtualScroller ref is not set when the useEffect (or even useLayoutEffect) runs. The code on question can be found here:

mui-x/packages/x-data-grid/src/hooks/features/scroll/useGridScroll.ts

Line 120 in e046027

scrollTop: virtualScrollerRef.current!.scrollTop,

I will add it to the board for the team to have a look.