added animation reference similar to PanelMenu implementation (#16791)

primefaces · Nov 21, 2024 · 898d3b9 · 898d3b9
1 parent d6112fc
commit 898d3b9
Showing 1 changed file with 9 additions and 2 deletions.
diff --git a/src/app/components/panelmenu/panelmenu.ts b/src/app/components/panelmenu/panelmenu.ts
@@ -128,9 +128,9 @@ import { ObjectUtils, UniqueComponentId } from 'primeng/utils';
                             <ng-template *ngTemplateOutlet="itemTemplate; context: { $implicit: processedItem.item }"></ng-template>
                         </ng-container>
                     </div>
-                    <div class="p-toggleable-content" [@submenu]="getAnimation(processedItem)">
+                    <div class="p-toggleable-content" [@submenu]="getAnimation(processedItem)" (@submenu.done)="onToggleDone()">
                         <p-panelMenuSub
-                            *ngIf="isItemVisible(processedItem) && isItemGroup(processedItem) && isItemExpanded(processedItem)"
+                            *ngIf="isItemVisible(processedItem) && isItemGroup(processedItem) && (isItemExpanded(processedItem) || animating)"
                             [id]="getItemId(processedItem) + '_list'"
                             [panelId]="panelId"
                             [items]="processedItem?.items"
@@ -201,6 +201,8 @@ export class PanelMenuSub {
 
     @ViewChild('list') listViewChild: ElementRef;
 
+    animating: boolean | undefined;
+
     constructor(
         @Inject(forwardRef(() => PanelMenu)) public panelMenu: PanelMenu,
         public el: ElementRef
@@ -267,6 +269,7 @@ export class PanelMenuSub {
 
     onItemClick(event, processedItem) {
         if (!this.isItemDisabled(processedItem)) {
+            this.animating = true;
             this.getItemProp(processedItem, 'command', { originalEvent: event, item: processedItem.item });
             this.itemToggle.emit({ processedItem, expanded: !this.isItemActive(processedItem) });
         }
@@ -275,6 +278,10 @@ export class PanelMenuSub {
     onItemToggle(event) {
         this.itemToggle.emit(event);
     }
+
+    onToggleDone() {
+        this.animating = false;
+    }
 }
 
 @Component({