[data grid] Unable to unselect treeData rows after using "Select all" checkbox with controlled row selection #19046
Description
Steps to reproduce
Steps:
- Open this link to live example: https://stackblitz.com/edit/axg8fqmk?file=src%2FDemo.tsx
- Select all rows by clicking the top checkbox (next to "Name" column)
- Try to unselect any single row, it doesn't work
Note that select all + unselect all works and selecting single row and then unselecting it also works.
Here's also reproducible code in short:
import * as React from 'react';
import { DataGridPro, GridRowSelectionModel } from '@mui/x-data-grid-pro';
import { useDemoData } from '@mui/x-data-grid-generator';
export default function TreeDataFullExample() {
const { data, loading } = useDemoData({
dataSet: 'Employee',
rowLength: 1000,
treeData: { maxDepth: 2, groupingField: 'name', averageChildren: 200 },
});
const [rowSelectionModel, setRowSelectionModel] =
React.useState<GridRowSelectionModel>({ type: 'include', ids: new Set() });
return (
<div style={{ height: 400, width: '100%' }}>
<DataGridPro
loading={loading}
{...data}
checkboxSelection
rowSelectionModel={rowSelectionModel}
onRowSelectionModelChange={(newRowSelectionModel) => {
setRowSelectionModel(newRowSelectionModel);
}}
/>
</div>
);
}Current behavior
When you use both treeData and controlled row selection (rowSelectionModel / onRowSelectionModelChange), selecting all rows and then unselecting single rows does not work.
Expected behavior
When you use both treeData and controlled row selection (rowSelectionModel / onRowSelectionModelChange), selecting all rows and then unselecting single row(s) should unselect them.
Context
No response
Your environment
npx @mui/envinfo
System:
OS: macOS 15.5
Binaries:
Node: 20.18.1 - ~/.nvm/versions/node/v20.18.1/bin/node
npm: 11.4.2 - ~/.nvm/versions/node/v20.18.1/bin/npm
pnpm: 10.10.0 - ~/.nvm/versions/node/v20.18.1/bin/pnpm
Browsers:
Chrome: 138.0.7204.184
Edge: 138.0.3351.121
Safari: 18.5
npmPackages:
@emotion/react: 11.14.0
@emotion/styled: 11.14.0
@mui/core-downloads-tracker: 7.2.0
@mui/icons-material: ^7.2.0 => 7.2.0
@mui/material: ^7.2.0 => 7.2.0
@mui/private-theming: 7.2.0
@mui/styled-engine: 7.2.0
@mui/system: ^7.2.0 => 7.2.0
@mui/types: 7.4.4
@mui/utils: 7.2.0
@mui/x-charts: 8.8.0
@mui/x-charts-pro: ^8.8.0 => 8.8.0
@mui/x-charts-vendor: 8.5.3
@mui/x-data-grid: 8.9.2
@mui/x-data-grid-premium: ^8.9.2 => 8.9.2
@mui/x-data-grid-pro: 8.9.2
@mui/x-date-pickers: 8.8.0
@mui/x-date-pickers-pro: ^8.8.0 => 8.8.0
@mui/x-internal-gestures: 0.2.1
@mui/x-internals: 8.8.0
@mui/x-license: ^8.8.0 => 8.8.0
@mui/x-telemetry: 8.5.3
@mui/x-tree-view: ^8.8.0 => 8.8.0
@mui/x-virtualizer: 0.1.0
@types/react: ^18.3.22 => 18.3.23
react: ^18.2.0 => 18.3.1
react-dom: ^18.2.0 => 18.3.1
styled-components: ^5.3.9 => 5.3.11
typescript: ^5.7.3 => 5.7.3
Search keywords: datagrid treeData uncheck rowSelectionModel