[data grid] Grouped rows and expanded row mismatch after grouping changes

[Iuli1478]

Steps to reproduce

1. Enable row grouping and expandable detail panels in DataGridPremium.
2. Expand one of the rows to view its detail panel.
3. Change the grouping column to group rows by a different field.
4. Expand the newly grouped row that contains the previously expanded row.

Current behavior

The row's icon remains as a minus icon (-), indicating that the detail panel is expanded.
However, the content of the detail panel is not visible.

Example: https://stackblitz.com/edit/react-mlbz7tfd

Expected behavior

The row should remain expanded, and the content of the detail panel should be visible inside the grouped row.

Context

This issue breaks the user experience when using both grouping and expandable rows. It causes confusion for end-users as the UI shows an expanded state without displaying the corresponding content.

Your environment

npx @mui/envinfo

System: OS: [Windows 11] Browser: [ Google Chrome ]

Packages: react: 19.0.0 react-dom: 19.0.0 @mui/x-data-grid-premium: 7.25.0 @mui/x-data-grid-generator: 7.25.0 @emotion/react: 11.14.0 @emotion/styled: 11.14.0 @mui/material: 6.4.3 @mui/icons-material: 6.4.3 @types/react: 19.0.8 @types/react-dom: 19.0.3 typescript: 5.7.3

Search keywords: Grouped rows, expanded row icon, DataGridPremium, grouping and detail panel bug

Order ID: 96739

[michelengelen]

Well, this is mainly due to how the rendering works in the data grid.
When grouping gets changed we rerender the rows and since the detailPanels are attached to the rows programmatically (not inside the row DOM node) the panels loose their "anchor".

Not sure what the best approach would be here? I can see a few options, but tbh I would suggest one of those 2:

1. rerender all detail panels that are "open" when the grouping model changes
2. close all panels.

I would probably prefer option 2 since rerendering all panels might induce a lot of strain on the browser and network if we have a ton open.

WDYT @mui/xgrid ?