Problem

When a preview dialog is opened inside a regular dialog, pressing Escape closes both components simultaneously instead of closing only the preview dialog first.

Reproduction:

// Open a dialog that contains a preview
this.dialogs.open(() => {
    // Open preview dialog inside regular dialog
    this.previewDialogs.open('Preview content').subscribe();
    return 'Dialog with preview content';
}).subscribe();

// Press Escape → Both dialogs close at once (incorrect behavior)
// Expected: First escape closes preview, second escape closes dialog

Root Cause

Both TuiPreviewDialog and TuiDialogCloseService listen for escape key events on the document:

• TuiPreviewDialog: Uses (document:keydown.esc) host binding
• TuiDialogCloseService: Filters escape events with !event.defaultPrevented check

The preview dialog handles the escape key but doesn't prevent event propagation, so the parent dialog also receives the same event and closes simultaneously.

Solution

Modified TuiPreviewDialog to prevent escape key event propagation:

Before:

host: {
    '(document:keydown.esc)': 'context.$implicit.complete()',
}

After:

host: {
    '(document:keydown.esc)': 'onEscape($event)',
}

onEscape(event: KeyboardEvent): void {
    event.preventDefault();    // Prevents default behavior
    event.stopPropagation();  // Stops event bubbling
    this.context.$implicit.complete();
}

Technical Details

• The dialog close service already checks !event.defaultPrevented before handling escape keys
• By calling preventDefault() in the preview dialog, we ensure the dialog service ignores the already-handled escape event
• Creates a layered approach where the topmost dialog (preview) handles escape first

Expected Behavior After Fix

• ✅ First escape: closes only the preview dialog, parent dialog remains open
• ✅ Second escape: closes the parent dialog
• ✅ Preview dialog standalone: works exactly as before
• ✅ No regressions: all existing functionality preserved

Testing

• Added focused test to verify escape key event propagation is prevented
• All existing preview and dialog tests continue to pass
• Build completes successfully for all libraries

Fixes #11401.

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.