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]);