fix(core): popover escape key to close should not bubble to dialog

SAP · Jan 21, 2025 · 653f90c · 653f90c
1 parent e624121
commit 653f90c
Show file tree

Hide file tree

Showing 9 changed files with 14 additions and 32 deletions.
diff --git a/libs/core/combobox/combobox.component.ts b/libs/core/combobox/combobox.component.ts
@@ -406,9 +406,6 @@ export class ComboboxComponent<T = any>
         SHIFT
     ];
 
-    /** Keys, that will close popover's body, when dispatched on search input */
-    readonly closingKeys: number[] = [ESCAPE];
-
     /** @hidden */
     readonly _repositionScrollStrategy: RepositionScrollStrategy;
 
@@ -525,9 +522,6 @@ export class ComboboxComponent<T = any>
             } else if (KeyUtil.isKeyCode(event, UP_ARROW)) {
                 this._chooseOtherItem(-1);
                 event.preventDefault();
-            } else if (KeyUtil.isKeyCode(event, this.closingKeys)) {
-                this.isOpenChangeHandle(false);
-                event.stopPropagation();
             } else if (
                 this.openOnKeyboardEvent &&
                 !event.ctrlKey &&

diff --git a/libs/core/multi-combobox/multi-combobox.component.ts b/libs/core/multi-combobox/multi-combobox.component.ts
@@ -569,7 +569,6 @@ export class MultiComboboxComponent<T = any> extends BaseMultiCombobox<T> implem
     _onItemKeyDownHandler(event: KeyboardEvent): void {
         if (KeyUtil.isKeyCode(event, ESCAPE)) {
             this._focusToSearchField();
-            this.close();
         } else if ((event.ctrlKey || event.metaKey) && event.shiftKey && KeyUtil.isKeyCode(event, A)) {
             event.preventDefault();
             this._handleSelectAllItems(false);
@@ -724,10 +723,6 @@ export class MultiComboboxComponent<T = any> extends BaseMultiCombobox<T> implem
             this._chooseOtherItem(-1);
         } else if (KeyUtil.isKeyCode(event, ENTER)) {
             this._toggleSelectionByInputText();
-        } else if (KeyUtil.isKeyCode(event, ESCAPE)) {
-            event.stopPropagation();
-
-            this._showList(false);
         } else if (!KeyUtil.isKeyCode(event, [...this._nonOpeningKeys, CONTROL])) {
             this._showList(true);
             const acceptedKeys = !KeyUtil.isKeyType(event, 'alphabetical') && !KeyUtil.isKeyType(event, 'numeric');

diff --git a/libs/core/multi-input/multi-input.component.ts b/libs/core/multi-input/multi-input.component.ts
@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/member-ordering */
-import { DOWN_ARROW, ENTER, ESCAPE, SPACE, TAB, UP_ARROW } from '@angular/cdk/keycodes';
+import { DOWN_ARROW, ENTER, SPACE, TAB, UP_ARROW } from '@angular/cdk/keycodes';
 import {
     AfterViewInit,
     ChangeDetectionStrategy,
@@ -735,8 +735,6 @@ export class MultiInputComponent<ItemType = any, ValueType = any>
             }
         } else if (KeyUtil.isKeyCode(event, [DOWN_ARROW, UP_ARROW, ENTER])) {
             this.openChangeHandle(true);
-        } else if (KeyUtil.isKeyCode(event, ESCAPE)) {
-            this.openChangeHandle(false);
         } else if (KeyUtil.isKeyCode(event, TAB) && this.open) {
             this._close();
         } else if (KeyUtil.isKeyType(event, 'alphabetical') || KeyUtil.isKeyType(event, 'numeric')) {

diff --git a/libs/core/popover/popover.component.ts b/libs/core/popover/popover.component.ts
@@ -21,7 +21,7 @@ import {
     ViewEncapsulation
 } from '@angular/core';
 
-import { DOWN_ARROW } from '@angular/cdk/keycodes';
+import { DOWN_ARROW, ESCAPE } from '@angular/cdk/keycodes';
 import { CdkOverlayOrigin, ConnectedPosition } from '@angular/cdk/overlay';
 
 import { NgTemplateOutlet } from '@angular/common';
@@ -172,6 +172,17 @@ export class PopoverComponent
         super();
     }
 
+    /** Handler escape keydown */
+    @HostListener('keydown', ['$event'])
+    escapeKeydownHandler(event: KeyboardEvent): void {
+        if (KeyUtil.isKeyCode(event, ESCAPE) && this.closeOnEscapeKey && this.isOpen) {
+            // In case if popover belongs to the element inside dialog
+            event.preventDefault();
+            event.stopImmediatePropagation();
+            this.popoverBody.onClose.next();
+        }
+    }
+
     /** @hidden */
     @HostListener('keydown.space', ['$event'])
     @HostListener('keydown.enter', ['$event'])

diff --git a/libs/platform/form/combobox/commons/base-combobox.ts b/libs/platform/form/combobox/commons/base-combobox.ts
@@ -479,10 +479,6 @@ export abstract class BaseCombobox
             event.preventDefault();
 
             this._chooseOtherItem(-1);
-        } else if (KeyUtil.isKeyCode(event, ESCAPE)) {
-            event.stopPropagation();
-
-            this.isOpenChangeHandle(false);
         } else if (!event.ctrlKey && !KeyUtil.isKeyCode(event, this._nonOpeningKeys)) {
             if (!KeyUtil.isKeyCode(event, this._numberPadNumberKeys)) {
                 this.isOpenChangeHandle(true);

diff --git a/libs/platform/form/multi-combobox/commons/base-multi-combobox.ts b/libs/platform/form/multi-combobox/commons/base-multi-combobox.ts
@@ -569,10 +569,6 @@ export abstract class BaseMultiCombobox extends CollectionBaseInput implements O
             this._chooseOtherItem(-1);
         } else if (KeyUtil.isKeyCode(event, ENTER)) {
             this.toggleSelectionByInputText();
-        } else if (KeyUtil.isKeyCode(event, ESCAPE)) {
-            event.stopPropagation();
-
-            this.showList(false);
         } else if (!KeyUtil.isKeyCode(event, [...this._nonOpeningKeys, CONTROL])) {
             this.showList(true);
             const acceptedKeys = !KeyUtil.isKeyType(event, 'alphabetical') && !KeyUtil.isKeyType(event, 'numeric');

diff --git a/libs/platform/form/multi-combobox/multi-combobox/multi-combobox.component.ts b/libs/platform/form/multi-combobox/multi-combobox/multi-combobox.component.ts
@@ -279,7 +279,6 @@ export class MultiComboboxComponent extends BaseMultiCombobox implements OnInit,
     onItemKeyDownHandler(event: KeyboardEvent): void {
         if (KeyUtil.isKeyCode(event, ESCAPE)) {
             this._focusToSearchField();
-            this.close();
         } else if ((event.ctrlKey || event.metaKey) && event.shiftKey && KeyUtil.isKeyCode(event, A)) {
             event.preventDefault();
             this.handleSelectAllItems(false);

diff --git a/libs/platform/form/multi-input/base-multi-input.ts b/libs/platform/form/multi-input/base-multi-input.ts
@@ -447,10 +447,6 @@ export abstract class BaseMultiInput extends CollectionBaseInput implements Afte
             event.preventDefault();
 
             this._chooseOtherItem(-1);
-        } else if (KeyUtil.isKeyCode(event, ESCAPE)) {
-            event.stopPropagation();
-
-            this.showList(false);
         } else if (!event.ctrlKey && !KeyUtil.isKeyCode(event, this._nonOpeningKeys)) {
             this.showList(true);
         }

diff --git a/libs/platform/form/multi-input/multi-input.component.ts b/libs/platform/form/multi-input/multi-input.component.ts
@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/member-ordering */
-import { DOWN_ARROW, ESCAPE, UP_ARROW } from '@angular/cdk/keycodes';
+import { DOWN_ARROW, UP_ARROW } from '@angular/cdk/keycodes';
 import {
     AfterViewInit,
     ChangeDetectionStrategy,
@@ -371,9 +371,6 @@ export class PlatformMultiInputComponent extends BaseMultiInput implements OnIni
                 this.searchInputElement.nativeElement.focus();
             }
         }
-        if (KeyUtil.isKeyCode(event, [ESCAPE])) {
-            this.showList(false);
-        }
         this.markForCheck();
     }