Fix primefaces#5083: Toast/Messages remove by message

melloware · Oct 12, 2023 · f276d62 · f276d62
1 parent a23bc1d
commit f276d62
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 9 deletions.
diff --git a/components/lib/messages/Messages.js b/components/lib/messages/Messages.js
@@ -3,7 +3,7 @@ import { TransitionGroup } from 'react-transition-group';
 import { PrimeReactContext } from '../api/Api';
 import { useHandleStyle } from '../componentbase/ComponentBase';
 import { CSSTransition } from '../csstransition/CSSTransition';
-import { mergeProps } from '../utils/Utils';
+import { ObjectUtils, mergeProps } from '../utils/Utils';
 import { MessagesBase } from './MessagesBase';
 import { UIMessage } from './UIMessage';
 
@@ -70,9 +70,12 @@ export const Messages = React.memo(
         };
 
         const remove = (messageInfo) => {
-            setMessagesState((prev) => prev.filter((msg) => msg._pId !== messageInfo._pId));
+            // allow removal by ID or by message equality
+            const removeMessage = messageInfo._pId ? messageInfo.message : messageInfo;
 
-            props.onRemove && props.onRemove(messageInfo.message);
+            setMessagesState((prev) => prev.filter((msg) => msg._pId !== messageInfo._pId && !ObjectUtils.deepEquals(msg.message, removeMessage)));
+
+            props.onRemove && props.onRemove(removeMessage);
         };
 
         const onClose = (messageInfo) => {

diff --git a/components/lib/toast/Toast.js b/components/lib/toast/Toast.js
@@ -1,14 +1,13 @@
 import * as React from 'react';
 import { TransitionGroup } from 'react-transition-group';
-import { PrimeReactContext } from '../api/Api';
+import PrimeReact, { PrimeReactContext } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
 import { CSSTransition } from '../csstransition/CSSTransition';
 import { useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
 import { Portal } from '../portal/Portal';
-import { ZIndexUtils, mergeProps } from '../utils/Utils';
+import { ObjectUtils, ZIndexUtils, mergeProps } from '../utils/Utils';
 import { ToastBase } from './ToastBase';
 import { ToastMessage } from './ToastMessage';
-import PrimeReact from '../api/Api';
-import { useHandleStyle } from '../componentbase/ComponentBase';
 
 let messageIdx = 0;
 
@@ -75,9 +74,12 @@ export const Toast = React.memo(
         };
 
         const remove = (messageInfo) => {
-            setMessagesState((m) => m.filter((msg) => msg._pId !== messageInfo._pId));
+            // allow removal by ID or by message equality
+            const removeMessage = messageInfo._pId ? messageInfo.message : messageInfo;
+
+            setMessagesState((prev) => prev.filter((msg) => msg._pId !== messageInfo._pId && !ObjectUtils.deepEquals(msg.message, removeMessage)));
 
-            props.onRemove && props.onRemove(messageInfo.message);
+            props.onRemove && props.onRemove(removeMessage);
         };
 
         const onClose = (messageInfo) => {

diff --git a/components/lib/utils/ObjectUtils.js b/components/lib/utils/ObjectUtils.js
@@ -4,6 +4,12 @@ export default class ObjectUtils {
         else return this.deepEquals(obj1, obj2);
     }
 
+    /**
+     * Compares two JSON objects for deep equality recursively comparing both objects.
+     * @param {*} a the first JSON object
+     * @param {*} b the second JSON object
+     * @returns true if equals, false it not
+     */
     static deepEquals(a, b) {
         if (a === b) return true;