diff --git a/src/app/components/panelmenu/panelmenu.ts b/src/app/components/panelmenu/panelmenu.ts index b8c03297e7b..4dbcb2503a6 100644 --- a/src/app/components/panelmenu/panelmenu.ts +++ b/src/app/components/panelmenu/panelmenu.ts @@ -360,7 +360,7 @@ export class PanelMenuList implements OnChanges { @Input() items: any[]; - @Input() itemTemplate: HTMLElement | undefined; + @Input() itemTemplate: TemplateRef | undefined; @Input({ transform: booleanAttribute }) parentExpanded: boolean | undefined; @@ -571,13 +571,25 @@ export class PanelMenuList implements OnChanges { onItemToggle(event) { const { processedItem, expanded } = event; - processedItem.expanded = !processedItem.expanded; - const activeItemPath = this.activeItemPath().filter((p) => p.parentKey !== processedItem.parentKey); - expanded && activeItemPath.push(processedItem); + // Update the original item object's 'expanded' property + if (processedItem.item) { + processedItem.item.expanded = !processedItem.item.expanded; + } + + // Recreate processedItems with updated 'expanded' states + this.processedItems.set( + this.createProcessedItems(this.items || [], 0, {}, '') + ); + // Update activeItemPath + const activeItemPath = this.activeItemPath().filter((p) => p.parentKey !== processedItem.parentKey); + if (expanded) { + activeItemPath.push(processedItem); + } this.activeItemPath.set(activeItemPath); - this.processedItems.update((value) => value.map((i) => (i === processedItem ? processedItem : i))); + + // Update focusedItem this.focusedItem.set(processedItem); } @@ -916,7 +928,7 @@ export class PanelMenuList implements OnChanges { [ngClass]="{ 'p-panelmenu-expanded': isItemActive(item) }" >
- + >