Skip to content

child/nested tab targeting can lead to loss of parent tab highlighiting  #55

@skidvd

Description

@skidvd

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions