Merge pull request #11069 from marmelab/fix-data-grid-select-all

Fix `<Datagrid>` does not show the correct number of selected items

Author: slax57

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

@@ -1,5 +1,11 @@
 import * as React from 'react';
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import {
+    render,
+    screen,
+    fireEvent,
+    waitFor,
+    within,
+} from '@testing-library/react';
 import {
     CoreAdminContext,
     testDataProvider,
@@ -10,7 +16,12 @@ import {
 import { ThemeProvider, createTheme } from '@mui/material';
 
 import { Datagrid } from './Datagrid';
-import { AccessControl, FullApp, SelectAllButton } from './Datagrid.stories';
+import {
+    AccessControl,
+    FullApp,
+    SelectAllButton,
+    Standalone,
+} from './Datagrid.stories';
 
 const TitleField = () => {
     const record = useRecordContext();
@@ -347,4 +358,24 @@ describe('<Datagrid />', () => {
             );
         });
     });
+    it('should correctly select items after initial item selection followed by whole page selection', async () => {
+        render(<Standalone />);
+        await waitFor(() =>
+            expect(screen.getAllByText('The Lord of the Rings').length).toEqual(
+                2
+            )
+        );
+        fireEvent.click(
+            await within(
+                (
+                    await screen.findAllByText('The Lord of the Rings')
+                )[1].closest('tr')
+            ).findByLabelText('Select this row')
+        );
+        await screen.findByText('1 item selected');
+        expect(screen.queryByText('Select all')).toBeNull();
+        fireEvent.click(await screen.findByLabelText('Select all'));
+        await screen.findByText('7 items selected');
+        expect(screen.queryByText('Select all')).toBeNull();
+    });
 });

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

@@ -439,7 +439,10 @@ const MyCustomListInteractive = () => {
 
 export const Standalone = () => (
     <ThemeProvider theme={theme}>
-        <CoreAdminContext dataProvider={dataProvider}>
+        <CoreAdminContext
+            dataProvider={dataProvider}
+            i18nProvider={polyglotI18nProvider(() => defaultMessages, 'en')}
+        >
             <h1>Static</h1>
             <MyCustomList />
             <h1>Dynamic (with useList)</h1>

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

@@ -58,11 +58,11 @@ export const DatagridHeader = (props: DatagridHeaderProps) => {
                 event.target.checked
                     ? selectedIds.concat(
                           data
-                              .filter(record =>
-                                  !selectedIds.includes(record.id) &&
-                                  isRowSelectable
-                                      ? isRowSelectable(record)
-                                      : true
+                              .filter(
+                                  record =>
+                                      !selectedIds.includes(record.id) &&
+                                      (!isRowSelectable ||
+                                          isRowSelectable(record))
                               )
                               .map(record => record.id)
                       )