TabMenu: Inkbar Not Aligned With Active Route

[shawnweeks]

Describe the bug

For all the material design and material design compact themes the inkbar is not located under the active TabMenu tab when accessing the page directly via routing. For other themes like lara-light-blue that use pure CSS the issue isn't there. These seems to be caused by tabChanged being undefined at https://github.com/primefaces/primeng/blob/dcfbb201fbd6599e5021595ebfaf891fbce7351f/src/app/components/tabmenu/tabmenu.ts#L270 when accessing a tab directly via the route instead of clicking.

Overriding the function definition like this seems to resolve the issue.

TabMenu.prototype.ngAfterViewChecked = function () {
      if (this.tabChanged ? this.tabChanged : true) {
        this.updateInkBar();
        this.tabChanged = false;
      }
    }

Environment

Angular CLI: 17.0.3 Node: 20.10.0 Package Manager: npm 10.2.3 OS: darwin arm64

Reproducer

https://stackblitz.com/~/github.com/shawnweeks/primeng-tab-menu-bug

Angular version

17.0.4

PrimeNG version

17.0.0-beta.1

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

17.0.0-beta.1

Browser(s)

Firefox 119.0.1

Steps to reproduce the behavior

1. Open project using StackBlitz Link
2. Wait for project to start
3. Add /first or /second to the end of the mini browser url
4. Notice how the text is highlighted correctly but the inkbar is all the way to the left.

Expected behavior

No response

[nclsstdl]

ran into the same issue today with version 17.6.0

[balkaninal]

I encountered the same issue today. The routerLink values in the tabMenu didn't work correctly with router-outlet. The active item wasn't set on the first click but updated on the next click. I used the "overriding the function" above to fix it, thank you.

version 15.4.1