Merge pull request #10794 from marmelab/fix-consecutive-notifications

Fix only the last notification is displayed when triggering consecutive notifications

Author: Madeorsk

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('<Notification />', () => {
         });
         expect(consoleLog).toHaveBeenCalledWith('Custom action');
     });
+    it('should display consecutive notifications', async () => {
+        const { container } = render(<ConsecutiveNotifications />);
+        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');
+    });
 });

packages/ra-ui-materialui/src/layout/Notification.stories.tsx

@@ -27,11 +27,15 @@ const Wrapper = ({ children }) => (
     </NotificationContextProvider>
 );
 
-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 = () => (
         <CustomNotificationElementWithAction />
     </Wrapper>
 );
+
+export const ConsecutiveNotifications = () => (
+    <Wrapper>
+        <BasicNotification />
+        <BasicNotification message="goodbye, world" />
+    </Wrapper>
+);

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