From ddae2ab495c9a8c2acc6f47cc502f62c97bb8ebb Mon Sep 17 00:00:00 2001 From: Nitipol Pattanapun Date: Fri, 1 May 2026 22:09:02 +0700 Subject: [PATCH] # Bug: Ghost/duplicate closing animation when using multiple ConfirmDialog groups MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Problem When multiple instances are used with different group props, opening a secondary dialog and then closing it causes a ghost flash of the secondary dialog's content during the main dialog's closing animation. ## Root Cause All ConfirmDialog instances listen to the same confirm-dialog event on OverlayService. The event handler only filtered by tagKey to decide whether to process an event: ```javascript const confirm = (updatedProps) => { if (updatedProps.tagKey === props.tagKey) { // both are undefined → always true ``` Since tagKey is undefined by default on all instances, every instance processed every event. While the group check inside show() correctly prevented the wrong dialog from becoming visible, confirmProps.current was still being overwritten with the incoming event's props before that check ran: ```javascript confirmProps.current = updatedProps; // ← written on ALL instances, regardless of group updatedProps.visible ? show() : hide(); ``` So after opening and closing a secondary dialog, the main dialog's confirmProps.current held stale props from the secondary dialog. When the main dialog later closed, it rendered those stale props during its closing animation — causing the ghost flash. ## Fix Add a group check to the event handler so each instance only processes events intended for its own group: ```javascript if (updatedProps.tagKey === props.tagKey && (updatedProps.group === undefined || updatedProps.group === props.group)) { ``` The updatedProps.group === undefined condition preserves backward compatibility for single-dialog usage where no group is specified. --- components/lib/confirmdialog/ConfirmDialog.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/lib/confirmdialog/ConfirmDialog.js b/components/lib/confirmdialog/ConfirmDialog.js index 3692b573f8..640afbe92e 100644 --- a/components/lib/confirmdialog/ConfirmDialog.js +++ b/components/lib/confirmdialog/ConfirmDialog.js @@ -105,7 +105,7 @@ export const ConfirmDialog = React.memo( }; const confirm = (updatedProps) => { - if (updatedProps.tagKey === props.tagKey) { + if (updatedProps.tagKey === props.tagKey && (updatedProps.group === undefined || updatedProps.group === props.group)) { const isVisibleChanged = visibleState !== updatedProps.visible; const targetChanged = getPropValue('target') !== updatedProps.target;