Fix checkbox selection is keeping selection when filtering (#11751)

Co-authored-by: Andrew Cherniavskyi <andrew@mui.com>
mui · Mar 18, 2024 · a764d21 · a764d21
1 parent 5342203
commit a764d21
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 3 deletions.
diff --git a/packages/x-data-grid/src/hooks/features/rowSelection/useGridRowSelection.ts b/packages/x-data-grid/src/hooks/features/rowSelection/useGridRowSelection.ts
@@ -18,7 +18,10 @@ import {
 } from './gridRowSelectionSelector';
 import { gridPaginatedVisibleSortedGridRowIdsSelector } from '../pagination';
 import { gridFocusCellSelector } from '../focus/gridFocusStateSelector';
-import { gridExpandedSortedRowIdsSelector } from '../filter/gridFilterSelector';
+import {
+  gridExpandedSortedRowIdsSelector,
+  gridFilterModelSelector,
+} from '../filter/gridFilterSelector';
 import { GRID_CHECKBOX_SELECTION_COL_DEF, GRID_ACTIONS_COLUMN_TYPE } from '../../../colDef';
 import { GridCellModes } from '../../../models/gridEditRowModel';
 import { isKeyboardEvent, isNavigationKey } from '../../../utils/keyboardUtils';
@@ -445,7 +448,8 @@ export const useGridRowSelection = (
         ? gridPaginatedVisibleSortedGridRowIdsSelector(apiRef)
         : gridExpandedSortedRowIdsSelector(apiRef);
 
-      apiRef.current.selectRows(rowsToBeSelected, params.value);
+      const filterModel = gridFilterModelSelector(apiRef);
+      apiRef.current.selectRows(rowsToBeSelected, params.value, filterModel?.items.length > 0);
     },
     [apiRef, props.checkboxSelectionVisibleOnly, props.pagination],
   );

diff --git a/packages/x-data-grid/src/tests/rowSelection.DataGrid.test.tsx b/packages/x-data-grid/src/tests/rowSelection.DataGrid.test.tsx
@@ -1,7 +1,14 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { createRenderer, fireEvent, screen, act, userEvent } from '@mui-internal/test-utils';
+import {
+  createRenderer,
+  fireEvent,
+  screen,
+  act,
+  userEvent,
+  waitFor,
+} from '@mui-internal/test-utils';
 import {
   DataGrid,
   DataGridProps,
@@ -10,6 +17,7 @@ import {
   GridEditModes,
   useGridApiRef,
   GridApi,
+  GridPreferencePanelsValue,
 } from '@mui/x-data-grid';
 import {
   getCell,
@@ -18,6 +26,7 @@ import {
   getColumnHeaderCell,
   getColumnHeadersTextContent,
   getActiveCell,
+  grid,
 } from 'test/utils/helperFn';
 import { getBasicGridData } from '@mui/x-data-grid-generator';
 
@@ -354,6 +363,47 @@ describe('<DataGrid /> - Row selection', () => {
       expect(input1.checked).to.equal(false);
       expect(input2.checked).to.equal(true);
     });
+
+    it('should only select filtered items when "select all" is toggled after applying a filter', async () => {
+      render(
+        <TestDataGridSelection
+          checkboxSelection
+          initialState={{
+            preferencePanel: {
+              open: true,
+              openedPanelValue: GridPreferencePanelsValue.filters,
+            },
+          }}
+        />,
+      );
+      const selectAllCheckbox = screen.getByRole('checkbox', { name: 'Select all rows' });
+      fireEvent.click(selectAllCheckbox);
+      await waitFor(() => {
+        expect(getSelectedRowIds()).to.deep.equal([0, 1, 2, 3]);
+        expect(grid('selectedRowCount')?.textContent).to.equal('4 rows selected');
+      });
+
+      fireEvent.change(screen.getByRole('spinbutton', { name: 'Value' }), {
+        target: { value: 1 },
+      });
+      await waitFor(() => {
+        // Previous selection remains, but only one row is visible
+        expect(getSelectedRowIds()).to.deep.equal([1]);
+        expect(grid('selectedRowCount')?.textContent).to.equal('4 rows selected');
+      });
+
+      fireEvent.click(selectAllCheckbox); // Unselect all
+      await waitFor(() => {
+        expect(getSelectedRowIds()).to.deep.equal([]);
+        expect(grid('selectedRowCount')).to.equal(null);
+      });
+
+      fireEvent.click(selectAllCheckbox); // Select all filtered rows
+      await waitFor(() => {
+        expect(getSelectedRowIds()).to.deep.equal([1]);
+        expect(grid('selectedRowCount')?.textContent).to.equal('1 row selected');
+      });
+    });
   });
 
   describe('prop: checkboxSelection = true (multi selection), with keyboard events', () => {