Option to have no tab selected in mat-tab-group

[rachelrosengoogle]

Feature Description

Allow MatTabGroup to have a state where no tab is selected/active. The current behavior always has a tab selected/active.

Currently, MatTabGroup has a selectedIndex property with type number | null, but setting it to null does not unselect any of the tabs; the first tab is selected/active by default. I think that it would be more intuitive if setting selectedIndex to null unselected all of the tabs.

Use Case

Adding this feature would allow for a tab group to be in a collapsed state where no tab is selected and only the header is visible. Clicking one of the tabs in the header would then set the selected tab, the current behavior. This would provide more flexibility in using tabs for a layout.

[crisbeto]

From what I can tell we have all the logic in place to handle a tab not being selected, but there's some clamping that's preventing it from ever receiving an invalid index. Changing the type to number | null might end up breaking people that expect it to always be a number, but we could allow something like -1. What do you think @andrewseguin?

[andrewseguin]

This doesn't seem to be captured in the material design spec, and I'm not sure I can easily visualize how the tabs should animate in when a selection is made.

Can you describe more what you mean for using the tabs for a layout? Would the tab nav bar work better for this case?

[andrewseguin]

Since it looks like this is a legitimate use of tabs from an accessibility standpoint, we can put this on our backlog.

[rachelrosengoogle]

Thanks for the quick response. I asked our team's designer to put together an example of what this looks like without any of our app-specific details, and will get back with that soon.

Right now, we've done a visual hack of the CSS paired with an *ngIf to create the illusion of an unselected tab. For accessibility, we're using the following workaround: For visually unselected tabs, we add "Collapsed. Click to open" to the mat-tab-label. It's not great, because ChromeVox still says "tab selected. 1 of n" for the first tab even if the content is hidden and the tab is not visually selected, but that was the best I could come up with.

[rachelrosengoogle]

Here's the gif our designer @thosseinipour gave for the example of a "no tab selected" state. This mock has an open/close animation, which I think would be optional for the purposes of adding this feature, but the most important thing here is the "collapsed" state for when no tab is selected, which I think is what the earlier question was asking about.

[mdarefull]

I agree with the OP.

My use case is that I have a page that shows some entity data, there is a lot of information, most of them are expensive to get. The user is usually interested on only a subset of the information at a time.

The design we came up with is one where the basic entity information is displayed at the top of the page and the additional information is displayed below grouped by tabs. We would like to have an initially collapsed status so that if the user is not interested on seeing any tab content, we don't perform an expensive request to display it.

[angular-robot[bot]]

Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.

Find more details about Angular's feature request process in our documentation.

[angular-robot[bot]]

Thank you for submitting your feature request! Looks like during the polling process it didn't collect a sufficient number of votes to move to the next stage.

We want to keep Angular rich and ergonomic and at the same time be mindful about its scope and learning journey. If you think your request could live outside Angular's scope, we'd encourage you to collaborate with the community on publishing it as an open source package.

You can find more details about the feature request process in our documentation.

[narayansinghjai]

@andrewseguin code: <mat-tab-group (selectedTabChange)="selectedYearHandler($event)" [selectedIndex]="selectedYearIndex"> <mat-tab *ngFor="let option of yearList">

{{option}}

public yearList: number[] = [2021, 2022, 2023];

by default on ngonit it is selecting the first index i do not want to select the first index by default

if i pass selectedYearIndex to 1 it is selecting 2022

but when passing selectedYearIndex to -1 it selects the 2021

the expected behaviour should be it should not select any of the tabs right?

kindly provide solution for this prevent selecting of first index if i pass selectedYearIndex to -1

[zarend]

I don't think that having no tab selected is part of the ARIA interaction for single-select tabs.

[mcrtricolor]

I also would like this functionality, thanks!