Fix <BulkDeleteButton> doesn't clear selection when used inside <ReferenceManyField>

packages/ra-ui-materialui/src/button/BulkDeleteWithConfirmButton.tsx

@@ -12,7 +12,6 @@ import {
     useRefresh,
     useResourceContext,
     useTranslate,
-    useUnselectAll,
     useSafeSetState,
     RaRecord,
     DeleteManyParams,
@@ -37,11 +36,10 @@ export const BulkDeleteWithConfirmButton = (
         ...rest
     } = props;
     const { meta: mutationMeta, ...otherMutationOptions } = mutationOptions;
-    const { selectedIds } = useListContext(props);
+    const { selectedIds, onUnselectItems } = useListContext(props);
     const [isOpen, setOpen] = useSafeSetState(false);
     const notify = useNotify();
     const resource = useResourceContext(props);
-    const unselectAll = useUnselectAll(resource);
     const refresh = useRefresh();
     const translate = useTranslate();
     const [deleteMany, { isLoading }] = useDeleteMany(
@@ -55,7 +53,7 @@ export const BulkDeleteWithConfirmButton = (
                     messageArgs: { smart_count: selectedIds.length },
                     undoable: mutationMode === 'undoable',
                 });
-                unselectAll();
+                onUnselectItems();
                 setOpen(false);
             },
             onError: (error: Error) => {

packages/ra-ui-materialui/src/button/BulkDeleteWithUndoButton.tsx

@@ -8,7 +8,6 @@ import {
     useDeleteMany,
     useRefresh,
     useNotify,
-    useUnselectAll,
     useResourceContext,
     useListContext,
     RaRecord,
@@ -30,11 +29,10 @@ export const BulkDeleteWithUndoButton = (
         ...rest
     } = props;
     const { meta: mutationMeta, ...otherMutationOptions } = mutationOptions;
-    const { selectedIds } = useListContext(props);
+    const { selectedIds, onUnselectItems } = useListContext(props);
 
     const notify = useNotify();
     const resource = useResourceContext(props);
-    const unselectAll = useUnselectAll(resource);
     const refresh = useRefresh();
     const [deleteMany, { isLoading }] = useDeleteMany();
 
@@ -49,7 +47,7 @@ export const BulkDeleteWithUndoButton = (
                         messageArgs: { smart_count: selectedIds.length },
                         undoable: true,
                     });
-                    unselectAll();
+                    onUnselectItems();
                 },
                 onError: (error: Error) => {
                     notify(

packages/ra-ui-materialui/src/field/ReferenceManyField.spec.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import expect from 'expect';
-import { render, screen, waitFor } from '@testing-library/react';
+import { render, screen, waitFor, fireEvent } from '@testing-library/react';
 import { createMemoryHistory } from 'history';
 import { testDataProvider, useListContext } from 'ra-core';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
@@ -10,6 +10,7 @@ import { ReferenceManyField } from './ReferenceManyField';
 import { TextField } from './TextField';
 import { SingleFieldList } from '../list/SingleFieldList';
 import { Pagination } from '../list/pagination/Pagination';
+import { Basic } from './ReferenceManyField.stories';
 
 const theme = createTheme();
 
@@ -181,6 +182,22 @@ describe('<ReferenceManyField />', () => {
         expect(links[1].getAttribute('href')).toEqual('/comments/2');
     });
 
+    it('should clear selection on bulk delete', async () => {
+        render(<Basic />);
+        await screen.findByText('War and Peace');
+        const checkbox = (
+            await screen.findAllByLabelText('ra.action.select_row')
+        )[1];
+        fireEvent.click(checkbox);
+        await screen.findByText('ra.action.bulk_actions');
+        screen.getByText('ra.action.delete').click();
+        await waitFor(() => {
+            expect(
+                screen.queryAllByRole('ra.action.bulk_actions')
+            ).toHaveLength(0);
+        });
+    });
+
     describe('pagination', () => {
         it('should render pagination based on total from getManyReference', async () => {
             const data = [

packages/ra-ui-materialui/src/field/ReferenceManyField.stories.tsx

@@ -0,0 +1,72 @@
+import * as React from 'react';
+
+import {
+    CoreAdminContext,
+    RecordContextProvider,
+    ResourceContextProvider,
+} from 'ra-core';
+import { createMemoryHistory } from 'history';
+import { ThemeProvider, Box } from '@mui/material';
+import { createTheme } from '@mui/material/styles';
+
+import { TextField } from '../field';
+import { ReferenceManyField } from './ReferenceManyField';
+import { Datagrid } from '../list/datagrid/Datagrid';
+import { Notification } from '../layout/Notification';
+
+export default { title: 'ra-ui-materialui/fields/ReferenceManyField' };
+
+const history = createMemoryHistory({ initialEntries: ['/books/1/show'] });
+
+const author = { id: 1, name: 'Leo Tolstoi' };
+let books = [
+    { id: 1, title: 'War and Peace', author_id: 1 },
+    { id: 2, title: 'Les Misérables', author_id: 2 },
+    { id: 3, title: 'Anna Karenina', author_id: 1 },
+    { id: 4, title: 'The Count of Monte Cristo', author_id: 3 },
+    { id: 5, title: 'Resurrection', author_id: 1 },
+];
+
+const defaultDataProvider = {
+    getManyReference: (resource, params) => {
+        const result = books.filter(book => book.author_id === params.id);
+        return Promise.resolve({
+            data: result,
+            total: result.length,
+        });
+    },
+    deleteMany: (resource, params) => {
+        const ids = params.ids;
+        books = books.filter(book => !ids.includes(book.id));
+        return Promise.resolve({ data: ids });
+    },
+} as any;
+
+const Wrapper = ({
+    children,
+    dataProvider = defaultDataProvider,
+    record = author,
+}: any) => (
+    <ThemeProvider theme={createTheme()}>
+        <CoreAdminContext dataProvider={dataProvider} history={history}>
+            <ResourceContextProvider value="authors">
+                <RecordContextProvider value={record}>
+                    <Box mx={2} mt={7}>
+                        {children}
+                    </Box>
+                </RecordContextProvider>
+            </ResourceContextProvider>
+            <Notification />
+        </CoreAdminContext>
+    </ThemeProvider>
+);
+
+export const Basic = () => (
+    <Wrapper>
+        <ReferenceManyField reference="books" target="author_id">
+            <Datagrid>
+                <TextField source="title" />
+            </Datagrid>
+        </ReferenceManyField>
+    </Wrapper>
+);