Primeng: TabMenu: active route no longer highlighted with PrimeNG 10.0.0

[rhegner]

I'm submitting a ...

[x] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Stackblitz Case

https://stackblitz.com/edit/primeng-tabmenu-demo-xuauks?file=src/app/app.component.ts

Current behavior
TabMenu does not highlight the active route. It only activates a tab by clicking on it, but not by navigating to a route.

Expected behavior
As described in the documentation:

By default item that matches the active route is highlighted, [...]

This was also the behavior with PrimeNG 9

Minimal reproduction of the problem with instructions
Open Stackblitz example and notice how the active route does not get reflected in the TabMenu when using the navigation links.

What is the motivation / use case for changing the behavior?
Looks like a regression bug from PrimeNG 9 to PrimeNG 10

• Angular version: 10

• PrimeNG version: 10.0.0

• Browser: Chrome 85

• Language: TypeScript 3.9

[xeleoss]

Same problem! I suspect this is due to the change ChangeDetectionStrategy

[xeleoss]

This seems to be a duplicate of this task https://github.com/primefaces/primeng/issues/9367
But in 10.0.3 the bug is still present.

[siehc]

    <div [ngClass]="'p-tabmenu p-component'" [ngStyle]="style" [class]="styleClass">
        <ul #navbar class="p-tabmenu-nav p-reset" role="tablist">
            <li *ngFor="let item of model; let i = index" role="tab" [attr.aria-selected]="activeItem==item" [attr.aria-expanded]="activeItem==item"
                [ngClass]="{'p-tabmenuitem':true,'p-disabled':item.disabled,'p-highlight':activeItem==item,'p-hidden': item.visible === false}">
                <a *ngIf="!item.routerLink" [attr.href]="item.url" class="p-menuitem-link" role="presentation" (click)="itemClick($event,item)" [attr.tabindex]="item.disabled ? null : '0'"
                    [attr.target]="item.target" [attr.title]="item.title" [attr.id]="item.id" pRipple>
                    <ng-container *ngIf="!itemTemplate">
                        <span class="p-menuitem-icon" [ngClass]="item.icon" *ngIf="item.icon"></span>
                        <span class="p-menuitem-text" *ngIf="item.escape !== false; else htmlLabel">{{item.label}}</span>
                        <ng-template #htmlLabel><span class="p-menuitem-text" [innerHTML]="item.label"></span></ng-template>
                    </ng-container>
                    <ng-container *ngTemplateOutlet="itemTemplate; context: {$implicit: item, index: i}"></ng-container>
                </a>
                <a *ngIf="item.routerLink" [routerLink]="item.routerLink" [queryParams]="item.queryParams" [routerLinkActive]="'p-menuitem-link-active'" [routerLinkActiveOptions]="item.routerLinkActiveOptions||{exact:false}"
                    role="presentation" class="p-menuitem-link" (click)="itemClick($event,item)" [attr.tabindex]="item.disabled ? null : '0'"
                    [attr.target]="item.target" [attr.title]="item.title" [attr.id]="item.id"
                    [fragment]="item.fragment" [queryParamsHandling]="item.queryParamsHandling" [preserveFragment]="item.preserveFragment" [skipLocationChange]="item.skipLocationChange" [replaceUrl]="item.replaceUrl" [state]="item.state" pRipple>
                    <ng-container *ngIf="!itemTemplate">
                        <span class="p-menuitem-icon" [ngClass]="item.icon" *ngIf="item.icon"></span>
                        <span class="p-menuitem-text" *ngIf="item.escape !== false; else htmlRouteLabel">{{item.label}}</span>
                        <ng-template #htmlRouteLabel><span class="p-menuitem-text" [innerHTML]="item.label"></span></ng-template>
                    </ng-container>
                    <ng-container *ngTemplateOutlet="itemTemplate; context: {$implicit: item, index: i}"></ng-container>
                </a>
            </li>

Maybe add [routerLinkActive]="p-highlight" to li element will fix this issue?

[RichardMcElroy]

Same problem here on an active project.
I'm using 11.0.0-rc.1
If you need a tester, just get in touch.

[wederer]

Any updates on this?

[chrizy]

HI, I am also seeing this issue since upgrading (last re-tested on 11.2). and raised same issue on MenuBar #9473

[KonstantinsS]

@yigitfindikli can you update on this issue? I can't use latest version due to this bug.

[paul-solomon]

Could we get an update on this? Facing the exact same issue.

[vivek201]

The current active styles are applied based on .p-highlight but the active route link has class .p-menuitem-link-active. So basically, adding the following styles has fixed this for me

::ng-deep {
    .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link-active {
        background: #ffffff;
        border-color: #2196F3;
        color: #2196F3;
    }
} 

[GuanyiX]

Any updates here? menubar active not working as well

[etay-schur-apolicy]

any updates ? same issue with PrimeNG 11