[DataGrid] Fix checkbox selection keeping selection when filtering (@…

…g1mishra) (#12485) Co-authored-by: Jeevan Kumar <g1mishra.dev@gmail.com> Co-authored-by: Andrew Cherniavskyi <andrew@mui.com>
mui · Mar 18, 2024 · 0958d54 · 0958d54
1 parent 2ab6b49
commit 0958d54
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 3 deletions.
diff --git a/packages/grid/x-data-grid/src/hooks/features/rowSelection/useGridRowSelection.ts b/packages/grid/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';
@@ -446,7 +449,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/grid/x-data-grid/src/tests/rowSelection.DataGrid.test.tsx b/packages/grid/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,8 @@ import {
   GridEditModes,
   useGridApiRef,
   GridApi,
+  GridPreferencePanelsValue,
+  gridClasses,
 } from '@mui/x-data-grid';
 import {
   getCell,
@@ -342,6 +351,53 @@ describe('<DataGrid /> - Row selection', () => {
       expect(screen.queryByRole('checkbox', { name: 'Select row' })).to.equal(null);
       expect(screen.queryByRole('checkbox', { name: 'Unselect row' })).not.to.equal(null);
     });
+
+    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(document.querySelector(`.${gridClasses.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(document.querySelector(`.${gridClasses.selectedRowCount}`)?.textContent).to.equal(
+          '4 rows selected',
+        );
+      });
+
+      fireEvent.click(selectAllCheckbox); // Unselect all
+      await waitFor(() => {
+        expect(getSelectedRowIds()).to.deep.equal([]);
+        expect(document.querySelector(`.${gridClasses.selectedRowCount}`)).to.equal(null);
+      });
+
+      fireEvent.click(selectAllCheckbox); // Select all filtered rows
+      await waitFor(() => {
+        expect(getSelectedRowIds()).to.deep.equal([1]);
+        expect(document.querySelector(`.${gridClasses.selectedRowCount}`)?.textContent).to.equal(
+          '1 row selected',
+        );
+      });
+    });
   });
 
   describe('prop: checkboxSelection = true (multi selection), with keyboard events', () => {