Menubar (and other menu components): PrimeNG 16.1.0 unable to dynamically update menu items

[rosenthalj]

Describe the bug

In PrimeNG 16.1.0 Menubar's menu items can not be dynamically added.

After a Menubar is rendered the menu bar items can not be dynamically added.

The first movie demonstrates the problem in PrimeNG 16.1.0 (https://stackblitz.com/edit/vr5hjz-uqhp4v?file=package.json)

https://github.com/primefaces/primeng/assets/45439491/5628f967-6be2-41a5-b98b-307c283e5449

The second movie demonstrates the exact same code working in PrimeNG 16.0.2 (https://stackblitz.com/edit/vr5hjz-akbcuy?file=package.json)

https://github.com/primefaces/primeng/assets/45439491/7b251b23-20ce-47d6-a8f7-0c4921d6dfb8

The third movie demonstrates a workaround for PrimeNG 16.1.0

https://github.com/primefaces/primeng/assets/45439491/1246b8d0-dcf1-4067-9b50-483f26f2d0bb

I believe this is a problem throughout PrimeNG 16.1.0. I performed a search in GitHub and found 6 Components that all share the same logic/method that I based my reproducer workaround on. See the annotate screenshot listed below:

Environment

Mac os and Windows

Reproducer

https://stackblitz.com/edit/vr5hjz-uqhp4v?file=package.json

Angular version

16.x

PrimeNG version

16.1.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

18.16.0

Browser(s)

chrome, firefox, safari

Steps to reproduce the behavior

1) Run the stackblitz reproducer 2) Expand the stackblitz window so that all 2 menubar options are visible 3) Click on the "AddToTask" menu option a few times 4) See that the "AddToTask" menu option label is updated but the "TestMenu" option items are not updated

Expected behavior

After executing step 4, the "AddToTask" menu option label should be updated and the "TestMenu" option items should also be updated.

Using the 16.0.2 stackblitz or "checking" the workaround using the reproducer the steps above work

[Alextremeee]

For visibility and anyone else having the same problem, the workaround for this given in the stackblitz by @rosenthalj is to manually clear the relevant menu component's MenuItem list and mark it for change detection, each time your list is dynamically updated:

e.g. for a TabMenu

@ViewChild( TabMenu ) pTabMenu!: TabMenu;
...
itemAddedToList(): void {
    // ... your function that dynamically adds items

    // The workaround
    this.pTabMenu._focusableItems = undefined;
    // @ts-ignore
    this.pTabMenu.cd.markForCheck();
}

• The // @ts-ignore will be required if you're using strict type checking as you're calling a private method.
• The name of the item list is not constant across all menu componenets, for example a Menubar is called "_processedItems".

[Halynsky]

@rosenthalj Thx for the report. I caught the same in the ContextMenu of the Table. So, it looks like really this issue is shared between all Menu components.

[rweisse]

The same here. Binding with an observable no longer works. It renders only once.

navbar.component.html

<p-tabMenu [model]="tabItems$ | async"></p-tabMenu>

navbar.component.ts

tabItems$: Observable<MenuItem[]>;

[cetincakiroglu]

Hi,

This issue appears on several menu components and I've created a more generic issue covers all of them. You can track here: https://github.com/primefaces/primeng/issues/13471

The issue is fixed now and the fix will be available with the upcoming release.

Closing the issue since it's moved to a more generic topic.

Thanks for reporting!