[data grid] tree collapses when controlled row selection is used

[huy-nguyen]

Steps to reproduce

Link to live example: (required)

Steps:

1. Clone https://github.com/huy-nguyen/bug-demo-mui-data-grid-tree-collapse
2. yarn
3. yarn build
4. yarn preview
5. Expand a row with children then select the checkbox of a child row.

Current behavior

The parent row collapses. See recording.

Screen.Recording.2024-06-22.at.12.30.00.PM.mov

Expected behavior

Selecting child rows should not cause the parent row to collapse its children if the data stays the same.

Context

I'm trying to use controlled row selection to allow users to select (across many levels) which rows in a hierarchical data grid a data pipeline should be run on.

Your environment

npx @mui/envinfo

  System:
    OS: macOS 12.7.5
  Binaries:
    Node: 20.13.1 - ~/Library/Caches/fnm_multishells/21311_1719191541306/bin/node
    npm: 10.5.2 - ~/Library/Caches/fnm_multishells/21311_1719191541306/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 126.0.6478.114 (used)
    Edge: Not Found
    Safari: 15.6.1
  npmPackages:
    @emotion/react: ^11.11.4 => 11.11.4 
    @emotion/styled: ^11.11.5 => 11.11.5 
    @mui/base:  5.0.0-beta.40 
    @mui/core-downloads-tracker:  5.15.20 
    @mui/material: ^5.15.20 => 5.15.20 
    @mui/private-theming:  5.15.20 
    @mui/styled-engine:  5.15.14 
    @mui/system:  5.15.20 
    @mui/types:  7.2.14 
    @mui/utils:  5.15.20 
    @mui/x-data-grid:  7.7.1 
    @mui/x-data-grid-pro: ^7.7.1 => 7.7.1 
    @mui/x-license:  7.7.1 
    @types/react: ^18.3.3 => 18.3.3 
    react: ^18.3.1 => 18.3.1 
    react-dom: ^18.3.1 => 18.3.1 
    typescript: ^5.2.2 => 5.5.2 

Search keywords: data grid row selection tree
Order ID: 80804

[oliviertassinari]

A new set of rows is created at each selection state render https://github.com/huy-nguyen/bug-demo-mui-data-grid-tree-collapse/blob/e78075eabd0857ee97ac55ad6705cc6861a2f5e8/src/OuterApp.tsx#L8-L9

Per https://mui.com/x/react-data-grid/row-definition/#feeding-data

The rows prop should keep the same reference between two renders except when you want to apply new rows. Otherwise, the Data Grid will re-apply heavy work like sorting and filtering.

The behavior described makes seems more or less expected.

It actually makes me wonder if we should have a prop model to control the childrenExpanded state, but I guess using the grid state is simple enough.

[michelengelen]

@oliviertassinari this came up very often lately and we do have a similar issue already on the board: #13064

Makes me think if should build a more sustainable way of handling expansion state as well. RN we are not able to allow for a controlled expansion state ootb

[oliviertassinari]

@michelengelen Right, it sounds like this issue is a duplicate then.

[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.

@huy-nguyen: 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.