-
Notifications
You must be signed in to change notification settings - Fork 57
Description
I have a set of tabs with one tab containing another set of child/nested tabs. In my application, the child tabs can also be disabled via the associated attribute (unfortunately, do to other constraints preventing me from upgrading bootstrap in my application, I am not able to upgrade beyond v1.5 of ui-router-tabs at present).
I have a plunker demonstrating the issue at: http://plnkr.co/edit/UUcHHxlhPBbaWrMO6Srb?p=preview
In the plunker, Tab 3 is the one that has the child tabs and demonstrates the issue. The first child Tab (child 1) is disabled. In order to avoid landing the user that clicks on Tab 3 on a blank Tab, I set the Tab 3 route to 'main.tab3.child2' to target the first enabled tab and land them on the Child 2 tab instead. This works correctly and does maintain the correct Tab 3 parent tab highlighted.
However, if the user subsequently clicks on Child 3, the Tab 3 parent highlighting is lost. This is the issue I am trying to avoid (loss of parent tab active state highlighting).
If the Tab 3 route is only set to 'main.tab3', then the parent highlighting is not lost. However, the user will land on a blank Child 1 with it highlighted even though it is disabled.
Is there a workaround or better approach to ensure the user does not land on the blank Child 1/disabled tab and to also maintain the correct parent tab highlighting?
Thank you in advance for your help.