fix: escape closes only necessary elements

apps/showcase/angular.json

@@ -63,7 +63,7 @@
                         "development": {
                             "optimization": false,
                             "extractLicenses": false,
-                            "sourceMap": false
+                            "sourceMap": true
                         }
                     },
                     "defaultConfiguration": "production"

packages/primeng/src/autocomplete/autocomplete.ts

@@ -40,6 +40,7 @@ import { Overlay } from 'primeng/overlay';
 import { Ripple } from 'primeng/ripple';
 import { Scroller } from 'primeng/scroller';
 import { Nullable } from 'primeng/ts-helpers';
+import { CloseOnEscapeService } from 'primeng/utils';
 import { AutoCompleteCompleteEvent, AutoCompleteDropdownClickEvent, AutoCompleteLazyLoadEvent, AutoCompleteSelectEvent, AutoCompleteUnselectEvent } from './autocomplete.interface';
 import { AutoCompleteStyle } from './style/autocompletestyle';
 
@@ -970,6 +971,13 @@ export class AutoComplete extends BaseComponent implements AfterViewChecked, Aft
         private zone: NgZone
     ) {
         super();
+        inject(CloseOnEscapeService).closeOnEscape(
+            {
+                closeOnEscape: () => this.hide(),
+                kind: 'single'
+            },
+            this.injector
+        );
         effect(() => {
             this.filled = isNotEmpty(this.modelValue());
         });
@@ -1354,10 +1362,6 @@ export class AutoComplete extends BaseComponent implements AfterViewChecked, Aft
                 this.onEnterKey(event);
                 break;
 
-            case 'Escape':
-                this.onEscapeKey(event);
-                break;
-
             case 'Tab':
                 this.onTabKey(event);
                 break;
@@ -1486,11 +1490,6 @@ export class AutoComplete extends BaseComponent implements AfterViewChecked, Aft
         event.preventDefault();
     }
 
