Fix <Datagrid> and <DataTable> bulk selection

Author: djhi

packages/ra-ui-materialui/src/list/datagrid/Datagrid.spec.tsx

@@ -10,7 +10,7 @@ import {
 import { ThemeProvider, createTheme } from '@mui/material';
 
 import { Datagrid } from './Datagrid';
-import { AccessControl, SelectAllButton } from './Datagrid.stories';
+import { AccessControl, FullApp, SelectAllButton } from './Datagrid.stories';
 
 const TitleField = () => {
     const record = useRecordContext();
@@ -126,6 +126,36 @@ describe('<Datagrid />', () => {
         expect(screen.queryByText('Select All')).toBeNull();
     });
 
+    describe('row selection', () => {
+        it('should reveal bulk delete button by default on row selection', async () => {
+            render(<FullApp />);
+            const checkboxes = await screen.findAllByRole('checkbox');
+            fireEvent.click(checkboxes[1]);
+            await screen.findByLabelText('Delete');
+            await screen.findByText('1 item selected');
+            fireEvent.click(checkboxes[2]);
+            await screen.findByText('2 items selected');
+        });
+        it('should reveal select all button when selecting the entire page', async () => {
+            render(<FullApp perPage={5} />);
+            const checkboxes = await screen.findAllByRole('checkbox');
+            fireEvent.click(checkboxes[0]);
+            const selectAllButton = await screen.findByText('Select all');
+            selectAllButton.click();
+            await screen.findByText('7 items selected');
+        });
+        it('should only unselect the current page records', async () => {
+            render(<FullApp perPage={5} />);
+            const checkboxes = await screen.findAllByRole('checkbox');
+            fireEvent.click(checkboxes[0]);
+            const selectAllButton = await screen.findByText('Select all');
+            selectAllButton.click();
+            await screen.findByText('7 items selected');
+            fireEvent.click(checkboxes[0]);
+            await screen.findByText('2 items selected');
+        });
+    });
+
     describe('selecting items with the shift key', () => {
         it('should call onSelect with the correct ids when the last selection is after the first', () => {
             const Test = ({ selectedIds = [] }) => (

packages/ra-ui-materialui/src/list/datagrid/Datagrid.stories.tsx

@@ -10,6 +10,7 @@ import {
     TestMemoryRouter,
     SortPayload,
     AuthProvider,
+    memoryStore,
 } from 'ra-core';
 import fakeRestDataProvider from 'ra-data-fakerest';
 import defaultMessages from 'ra-language-english';
@@ -558,18 +559,21 @@ export const RowClickFalse = () => (
 
 export const FullApp = ({
     rowClick,
+    perPage = undefined,
 }: {
     rowClick?: DatagridRowProps['rowClick'];
+    perPage?: number;
 }) => (
     <AdminContext
         dataProvider={dataProvider}
         i18nProvider={polyglotI18nProvider(() => defaultMessages, 'en')}
+        store={memoryStore()}
     >
         <AdminUI>
             <Resource
                 name="books"
                 list={() => (
-                    <List>
+                    <List perPage={perPage}>
                         <Datagrid
                             expand={<ExpandDetails />}
                             rowClick={rowClick}

packages/ra-ui-materialui/src/list/datagrid/DatagridHeader.tsx

@@ -68,7 +68,10 @@ export const DatagridHeader = (props: DatagridHeaderProps) => {
                               )
                               .map(record => record.id)
                       )
-                    : []
+                    : // We should only unselect the ids present in the current page
+                      selectedIds.filter(
+                          id => !data.map(record => record.id).includes(id)
+                      )
             );
         },
         [data, onSelect, isRowSelectable, selectedIds]

packages/ra-ui-materialui/src/list/datatable/DataTable.spec.tsx

@@ -235,6 +235,16 @@ describe('DataTable', () => {
             selectAllButton.click();
             await screen.findByText('7 items selected');
         });
+        it('should only unselect the current page records', async () => {
+            render(<Basic />);
+            const checkboxes = await screen.findAllByRole('checkbox');
+            fireEvent.click(checkboxes[0]);
+            const selectAllButton = await screen.findByText('Select all');
+            selectAllButton.click();
+            await screen.findByText('7 items selected');
+            fireEvent.click(checkboxes[0]);
+            await screen.findByText('2 items selected');
+        });
     });
     describe('isRowSelectable', () => {
         it('should allow to disable row selection', async () => {

packages/ra-ui-materialui/src/list/datatable/SelectPageCheckbox.tsx

@@ -32,7 +32,10 @@ export const SelectPageCheckbox = () => {
                               )
                               .map(record => record.id)
                       )
-                    : []
+                    : // We should only unselect the ids present in the current page
+                      selectedIds.filter(
+                          id => !data.map(record => record.id).includes(id)
+                      )
             );
         },
         [data, onSelect, isRowSelectable, selectedIds]