[data grid] Row spanning refers to invalid index in computeRowSpanningState when table rows change

[vanyadymousky]

Steps to reproduce

Link to live example: (required)

Steps:

1. Set DataGrid with unstable_rowSpanning prop = true
2. Render table with initial set of data, observe table is OK
3. Change set of data (refetch different data set with less results, i.e. 5 instead of 10)

Current behavior

Uncaught TypeError: Cannot read properties of undefined (reading 'id')
at eval (useGridRowSpanning.js:52:27)

rangeToProcess in computeRowSpanningState is bigger than required, and greater indexes are used to take visibleRows by index

Expected behavior

Re-spanning with new lesser data set

Context

No response

Your environment

npx @mui/envinfo

System:
OS: macOS 14.7
Binaries:
Node: 20.16.0 - ~/.nvm/versions/node/v20.16.0/bin/node
npm: 10.8.1 - ~/.nvm/versions/node/v20.16.0/bin/npm
pnpm: Not Found
Browsers:
Chrome: 129.0.6668.90
Edge: Not Found
Safari: 18.0
npmPackages:
@emotion/react: ^11.4.1 => 11.11.4
@emotion/styled: ^11.3.0 => 11.11.5
@mui/base: 5.0.0-beta.40
@mui/core-downloads-tracker: 5.16.7
@mui/icons-material: ^5.0.1 => 5.15.20
@mui/lab: ^5.0.0-alpha.49 => 5.0.0-alpha.170
@mui/material: ^5.0.2 => 5.16.7
@mui/private-theming: 5.16.6
@mui/styled-engine: 5.16.6
@mui/system: 5.16.7
@mui/types: 7.2.17
@mui/utils: 5.16.6
@mui/x-data-grid: 7.18.0
@mui/x-data-grid-pro: ^7.6.2 => 7.18.0
@mui/x-date-pickers: ^7.6.2 => 7.7.0
@mui/x-internals: 7.18.0
@mui/x-license: 7.18.0
@types/react: ^18.0.25 => 18.3.3
react: ^18.2.0 => 18.3.1
react-dom: ^18.2.0 => 18.3.1
typescript: 5.2.2 => 5.2.2

Search keywords: rowSpanning index
Order ID: 60827

[MBilalShafi]

Hey @vanyadymousky

I tried to reproduce the issue but was not able to do that. See this stack blitz example: https://stackblitz.com/edit/react-kxed37?file=Demo.tsx

To help diagnose the issue efficiently, could you provide a stripped-down reproduction test case using the latest version? A live example would be fantastic! ✨

You could either fork the example I attached or follow our documentation offers templates and guides on creating targeted examples: Support - Bug reproduction

Thank you

[vanyadymousky]

@MBilalShafi Hello, thanks for looking into this!

I finally got this reproducible by adding prop by prop from my original repo, looks like the issue is connected with loading prop:
Please check this out: https://stackblitz.com/edit/react-kxed37-usmpfk?file=Demo.tsx,package.json

[MBilalShafi]

Thank you for the example @vanyadymousky, I was able to strip down the reproduction by just adding an empty controlled filterModel on the documentation example: https://codesandbox.io/p/sandbox/quirky-shirley-s3mzzz

I've raised a PR for the fix, it should be fixed soon.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@vanyadymousky How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.