From a79630a769fac5d874510b7a76424987e13fcf5a Mon Sep 17 00:00:00 2001 From: "mikerodonnell89@gmail.com" Date: Wed, 22 Jan 2025 11:10:40 -0500 Subject: [PATCH] fix(core): popover escape key to close should not bubble to dialog --- libs/core/combobox/combobox.component.ts | 6 ------ libs/core/multi-combobox/multi-combobox.component.ts | 5 ----- libs/core/multi-input/multi-input.component.ts | 4 +--- libs/core/popover/popover.component.ts | 11 +++++++++++ libs/platform/form/combobox/commons/base-combobox.ts | 4 ---- .../multi-combobox/commons/base-multi-combobox.ts | 4 ---- .../multi-combobox/multi-combobox.component.ts | 1 - libs/platform/form/multi-input/base-multi-input.ts | 4 ---- .../form/multi-input/multi-input.component.ts | 5 +---- 9 files changed, 13 insertions(+), 31 deletions(-) diff --git a/libs/core/combobox/combobox.component.ts b/libs/core/combobox/combobox.component.ts index 7df3d90fe79..2740c775ee0 100644 --- a/libs/core/combobox/combobox.component.ts +++ b/libs/core/combobox/combobox.component.ts @@ -406,9 +406,6 @@ export class ComboboxComponent 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 } 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 index 91107bfb04c..0723a00e5c5 100644 --- 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 extends BaseMultiCombobox 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 extends BaseMultiCombobox 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 index be8e586ecb2..05e59c0d2cf 100644 --- 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 } } 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 index 5c8e0f132cd..656ca689a83 100644 --- a/libs/core/popover/popover.component.ts +++ b/libs/core/popover/popover.component.ts @@ -172,6 +172,17 @@ export class PopoverComponent super(); } + /** Handler escape keydown */ + @HostListener('keydown.escape', ['$event']) + escapeKeydownHandler(event: KeyboardEvent): void { + if (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 index 0a5041a21ef..5e43620aee7 100644 --- 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 index f109bd8f9ee..5fb34c872f6 100644 --- 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 index d6373405956..33af3b018e4 100644 --- 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 index c0096cf46d5..4e461da41bb 100644 --- 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 index 3ea751a5be5..bcee26eda6f 100644 --- 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(); }