Skip to content

Fix bug of ConfirmDialog: closing animation is replaced by secondary dialog animation#8535

Merged
melloware merged 1 commit intoprimefaces:masterfrom
icenitipol:fix-bug-ghost-confirm-dialog
May 1, 2026
Merged

Fix bug of ConfirmDialog: closing animation is replaced by secondary dialog animation#8535
melloware merged 1 commit intoprimefaces:masterfrom
icenitipol:fix-bug-ghost-confirm-dialog

Conversation

@icenitipol
Copy link
Copy Markdown
Contributor

@icenitipol icenitipol commented May 1, 2026

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:

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:

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:

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.

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.

…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.
@github-actions
Copy link
Copy Markdown

github-actions Bot commented May 1, 2026

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>.

@icenitipol
Copy link
Copy Markdown
Contributor Author

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>.

I have edited the PR to include #<issue_id>. Thanks

@melloware melloware merged commit 2df42b3 into primefaces:master May 1, 2026
2 of 4 checks passed
@icenitipol icenitipol deleted the fix-bug-ghost-confirm-dialog branch May 1, 2026 17:04
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

ConfirmDialog: closing animation is replaced by secondary dialog animation

2 participants