Primeng: activeItem not correctly set in TabMenu when refreshing

[cracrayol]

I'm submitting a ... (check one with "x")

[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

Current behavior
When refreshing a page containing a TabMenu component having 2+ items that use routerLink and this page is linked to the item in second position (or more), the activeItem variable is not correctly set to the item that correspond to the refreshed page (always set to the first item).

As a consequence, the \

element of the first tab will always have the ui-state-active class set, event if the current page correspond to the second/third/... tab. However, the \ element of the correct tab has the ui-state-active class, because it use routerLinkActive.

Expected behavior
The correct tab should be selected and have the ui-state-active set for \

.

Minimal reproduction of the problem with instructions
Create 2 or more routes that displays the same TabMenu.
TabMenu items uses routerLink in order to navigate between defined routes.
Select the 2/3/... tab (so url of the page change) and refresh (F5) the browser.

What is the motivation / use case for changing the behavior?
Using a TabMenu with internal routing for site navigation.

Please tell us about your environment:

• Angular version: 4.1.0
  

• PrimeNG version: 4.0.0
  

• Browser: Chrome 58
  

[cagataycivici]

Unable to replicate, please provide a test case based on plunkr below and we'll review again.

http://plnkr.co/edit/Wj39h1?p=preview

[fxmfr]

Similar issue here.
As a workaround I set the activeTab programmatically in routed component's OnInit method.

But this leads to other problems - for example when working with canDeactivate in routing, where the user clicks another tab, but (after a warning) decides to stay on current page to save changes or whatever.
In this case the <li> element of the one tab and the <a> element of the other tab, both have class ui-state-active added.

I'm sorry, cannot provide a plunkr atm, because of restrictions.
I hope you'll review anyway, thanks for your great work.

[arjunshankar]

@fxmfr I am facing this exact issue. Were you ever able to come up with a solution for this ?

[fxmfr]

@arjunshankar in my case it was sufficient to style the active item based on the <a> elements ui-state-active class only (while ignoring <li> element completely). So, under the hood the issue still exists, but users see correct active tab.
Hope this helps.

[bossqone]

@cagataycivici I've hit the same issue when using TabMenu with routerLinks.
Correct menu item is highlighted by routerLinkActive, but there's this code in TabMenu component which causes wrong/unwanted highlighting of first menu item.

ngOnInit() {
    if(!this.activeItem && this.model && this.model.length) {
        this.activeItem = this.model[0];
    }
}

Current workaround is to use:

<p-tabMenu [model]="tabsModel" [activeItem]="{}"></p-tabMenu>

[Serverfrog]

@cagataycivici
I Resolved the view Problem with an routerLink which was '/' to '' . Problem now is that it wont go to the Root Component anymore.
@bossqone
Your fix sadly don't work here.

[Serverfrog]

@cagataycivici The Problem is when you mixes routerLink items and non-routerLink items!

PrimeNG: 4.2.2
Angular 4.3.6

[akolybelnikov]

@bossqone, setting the activeItem to an empty object has worked for me! brilliant idea, regarding the fact PrimeNg's documentation has ne reference of using [activeItem] on the tabmenu :(

[chowdam]

based

Can you please post ur solution where to apply styling?