-
Notifications
You must be signed in to change notification settings - Fork 4.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Tabmenu - class ui-state-active is not set correctly on <a> and <li> elements when routing with guards #4197
Comments
Is this fixed already? Or a workaround while this is being fixed? I have the same issue with Tabs when traversing to a route with multiple Guards. It ends up marking previously active tab's UPDATE: I think my issue is different from this, here is a plunker forked from above demonstrating the issue. I am able to reproduce this without guards also: UPDATE 2: I think this is fixed by this fix. I copied the teplate for http://plnkr.co/edit/rNgUcq37QmBmOxyh7KN8?p=preview
|
@sabithpocker just to clarify, the problem mentioned here (my issue described above) is not fixed. |
If your using canActive and canDeactivate guards and comment line 62 https://github.com/primefaces/primeng/blob/master/src/app/components/tabmenu/tabmenu.ts , then subsribe to this.router.events.subscribe( event => if( event instanceof NavigationEnd) this.activeItems = yourMenuitem[intex]) will work |
A quick workaround is to store the MenuItem from the last successful navigation. Then set the activeItem back to the stored item whenever there is a NavigationCancel event. The menu item will be selected briefly and then snap back to the previous item but I don't consider that a problem.
|
I’m unable to replicate with the latest PrimeNG (you can check at https://www.primefaces.org/primeng/#/tabmenu/info). If the issue still persists with the new version please create a new issue with our stackblitz template. |
This issue is still present in the 9.0.5 PrimeNG with Angular 8. When using guards with tabmenu, if the navigation is not successful, two tabs remain active. |
I'm submitting a ...
Plunkr Case (Bug Reports)
http://plnkr.co/edit/6QjDRAyY6u72olX7qPXS?p=preview
Current behavior
When routing with guards (CanActivate, CanDeactivate) active items of tabmenu getting out of sync with router.
Maybe other menu components are affected as well.
Expected behavior
Active classes should always reflect routers current route/url.
Minimal reproduction of the problem with instructions
In plunkr above:
<a>
-element of tab 2 and<li>
-element of tab 3 now have class 'ui-state-active'ui-state-active classes should only be added to tab 2.
What is the motivation / use case for changing the behavior?
Users should see correct activated tab corresponding to the current url.
Please tell us about your environment:
Windows 10
Angular version:
4.4.4
PrimeNG version:
4.2.2
Browser:
Chrome 61
The text was updated successfully, but these errors were encountered: