diff --git a/packages/ra-ui-materialui/src/button/BulkDeleteWithConfirmButton.tsx b/packages/ra-ui-materialui/src/button/BulkDeleteWithConfirmButton.tsx
index d6517116343..635577c1a73 100644
--- a/packages/ra-ui-materialui/src/button/BulkDeleteWithConfirmButton.tsx
+++ b/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) => {
diff --git a/packages/ra-ui-materialui/src/button/BulkDeleteWithUndoButton.tsx b/packages/ra-ui-materialui/src/button/BulkDeleteWithUndoButton.tsx
index 9876404c80b..21783f2d329 100644
--- a/packages/ra-ui-materialui/src/button/BulkDeleteWithUndoButton.tsx
+++ b/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(
diff --git a/packages/ra-ui-materialui/src/field/ReferenceManyField.spec.tsx b/packages/ra-ui-materialui/src/field/ReferenceManyField.spec.tsx
index 8cfc32669e2..9fc0314298e 100644
--- a/packages/ra-ui-materialui/src/field/ReferenceManyField.spec.tsx
+++ b/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('', () => {
expect(links[1].getAttribute('href')).toEqual('/comments/2');
});
+ it('should clear selection on bulk delete', async () => {
+ render();
+ 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 = [
diff --git a/packages/ra-ui-materialui/src/field/ReferenceManyField.stories.tsx b/packages/ra-ui-materialui/src/field/ReferenceManyField.stories.tsx
new file mode 100644
index 00000000000..61254127f45
--- /dev/null
+++ b/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) => (
+
+
+
+
+
+ {children}
+
+
+
+
+
+
+);
+
+export const Basic = () => (
+
+
+
+
+
+
+
+);