No underline on active link with multiple <md-tab-group> #7274

kevincaradant · 2017-09-23T17:58:24Z

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

The text was updated successfully, but these errors were encountered:

kevincaradant · 2017-09-24T18:10:30Z

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 · 2017-09-25T09:52:08Z

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

kevincaradant · 2017-09-25T11:07:14Z

@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 · 2017-09-25T11:48:42Z

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

crisbeto · 2017-09-25T17:45:32Z

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

julianobrasil · 2017-09-25T17:48:17Z

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

crisbeto · 2017-09-25T17:51:26Z

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

julianobrasil · 2017-09-25T22:30:47Z

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

crisbeto · 2017-09-26T05:44:17Z

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

julianobrasil · 2017-09-26T09:57:12Z

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 #5503.

Additionally, as mentioned above in #7274 (comment), 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 · 2017-09-26T10:15:30Z

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

amcdnl · 2017-10-03T14:51:39Z

Duplicate of #6478

kevincaradant · 2017-10-26T11:42:42Z

Any news about this issue ? :)

amcdnl · 2017-10-30T15:08:05Z

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

karolanet333 · 2018-04-27T14:28:35Z

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 · 2018-06-11T15:54:26Z

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 · 2018-06-20T09:59:11Z

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

BeatriceThalo · 2018-06-20T12:47:19Z

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

nickkhan · 2019-01-16T06:58:11Z

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 · 2019-05-15T20:24:44Z

Any update on this?

am-awais · 2019-06-17T10:32:30Z

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 · 2019-07-26T19:30:30Z

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

noahch · 2019-09-13T06:02:39Z

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 · 2020-01-10T05:15:08Z

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

As others have said, please fix this!

easycheese · 2020-03-28T20:36:09Z

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 · 2020-05-12T21:08:21Z

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.

Roman-Simik · 2021-05-11T11:33:46Z

4 years, 4 years, 4 years and still no fix -_-

roma2341 · 2022-07-29T16:15:11Z

realignInkBar call in ngAfterViewInit works fine for me.

Jadamae77 · 2022-10-27T17:45:51Z

Still no fix?

Veargan · 2023-08-14T11:56:13Z

My workaround for index mismatch which leads to wrong ink bar etc:

tabIndex: number; // bound to [selectedIndex] of mat-tab-group
@ViewChild(MatTabGroup, { static: false }) private matTabGroup: MatTabGroup;

setGroupIndex(): void { // call this function whenever you change your tabIndex
    if (this.tabIndex !== this.matTabGroup.selectedIndex) {
        this.matTabGroup.selectedIndex = this.tabIndex; 
    }
}

zarend · 2023-08-14T18:44:16Z

Hello @Veargan ,

Thank you for sharing a work-around. In order for the Angular team to take action on this issue, we would likely need a reproduction.

What version of Angular components does this issue happen for you on? And are you able to create a Stackblitz reproduction using a recent (ideally latest) version of Angular?

Best regards,

Zach

kevincaradant changed the title ~~No underline color on active link with multiple <md-tab-group>~~ No underline on active link with multiple <md-tab-group> Sep 24, 2017

josephperrott added the P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent label Sep 25, 2017

willshowell mentioned this issue Sep 26, 2017

tabs: nested tabs don't show selected md-tab #5503

Closed

josephperrott mentioned this issue Sep 26, 2017

md-tab-group does not initialize properly in a container with display: none #7006

Closed

amcdnl marked this as a duplicate of #6478 Oct 3, 2017

willshowell mentioned this issue Oct 30, 2017

tab doesnot get auto selected when we use multiple tab #8124

Closed

This was referenced Oct 31, 2017

[Tabs] Ink bar doesn't show if tabs are initially hidden #8149

Closed

Mat-tab animation is not working #8146

Closed

andrewseguin added the area: material/tabs label Jun 11, 2020

csisy-bt4w mentioned this issue Dec 4, 2023

bug(MatTabLink): Underline (MatTabInk) is missing if combined with route reuse strategy #28229

Open

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

No underline on active link with multiple <md-tab-group> #7274

