Merge pull request #17673 from tri-harmoney/issue-17670

fix(multiselect): 17670 stop propagation for the escape event
primefaces · Feb 24, 2025 · 32fa95b · 32fa95b
2 parents df199ef + c789ab3
commit 32fa95b
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 35 deletions.
diff --git a/apps/showcase/doc/api-generator/index.json b/apps/showcase/doc/api-generator/index.json
@@ -20828,7 +20828,7 @@
                             "parameters": [
                                 {
                                     "name": "value",
-                                    "type": "void"
+                                    "type": "AnimationEvent"
                                 }
                             ],
                             "description": "Callback to invoke when overlay panel becomes visible."
@@ -20838,7 +20838,7 @@
                             "parameters": [
                                 {
                                     "name": "value",
-                                    "type": "void"
+                                    "type": "AnimationEvent"
                                 }
                             ],
                             "description": "Callback to invoke when overlay panel becomes hidden."
@@ -37351,4 +37351,4 @@
     "zindexutils": {
         "components": {}
     }
-}
+}
diff --git a/packages/primeng/src/multiselect/multiselect.ts b/packages/primeng/src/multiselect/multiselect.ts
@@ -820,8 +820,7 @@ export class MultiSelect extends BaseComponent implements OnInit, AfterViewInit,
      * @group Props
      */
     @Input() get options(): any[] | undefined {
-        const options = this._options();
-        return options;
+        return this._options();
     }
     set options(val: any[] | undefined) {
         if (!deepEquals(this._options(), val)) {
@@ -917,14 +916,16 @@ export class MultiSelect extends BaseComponent implements OnInit, AfterViewInit,
     @Output() onClear: EventEmitter<void> = new EventEmitter<void>();
     /**
      * Callback to invoke when overlay panel becomes visible.
+     * @param {AnimationEvent} event - Animation event.
      * @group Emits
      */
-    @Output() onPanelShow: EventEmitter<void> = new EventEmitter<void>();
+    @Output() onPanelShow: EventEmitter<AnimationEvent> = new EventEmitter<AnimationEvent>();
     /**
      * Callback to invoke when overlay panel becomes hidden.
+     * @param {AnimationEvent} event - Animation event.
      * @group Emits
      */
-    @Output() onPanelHide: EventEmitter<void> = new EventEmitter<void>();
+    @Output() onPanelHide: EventEmitter<AnimationEvent> = new EventEmitter<AnimationEvent>();
     /**
      * Callback to invoke in lazy mode to load new data.
      * @param {MultiSelectLazyLoadEvent} event - Lazy load event.
@@ -1835,6 +1836,7 @@ export class MultiSelect extends BaseComponent implements OnInit, AfterViewInit,
 
     onEscapeKey(event) {
         this.overlayVisible && this.hide(true);
+        event.stopPropagation();
         event.preventDefault();
     }
 
@@ -2105,44 +2107,43 @@ export class MultiSelect extends BaseComponent implements OnInit, AfterViewInit,
         }
 
         isFocus && focus(this.focusInputViewChild?.nativeElement);
-        this.onPanelHide.emit();
         this.cd.markForCheck();
     }
 
     onOverlayAnimationStart(event: AnimationEvent) {
-        switch (event.toState) {
-            case 'visible':
-                this.itemsWrapper = findSingle(this.overlayViewChild?.overlayViewChild?.nativeElement, this.virtualScroll ? '.p-scroller' : '.p-multiselect-list-container');
-                this.virtualScroll && this.scroller?.setContentEl(this.itemsViewChild?.nativeElement);
-
-                if (this._options() && this._options().length) {
-                    if (this.virtualScroll) {
-                        const selectedIndex = isNotEmpty(this.modelValue()) ? this.focusedOptionIndex() : -1;
-                        if (selectedIndex !== -1) {
-                            this.scroller?.scrollToIndex(selectedIndex);
-                        }
-                    } else {
-                        let selectedListItem = findSingle(this.itemsWrapper, '[data-p-highlight="true"]');
-
-                        if (selectedListItem) {
-                            selectedListItem.scrollIntoView({ block: 'nearest', inline: 'nearest' });
-                        }
+        if (event.toState === 'visible') {
+            this.itemsWrapper = <any>findSingle(this.overlayViewChild?.overlayViewChild?.nativeElement, this.virtualScroll ? '.p-scroller' : '.p-multiselect-list-container');
+            this.virtualScroll && this.scroller?.setContentEl(this.itemsViewChild?.nativeElement);
+
+            if (this.options && this.options.length) {
+                if (this.virtualScroll) {
+                    const selectedIndex = this.modelValue() ? this.focusedOptionIndex() : -1;
+                    if (selectedIndex !== -1) {
+                        this.scroller?.scrollToIndex(selectedIndex);
+                    }
+                } else {
+                    let selectedListItem = findSingle(this.itemsWrapper, '[data-p-highlight="true"]');
+
+                    if (selectedListItem) {
+                        selectedListItem.scrollIntoView({ block: 'nearest', inline: 'nearest' });
                     }
                 }
+            }
 
-                if (this.filterInputChild && this.filterInputChild.nativeElement) {
-                    this.preventModelTouched = true;
+            if (this.filterInputChild && this.filterInputChild.nativeElement) {
+                this.preventModelTouched = true;
 
-                    if (this.autofocusFilter) {
-                        this.filterInputChild.nativeElement.focus();
-                    }
+                if (this.autofocusFilter) {
+                    this.filterInputChild.nativeElement.focus();
                 }
+            }
 
-                this.onPanelShow.emit();
-            case 'void':
-                this.itemsWrapper = null;
-                this.onModelTouched();
-                break;
+            this.onPanelShow.emit(event);
+        }
+        if (event.toState === 'void') {
+            this.itemsWrapper = null;
+            this.onModelTouched();
+            this.onPanelHide.emit(event);
         }
     }
 

diff --git a/packages/primeng/src/select/select.ts b/packages/primeng/src/select/select.ts
@@ -1956,6 +1956,7 @@ export class Select extends BaseComponent implements OnInit, AfterViewInit, Afte
     onEscapeKey(event: KeyboardEvent) {
         this.overlayVisible && this.hide(true);
         event.preventDefault();
+        event.stopPropagation();
     }
 
     onTabKey(event, pressedInInputText = false) {