[Tabs] Label has focused style after clicking

[daniele-zurico]

The first time that I load the tabs by default is set the first tab correctly however the opacity of the first tab is not set to 1. After that I click on it the opacity change in the correct way.
Is that an Issue or I'm missing something?

After I click

<md-tab-group> <md-tab> <ng-template md-tab-label> All Orders <div class="bubble" #allOrdersBubble >{{allOrdersCount}}</div> </ng-template> <iag-all-orders (onPickup)="refreshItems()"></iag-all-orders> </md-tab> <md-tab> <ng-template md-tab-label style="opacity: 1"> My Orders <div class="bubble" #myOrdersBubble>{{myOrdersCount}}</div> </ng-template> <iag-my-orders (onRefresh)="refreshItems($event)"></iag-my-orders> </md-tab> </md-tab-group>

[donroyco]

Can you please use the issue template and provide a Plunker? Thanks!

[andrewseguin]

I believe you are referring to the tab label's focus, which changes its opacity and background to show focus. This is useful for knowing what tab label is focused when navigating via keyboard.

[daniele-zurico]

@andrewseguin exactly if you look on the demo: https://material.angular.io/components/tabs/overview
you see the line blu under the first tab but if you click on the first tab again you see that the word overview became black (focused)...
My opinion is that the label should be already focused

[andrewseguin]

I'm not sure it's clear, but by "focused" we are referring to the browser's focus on the element, which is very relevant to keyboard interaction and accessibility. We won't be able to support automatic focus of the first tab lab on page load.

[daniele-zurico]

But it's inconsistent! If the first tab is selected by default it should have the same look and feel of clicked

[amcdnl]

The focus state represents when the user has actively focused that individual component. By default, the focus state goes top to bottom so depending on where your tabs are it, it doesn't make sense for the tabs to steal the focus plus if there are multiple tabsets on the screen which tab should you auto focus?

a11y also states that there is some sort of indication that the focused item is focused thus the style difference.

@kara - I believe given all this, it is functioning as designed.

[ruchit07]

I was facing the same problem. @daniele-zurico You are correct. Selected tab is not showing background color and opacity 1. But when we clicked on that tab, it's showing.

But you can apply whatever design you want to apply on selected tab on class "mat-tab-label-active".

.mat-tab-label-active{
background-color: #3398dc !important;
opacity: 1 !important;
}

This might help!

@ruchit07 what I was looking for!

[sebastiandenis]

The solution provided by @ruchit07 works ok when you click on tabs. But if you go to next tab without clicking on it (swipe right) you need to add also:

 .mat-tab-link:not(.mat-tab-label-active):focus {
  background: none !important;
}

Do it only if you want to remove background when a tab is focused - so you don't have an inactive tab with a different background than other inactive tabs.

[nikitakuz]

I don't like using !important if I can avoid it. My issue is that the focus would remain after the tab is programmatically changed causing a confusing background on an inactive tab but a line under the active tab. I found the following works for me.

.mat-tab-group.mat-primary .mat-tab-label.cdk-focused:not(.cdk-mouse-focused):not(.cdk-tab-disabled):not(.mat-tab-label-active) {
  background: none;
}