PanelMenu - Repeating menu items

[jalley3]

Describe the bug

#14373 ... basically this bug is back... see my comment at the end for current pictures ...note this is working in 17.16

Environment

version 17.17 and 17.18

Reproducer

No response

Angular version

17.3.4

PrimeNG version

17.17

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

20.10

Browser(s)

No response

Steps to reproduce the behavior

Expected behavior

[jalley3]

@mehmetcetin01140 i believe it is related to your changes

[guaido79]

I found thats uncommon behavior too.
I see it's due to the routerLink in the MenuItem. If you remove it it come back to single menu per item.
To fix my code i add another property in the any property of MenuItem and bind it in the menu template.

[jalley3]

remove the routerlink? those are supposed to be links to other pages so i need the router links @guaido79

[guaido79]

remove the routerlink? those are supposed to be links to other pages so i need the router links @guaido79

Yes, sure, I give just some more information to find the problem.

in the example of the showcase on Stackblitz routerLink it's not used:

items: MenuItem[];

    constructor(private router: Router) {}

    ngOnInit() {
        this.items = [
            {
                label: 'Router',
                icon: 'pi pi-palette',
                items: [
                    {
                        label: 'Installation',
                        icon: 'pi pi-eraser',
                        route: '/installation'
                    },
                    {
                        label: 'Configuration',
                        icon: 'pi pi-heart',
                        route: '/configuration'
                    }
                ]
            },
            {
                label: 'Programmatic',
                icon: 'pi pi-link',
                command: () => {
                    this.router.navigate(['/installation']);
                }
            },

<p-panelMenu [model]="items" styleClass="w-full md:w-20rem">
        <ng-template pTemplate="item" let-item>
            <ng-container *ngIf="item.route; else urlRef">
                <a [routerLink]="item.route" class="flex align-items-center 
                    cursor-pointer text-color px-3 py-2">
                    <span [class]="item.icon"></span>
                    <span class="ml-2 text-color">{{ item.label }}</span>
                </a>
            </ng-container>

[jalley3]

@guaido79 thank you however MenuItem does not even contain a route property (https://primeng.org/dock#api.dock.interfaces.MenuItem ) which breaks a lot of our strongly typed methods and means redoing our entire site's navigation that is currently set up to use RouterLink in the MenuItem. Its frustrating because it just worked in v17.16

[cetincakiroglu]

Hi @jalley3 ,

Could you please share a stackblitz reproducer?

[SippieCup]

Reproduction on v18:
https://stackblitz.com/~/github.com/SippieCup/panelMenu-duplication

Edit: its due to rendering the panel header, then seeing the item template, and rendering the item template as well. rather than skipping the panel header or the item itself when rendering on root items.

you can pass a boolean into item.state.isRoot and just check that in the template, and not render anything

  <ng-template pTemplate="item" let-item>
    @if (!item.state?.root) {
      @if (item.routerLink) {

      <a [routerLink]="item.routerLink" class="flex align-items-center
                cursor-pointer  px-3 py-2 group">
        <span [class]="item.icon"></span>
        <span class="ml-2">{{ item.label }}</span>
      </a>
      } @else if (item.url){

      <a [href]="item.url" class="flex align-items-center
                cursor-pointer text-color px-3 py-2">
        <span [class]="item.icon"></span>
        <span class="ml-2">{{ item.label }}</span>
      </a>
      } @else {

      <span class="flex items-center cursor-pointer text-surface-700 dark:text-surface-0 px-4 py-2">
        <span [class]="item.icon"></span>
        <span class="ml-2">{{ item.label }}</span>
        <i *ngIf="item.items" class="pi pi-angle-down text-primary ml-auto"></i>
      </span>

      }
    }
  </ng-template>

however doing that makes it so only the text is clickable to go route.

Also (although this may just be my inexperience), i cant seem to get the borders of the panels to be hidden. I think the best solution is to add the routerLink to the header template if one exists & to not render items with routerLinks on root.

[SippieCup]

@cetincakiroglu I believe it is from this <a> tag being outside of the container that is checking for itemTemplate.

primeng/src/app/components/panelmenu/panelmenu.ts

Line 872 in c89e42c

<a

This causes it to render both the item template, and the additional link.