-    onEscapeKey(event) {
-        this.overlayVisible && this.hide(true);
-        event.preventDefault();
-    }
-
     onTabKey(event) {
         if (this.focusedOptionIndex() !== -1) {
             this.onOptionSelect(event, this.visibleOptions()[this.focusedOptionIndex()]);
@@ -1654,6 +1653,7 @@ export class AutoComplete extends BaseComponent implements AfterViewChecked, Aft
     }
 
     hide(isFocus = false) {
+        const isVisible = this.overlayVisible;
         const _hide = () => {
             this.dirty = isFocus;
             this.overlayVisible = false;
@@ -1666,6 +1666,7 @@ export class AutoComplete extends BaseComponent implements AfterViewChecked, Aft
         setTimeout(() => {
             _hide();
         }, 0); // For ScreenReaders
+        return isVisible;
     }
 
     clear() {

packages/primeng/src/basecomponent/basecomponent.ts

@@ -1,8 +1,7 @@
 import { DOCUMENT, isPlatformServer } from '@angular/common';
-import { ChangeDetectorRef, ContentChildren, Directive, ElementRef, inject, Injector, Input, PLATFORM_ID, QueryList, Renderer2, SimpleChanges } from '@angular/core';
+import { ChangeDetectorRef, Directive, ElementRef, inject, Injector, Input, PLATFORM_ID, Renderer2, SimpleChanges } from '@angular/core';
 import { Theme, ThemeService } from '@primeuix/styled';
 import { getKeyValue, uuid } from '@primeuix/utils';
-import { PrimeTemplate } from 'primeng/api';
 import { Base, BaseStyle } from 'primeng/base';
 import { PrimeNG } from 'primeng/config';
 import { BaseComponentStyle } from './style/basecomponentstyle';

packages/primeng/src/cascadeselect/cascadeselect.ts

@@ -33,6 +33,7 @@ import { AngleRightIcon, ChevronDownIcon, TimesIcon } from 'primeng/icons';
 import { Overlay } from 'primeng/overlay';
 import { Ripple } from 'primeng/ripple';
 import { Nullable, VoidListener } from 'primeng/ts-helpers';
+import { CloseOnEscapeService } from 'primeng/utils';
 import { CascadeSelectBeforeHideEvent, CascadeSelectBeforeShowEvent, CascadeSelectChangeEvent, CascadeSelectHideEvent, CascadeSelectShowEvent } from './cascadeselect.interface';
 import { CascadeSelectStyle } from './style/cascadeselectstyle';
 
@@ -966,10 +967,6 @@ export class CascadeSelect extends BaseComponent implements OnInit, AfterContent
                 this.onEnterKey(event);
                 break;
 
-            case 'Escape':
-                this.onEscapeKey(event);
-                break;
-
             case 'Tab':
                 this.onTabKey(event);
                 break;
@@ -1108,11 +1105,6 @@ export class CascadeSelect extends BaseComponent implements OnInit, AfterContent
         this.onEnterKey(event);
     }
 
-    onEscapeKey(event) {
-        this.overlayVisible && this.hide(event, true);
-        event.preventDefault();
-    }
-
     onTabKey(event) {
         if (this.focusedOptionInfo().index !== -1) {
             const processedOption = this.visibleOptions()[this.focusedOptionInfo().index];
@@ -1352,6 +1344,7 @@ export class CascadeSelect extends BaseComponent implements OnInit, AfterContent
     }
 
     hide(event?, isFocus = false) {
+        if (!this.overlayVisible) return false;
         const _hide = () => {
             this.overlayVisible = false;
             this.clicked = false;
@@ -1366,6 +1359,7 @@ export class CascadeSelect extends BaseComponent implements OnInit, AfterContent
         setTimeout(() => {
             _hide();
         }, 0); // For ScreenReaders
+        return true;
     }
 
     show(event?, isFocus = false) {
@@ -1435,6 +1429,13 @@ export class CascadeSelect extends BaseComponent implements OnInit, AfterContent
 
     constructor(public overlayService: OverlayService) {
         super();
+        inject(CloseOnEscapeService).closeOnEscape(
+            {
+                closeOnEscape: () => this.hide(),
+                kind: 'single'
+            },
+            this.injector
+        );
         effect(() => {
             const activeOptionPath = this.activeOptionPath();
             if (isNotEmpty(activeOptionPath)) {

packages/primeng/src/confirmpopup/confirmpopup.ts

@@ -10,7 +10,6 @@ import {
     ContentChildren,
     ElementRef,
     EventEmitter,
-    HostListener,
     Inject,
     inject,
     Input,
@@ -28,7 +27,7 @@ import { BaseComponent } from 'primeng/basecomponent';
 import { ButtonModule } from 'primeng/button';
 import { ConnectedOverlayScrollHandler } from 'primeng/dom';
 import { Nullable, VoidListener } from 'primeng/ts-helpers';
-import { ZIndexUtils } from 'primeng/utils';
+import { CloseOnEscapeService, ZIndexUtils } from 'primeng/utils';
 import { Subscription } from 'rxjs';
 import { ConfirmPopupStyle } from './style/confirmpopupstyle';
 
@@ -222,6 +221,19 @@ export class ConfirmPopup extends BaseComponent implements AfterContentInit, OnD
         @Inject(DOCUMENT) public document: Document
     ) {
         super();
+        inject(CloseOnEscapeService).closeOnEscape(
+            {
+                closeOnEscape: () => {
+                    if (this.confirmation && this.confirmation.closeOnEscape) {
+                        this.onReject();
+                        return true;
+                    }
+                    return false;
+                },
+                kind: 'single'
+            },
+            this.injector
+        );
         this.window = this.document.defaultView as Window;
         this.subscription = this.confirmationService.requireConfirmation$.subscribe((confirmation) => {
             if (!confirmation) {
@@ -288,13 +300,6 @@ export class ConfirmPopup extends BaseComponent implements AfterContentInit, OnD
         return undefined;
     }
 
-    @HostListener('document:keydown.escape', ['$event'])
-    onEscapeKeydown(event: KeyboardEvent) {
-        if (this.confirmation && this.confirmation.closeOnEscape) {
-            this.onReject();
-        }
-    }
-
     onAnimationStart(event: AnimationEvent) {
         if (event.toState === 'open') {
             this.container = event.element;

packages/primeng/src/contextmenu/contextmenu.ts

@@ -22,6 +22,7 @@ import {
     QueryList,
     signal,
     TemplateRef,
+    untracked,
     ViewChild,
     ViewEncapsulation,
     ViewRef
@@ -54,7 +55,7 @@ import { AngleRightIcon } from 'primeng/icons';
 import { Ripple } from 'primeng/ripple';
 import { TooltipModule } from 'primeng/tooltip';
 import { VoidListener } from 'primeng/ts-helpers';
-import { ZIndexUtils } from 'primeng/utils';
+import { CloseOnEscapeService, ZIndexUtils } from 'primeng/utils';
 import { ContextMenuStyle } from './style/contextmenustyle';
 
 @Component({
@@ -572,6 +573,13 @@ export class ContextMenu extends BaseComponent implements OnInit, AfterContentIn
 
     constructor(public overlayService: OverlayService) {
         super();
+        inject(CloseOnEscapeService).closeOnEscape(
+            {
+                closeOnEscape: () => this.closeWithEscape(),
+                kind: 'single'
+            },
+            this.injector
+        );
         effect(() => {
             const path = this.activeItemPath();
 
@@ -825,10 +833,6 @@ export class ContextMenu extends BaseComponent implements OnInit, AfterContentIn
                 this.onEnterKey(event);
                 break;
 
-            case 'Escape':
-                this.onEscapeKey(event);
-                break;
-
             case 'Tab':
                 this.onTabKey(event);
                 break;
@@ -921,13 +925,12 @@ export class ContextMenu extends BaseComponent implements OnInit, AfterContentIn
         this.onEnterKey(event);
     }
 
-    onEscapeKey(event: KeyboardEvent) {
-        this.hide();
+    private closeWithEscape() {
+        const didHide = this.hide();
         const processedItem = this.findVisibleItem(this.findFirstFocusedItemIndex());
         const focusedItemInfo = this.focusedItemInfo();
         this.focusedItemInfo.set({ ...focusedItemInfo, index: this.findFirstFocusedItemIndex(), item: processedItem.item });
-
-        event.preventDefault();
+        return didHide;
     }
 
     onTabKey(event: KeyboardEvent) {
@@ -1054,10 +1057,12 @@ export class ContextMenu extends BaseComponent implements OnInit, AfterContentIn
     }
 
     hide() {
+        const isVisibile = untracked(this.visible);
         this.visible.set(false);
         this.onHide.emit();
         this.activeItemPath.set([]);
         this.focusedItemInfo.set({ index: -1, level: 0, parentKey: '', item: null });
+        return isVisibile;
     }
 
     toggle(event?: any) {

packages/primeng/src/dialog/dialog.ts

@@ -31,7 +31,7 @@ import { DomHandler } from 'primeng/dom';
 import { FocusTrap } from 'primeng/focustrap';
 import { TimesIcon, WindowMaximizeIcon, WindowMinimizeIcon } from 'primeng/icons';
 import { Nullable, VoidListener } from 'primeng/ts-helpers';
-import { ZIndexUtils } from 'primeng/utils';
+import { CloseOnEscapeService, ZIndexUtils } from 'primeng/utils';
 import { DialogStyle } from './style/dialogstyle';
 
 const showAnimation = animation([style({ transform: '{{transform}}', opacity: 0 }), animate('{{transition}}')]);
@@ -534,8 +534,6 @@ export class Dialog extends BaseComponent implements OnInit, AfterContentInit, O
 
     documentResizeEndListener: VoidListener;
 
-    documentEscapeListener: VoidListener;
-
     maskClickListener: VoidListener;
 
     lastPageX: number | undefined;
@@ -602,6 +600,17 @@ export class Dialog extends BaseComponent implements OnInit, AfterContentInit, O
         };
     }
 
+    constructor() {
+        super();
+        inject(CloseOnEscapeService).closeOnEscape(
+            {
+                closeOnEscape: () => this.closeWithEscape(),
+                kind: 'global',
+                onlyCloseForFocussedElements: () => [this.wrapper]
+            },
+            this.injector
+        );
+    }
     ngOnInit() {
         super.ngOnInit();
         if (this.breakpoints) {
@@ -698,6 +707,13 @@ export class Dialog extends BaseComponent implements OnInit, AfterContentInit, O
         event.preventDefault();
     }
 
+    private closeWithEscape() {
+        if (!this.closeOnEscape || !this.visible || !this.closable) {
+            return false;
+        }
+        this.visibleChange.emit(false);
+    }
+
     enableModality() {
         if (this.closable && this.dismissableMask) {
             this.maskClickListener = this.renderer.listen(this.wrapper, 'mousedown', (event: any) => {
@@ -924,17 +940,12 @@ export class Dialog extends BaseComponent implements OnInit, AfterContentInit, O
         if (this.resizable) {
             this.bindDocumentResizeListeners();
         }
-
-        if (this.closeOnEscape && this.closable) {
-            this.bindDocumentEscapeListener();
-        }
     }
 
     unbindGlobalListeners() {
         this.unbindDocumentDragListener();
         this.unbindDocumentDragEndListener();
         this.unbindDocumentResizeListeners();
-        this.unbindDocumentEscapeListener();
     }
 
     bindDocumentDragListener() {
@@ -985,23 +996,6 @@ export class Dialog extends BaseComponent implements OnInit, AfterContentInit, O
         }
     }
 
-    bindDocumentEscapeListener() {
-        const documentTarget: any = this.el ? this.el.nativeElement.ownerDocument : 'document';
-
-        this.documentEscapeListener = this.renderer.listen(documentTarget, 'keydown', (event) => {
-            if (event.key == 'Escape') {
-                this.close(event);
-            }
-        });
-    }
-
-    unbindDocumentEscapeListener() {
-        if (this.documentEscapeListener) {
-            this.documentEscapeListener();
-            this.documentEscapeListener = null;
-        }
-    }
-
     appendContainer() {
         if (this.appendTo) {
             if (this.appendTo === 'body') this.renderer.appendChild(this.document.body, this.wrapper);