No underline on active link with multiple <md-tab-group> #7274

kevincaradant commented Sep 23, 2017 •

edited

kevincaradant commented Sep 24, 2017 •

edited

julianobrasil commented Sep 25, 2017

kevincaradant commented Sep 25, 2017 •

edited

julianobrasil commented Sep 25, 2017

crisbeto commented Sep 25, 2017

julianobrasil commented Sep 25, 2017

crisbeto commented Sep 25, 2017

julianobrasil commented Sep 25, 2017 •

edited

crisbeto commented Sep 26, 2017

julianobrasil commented Sep 26, 2017 •

edited

julianobrasil commented Sep 26, 2017 •

edited

amcdnl commented Oct 3, 2017

kevincaradant commented Oct 26, 2017

amcdnl commented Oct 30, 2017

karolanet333 commented Apr 27, 2018

BeatriceThalo commented Jun 11, 2018 •

edited

Shreedevi-G-Rao commented Jun 20, 2018 •

edited

BeatriceThalo commented Jun 20, 2018

nickkhan commented Jan 16, 2019

francovp commented May 15, 2019

am-awais commented Jun 17, 2019

nicktobolski commented Jul 26, 2019

noahch commented Sep 13, 2019

stephen1807 commented Jan 10, 2020

easycheese commented Mar 28, 2020 •

edited

jacobweber commented May 12, 2020 •

edited

Roman-Simik commented May 11, 2021

roma2341 commented Jul 29, 2022 •

edited

Jadamae77 commented Oct 27, 2022

Veargan commented Aug 14, 2023 •

edited

zarend commented Aug 14, 2023

No underline on active link with multiple <md-tab-group> #7274

No underline on active link with multiple <md-tab-group> #7274

Comments

kevincaradant commented Sep 23, 2017 • edited

Bug, feature request, or proposal:

What is the expected behavior?

What is the current behavior?

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

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

Is there anything else we should know?

kevincaradant commented Sep 24, 2017 • edited

julianobrasil commented Sep 25, 2017

kevincaradant commented Sep 25, 2017 • edited

julianobrasil commented Sep 25, 2017

crisbeto commented Sep 25, 2017

julianobrasil commented Sep 25, 2017

crisbeto commented Sep 25, 2017

julianobrasil commented Sep 25, 2017 • edited

crisbeto commented Sep 26, 2017

julianobrasil commented Sep 26, 2017 • edited

julianobrasil commented Sep 26, 2017 • edited

amcdnl commented Oct 3, 2017

kevincaradant commented Oct 26, 2017

amcdnl commented Oct 30, 2017

karolanet333 commented Apr 27, 2018

BeatriceThalo commented Jun 11, 2018 • edited

Shreedevi-G-Rao commented Jun 20, 2018 • edited

BeatriceThalo commented Jun 20, 2018

nickkhan commented Jan 16, 2019

francovp commented May 15, 2019

am-awais commented Jun 17, 2019

nicktobolski commented Jul 26, 2019

noahch commented Sep 13, 2019

stephen1807 commented Jan 10, 2020

easycheese commented Mar 28, 2020 • edited

jacobweber commented May 12, 2020 • edited

Roman-Simik commented May 11, 2021

roma2341 commented Jul 29, 2022 • edited

Jadamae77 commented Oct 27, 2022

Veargan commented Aug 14, 2023 • edited

zarend commented Aug 14, 2023

kevincaradant commented Sep 23, 2017 •

edited

kevincaradant commented Sep 24, 2017 •

edited

kevincaradant commented Sep 25, 2017 •

edited

julianobrasil commented Sep 25, 2017 •

edited

julianobrasil commented Sep 26, 2017 •

edited

julianobrasil commented Sep 26, 2017 •

edited

BeatriceThalo commented Jun 11, 2018 •

edited

Shreedevi-G-Rao commented Jun 20, 2018 •

edited

easycheese commented Mar 28, 2020 •

edited

jacobweber commented May 12, 2020 •

edited

roma2341 commented Jul 29, 2022 •

edited

Veargan commented Aug 14, 2023 •

edited