search

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.12k stars 1.28k forks source link

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

Open scamden opened 4 months ago

scamden commented 4 months ago

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 commented 4 months ago

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: https://github.com/mui/mui-x/blob/e046027bac3a7f1de16e256897dc634325b45ec9/packages/x-data-grid/src/hooks/features/scroll/useGridScroll.ts#L120

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