diff --git a/packages/ra-ui-materialui/src/layout/Notification.spec.tsx b/packages/ra-ui-materialui/src/layout/Notification.spec.tsx
index b6eee91f0b9..e92d3686e26 100644
--- a/packages/ra-ui-materialui/src/layout/Notification.spec.tsx
+++ b/packages/ra-ui-materialui/src/layout/Notification.spec.tsx
@@ -1,7 +1,8 @@
import * as React from 'react';
-import { render, screen, waitFor } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
import {
+ ConsecutiveNotifications,
ConsecutiveUndoable,
CustomNotificationWithAction,
} from './Notification.stories';
@@ -43,4 +44,13 @@ describe('', () => {
});
expect(consoleLog).toHaveBeenCalledWith('Custom action');
});
+ it('should display consecutive notifications', async () => {
+ const { container } = render();
+ await screen.findByText('hello, world');
+ // This line ensures the test fails without the fix
+ await new Promise(resolve => setTimeout(resolve, 200));
+ expect(screen.queryByText('goodbye, world')).toBeNull();
+ fireEvent.click(container);
+ await screen.findByText('goodbye, world');
+ });
});
diff --git a/packages/ra-ui-materialui/src/layout/Notification.stories.tsx b/packages/ra-ui-materialui/src/layout/Notification.stories.tsx
index c18da45a551..c0e47c57afe 100644
--- a/packages/ra-ui-materialui/src/layout/Notification.stories.tsx
+++ b/packages/ra-ui-materialui/src/layout/Notification.stories.tsx
@@ -27,11 +27,15 @@ const Wrapper = ({ children }) => (
);
-const BasicNotification = () => {
+const BasicNotification = ({
+ message = 'hello, world',
+}: {
+ message?: string;
+}) => {
const notify = useNotify();
React.useEffect(() => {
- notify('hello, world');
- }, [notify]);
+ notify(message);
+ }, [message, notify]);
return null;
};
@@ -243,3 +247,10 @@ export const CustomNotificationWithAction = () => (
);
+
+export const ConsecutiveNotifications = () => (
+
+
+
+
+);
diff --git a/packages/ra-ui-materialui/src/layout/Notification.tsx b/packages/ra-ui-materialui/src/layout/Notification.tsx
index ed0078a5306..53e6f7c0e74 100644
--- a/packages/ra-ui-materialui/src/layout/Notification.tsx
+++ b/packages/ra-ui-materialui/src/layout/Notification.tsx
@@ -69,23 +69,22 @@ export const Notification = (inProps: NotificationProps) => {
setCurrentNotification(notification);
setOpen(true);
}
- } else if (notifications.length && currentNotification && open) {
- // Close an active snack when a new one is added
- setOpen(false);
}
- const beforeunload = (e: BeforeUnloadEvent) => {
- e.preventDefault();
- const confirmationMessage = '';
- e.returnValue = confirmationMessage;
- return confirmationMessage;
- };
-
- if (currentNotification?.notificationOptions?.undoable) {
- window.addEventListener('beforeunload', beforeunload);
- return () => {
- window.removeEventListener('beforeunload', beforeunload);
+ if (currentNotification) {
+ const beforeunload = (e: BeforeUnloadEvent) => {
+ e.preventDefault();
+ const confirmationMessage = '';
+ e.returnValue = confirmationMessage;
+ return confirmationMessage;
};
+
+ if (currentNotification?.notificationOptions?.undoable) {
+ window.addEventListener('beforeunload', beforeunload);
+ return () => {
+ window.removeEventListener('beforeunload', beforeunload);
+ };
+ }
}
}, [notifications, currentNotification, open, takeNotification]);