Components: No underline on active link with multiple <md-tab-group>

[kevincaradant]

Bug, feature request, or proposal:

Bug
Plunk: https://plnkr.co/edit/qyKDATOdTb0msRnYjbbe?p=preview (thanks @julianobrasil)

Use multiple <md-tab> and <md-tab-group> imbricated => lost the underline on active <md-tab>

This is an example:

<div fxLayoutWrap fxLayoutGap="10px" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center start">
  <md-tab-group class="header-tab-admin" fxFlex="75">
    <md-tab label="{{'COMMONS.FAMILY.FAMILY' | translate}}"></md-tab>
    <md-tab label="{{'COMMONS.USER.USER' | translate}}"></md-card>

    <md-tab label="{{'COMMONS.HOS.HOS' | translate}}"> // I select this tab
      <md-tab-group class="header-tab-2-sub-admin">
        <md-tab label="{{'COMMONS.SEARCH2' | translate}}"> // Here NO UNDERLINE COLOR UNTIL I CLICK ON IT
        </md-tab>
        <md-tab label="{{'COMMONS.CREATE2' | translate}}"></md-tab>
      </md-tab-group>
    </md-tab>
  </md-tab-group>
</div>

Picture:

What is the expected behavior?

An underline on the active item

What is the current behavior?

No underline for the active tab. See the snippet code mentioned before.

What is the use-case or motivation for changing an existing behavior?

I need to have two <md-tab> and <md-tab-group> imbricated for my needs

Maybe I don't use them correctly. I let you to say me about it.

Thank you in advance

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 4.4.3
OS: Windows 7 Pro 64 bits
TS: 2.4.1
Material: 2.0.0-beta.11
Browser: Chrome V60

Is there anything else we should know?

Nothing else

[kevincaradant]

If I do a zoom- or zoom+ on the page or if I open the console of chrome, the underline appears again.

Is it a kind of focus problem maybe ?

PS: I tried with the latest version of Angular and Material, it's the same behavior

[julianobrasil]

Plunk to help describing it: https://plnkr.co/edit/qyKDATOdTb0msRnYjbbe?p=preview

[kevincaradant]

@julianobrasil , Thank you to have made the plunk :) At the begin, I didn't read correctly, I believed that you asked to me to do it

[julianobrasil]

OK, copy the plunk link to the issue body description.

[crisbeto]

I'm having a hard time reproducing it from the provided Plunkr. Both the top and bottom levels of tabs are underlined.

[julianobrasil]

Maybe related to SO? I'm running it on a Windows 10 system, Google Chrome:

[crisbeto]

I'm running it on Windows with Chrome 60 as well.

[julianobrasil]

@crisbeto, my Chrome: Versão 61.0.3163.100 (oficial version) 64 bits

[crisbeto]

I just updated to Chrome 61 and I'm still not seeing it.

[julianobrasil]

I checked it out also in IE11 and Edge. I've changed the screen resolution to 3 different values (1024x768, 1280x1024 and 1920 x 1080) looking for any situation where the problem didn't occur. Unfortunately, I saw the problem in each case. 😞

More info: this is not a new issue. This is a dupe of https://github.com/angular/material2/issues/5503.

Additionally, as mentioned above in https://github.com/angular/material2/issues/7274#issuecomment-331728260, if you change the browser zoom, the underline appears (the problem seems to be with the initial animation in hidden tabs):

@kevincaradant, as a workaround, you can show the inner tab-group just when the tab is selected:

<md-tab-group [(selectedIndex)]="index">
  <md-tab label="label 2"></md-tab>
  <md-tab label="label 3"></md-tab>

  <md-tab label="Select Me">
    <md-tab-group *ngIf="index === 2">
      <md-tab label="Problem"> 
        I'm the content of tab "Problem". Look as how my header is not underlined 
      </md-tab>
      <md-tab label="label 1"></md-tab>
    </md-tab-group>
  </md-tab>
</md-tab-group>

[julianobrasil]

I think the root case is the animations being broken inside a tab when it is not initially selected: #5269

[amcdnl]

Duplicate of #6478

[kevincaradant]

Any news about this issue ? :)

[amcdnl]

PR for fix is in queue, some other PRs need to get merged before it can go in though.

[karolanet333]

Hello!! I have the same issue. I'm experiencing this on a MacBook. Soy this issue is not relative to the SO as was suggested. I'd really appreciate if you could fix it. Thank you!!

[BeatriceThalo]

A workaround: whenever the outer mat-tab-group changes its selectedIndex to unhide your inner mat-tab-group, call window.dispatchEvent(new Event('resize'));

[Shreedevi-G-Rao]

Thanks, it will work in chrome, but not in IE11. Any workaround which will work for both browsers?, Thanks in advance.

[BeatriceThalo]

@Shreedevi-G-Rao True, IE needs a different method of creating the event. See this SO answer

[nickkhan]

A workaround: whenever the outer mat-tab-group changes its selectedIndex to unhide your inner mat-tab-group, call window.dispatchEvent(new Event('resize'));

I am using @Input from parent mat-tab-group to pass the selectedIndex to child component, seems to work well.

[francovp]

Any update on this?

[am-awais]

please fix that bug for God sake,
Mostly forums of angular material were ignored or just said its the copy of this copy of that, and no one gives the correct answer I don't know why the community is ignoring these major open issues.

[nicktobolski]

Also having this issue exactly. Wasted too many hours try to fix/work around it.

[noahch]

You can add the mat-tab-group as ViewChild and call realignInkbar() on it.
Example:
x.component.html
<mat-tab-group #mainTabGroup>
x.component.ts
@ViewChild('mainTabGroup', {static: false}) mainTabGroup: MatTabGroup;
someFunction() { this.mainTabGroup.realignInkBar(); }

[stephen1807]

@noahch Thanks a lot! You saved me a lot of hours.

As others have said, please fix this!

[easycheese]

FYI lazy loading of tabs gets rid of this problem. Example nested tab group in tab 3

<mat-tab-group mat-align-tabs="center" selectedIndex="0">
  <mat-tab label="Tab1">
    <p>
       Tab 1 details
    </p>
  </mat-tab>
  <mat-tab label="Tab2">
    <p>
       Tab 2 details
    </p>
  </mat-tab>
  <mat-tab label="Tab3" >
    <ng-template matTabContent>
      <mat-tab-group mat-align-tabs="center" selectedIndex="1" >
        <mat-tab label="Tab3-1">
          Test3-1
        </mat-tab>
        <mat-tab label="Tab3-2">
          Test3-2
        </mat-tab>
      </mat-tab-group>
    </ng-template>

  </mat-tab>
</mat-tab-group>

[jacobweber]

If anyone needs help reproducing this, I'm happy to do so. Would love to get it fixed.

@noahch When are you calling realignInkBar? It only seems to work for me if I call it in ngAfterViewChecked, but I'd rather not do that every time.