Fix bug of ConfirmDialog: closing animation is replaced by secondary dialog animation#8535
Merged
melloware merged 1 commit intoprimefaces:masterfrom May 1, 2026
Conversation
…ialog groups
## Problem
When multiple <ConfirmDialog> 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.
|
Thanks a lot for your contribution! But, PR does not seem to be linked to any issues. Please manually link to an issue or mention it in the description using #<issue_id>. |
Contributor
Author
I have edited the PR to include #<issue_id>. Thanks |
melloware
approved these changes
May 1, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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:
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:
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:
The updatedProps.group === undefined condition preserves backward compatibility for single-dialog usage where no group is specified.
This Pull request fix this issue: https://github.com/primefaces/primereact/issues/8533
#8533
PS: I use AI to help me write messages, as English is not my native language.