PanelMenu - Repeating menu items

jalley3 commented 1 month ago

Describe the bug

https://github.com/primefaces/primeng/issues/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 commented 1 month ago

@mehmetcetin01140 i believe it is related to your changes

guaido79 commented 1 month ago

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 commented 1 month ago

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

guaido79 commented 1 month ago

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 commented 1 month ago

@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 commented 1 day ago

Hi @jalley3 ,

Could you please share a stackblitz reproducer?

primefaces / primeng