Material: md-tabs - make an option to not default selected tab index to 0

[DmitryEfimenko]

Hello,

Currently if tab index is not specified it'll automatically set it to 0, which will trigger tab's content being loaded.
This is not always desired behavior, especially when content is loaded from a remote source.
Perhaps it would make sense to create a new attribute on <md-tabs>: md-no-preload or md-no-default.
In case such attribute is present no tab will initially be selected.

[robertmesserle]

This is not supported according to tabs spec.

[DmitryEfimenko]

@robertmesserle
I've read the specs and didn't see anywhere where it says that first tab should be selected by default. It was an assumption made by angular material team.

This really should be reconsidered.

[robertmesserle]

@DmitryEfimenko More specifically, there is no support for a use-case for tabs in which no content is selected. We asked the Material Design team directly for confirmation.

[robertmesserle]

@DmitryEfimenko What is your specific use-case? With more details, I would be happy to look into potential solutions for your problem, or we could reconsider with more information.

[DmitryEfimenko]

@robertmesserle I'd be glad to share.

I'm building a page, which will have tabs dynamically generated based on remote source. The number of tabs and their names is unknown initially. Most likely this number will be relatively high ( >20 ).

Each tab can potentially have a lot (!) of statistical information.
I cannot initially know which tab user will want to look at. They are not in any particular order.
Showing information from the very first tab automatically means taking user's attention away from the decision of which tab needs to be selected. His attention will flow away into the content of the first tab.

The main reason for my request is to be able to guide user and keep him concentrated on the selecting things in order.

One may argue that tabs are not be the best control for this, but their scrolling feature is so convenient for my use case - it only makes sense for me to use it.

[DmitryEfimenko]

@robertmesserle Any additional thoughts on this?

[robertmesserle]

I'm going to re-open this and put it in Backlog for now. It's a very specific use-case, but I think it is one that we should look into ways of supporting.

[ThomasBurleson]

@robertmesserle - From the UX Design Team

If this functionality is needed, the zero-state experience should be treated differently. Some options include not initially showing any tabs and selecting from a menu or list than then show tabs. Another option could be to have a temporary landing tab that is empty or has instructions.

[DmitryEfimenko]

First option (not showing any tabs at the beginning) does not makes sense to me at all. In my scenario the tabs _are_ the menu. If there is another menu that'll be in charge of showing the tabs then there is unnecessary duplication of content on the page.

The second option sounds more interesting. However, having yet another (default) tab for instructions when there are already plenty of tabs is not a good idea. Perhaps specifying content that should show up when no tab is selected is the solution. This way there are no extra tabs and there are instructions on what to do.

[bonatoc]

I would have no tabs until all data promises are resolved.
md-tabs would still display tab 0 by default in the DOM, with a "please wait" spinner.

When data promises are resolved, switch programmatically to tab 1, and hide tab 0(ng-hide="data.tabs"), or better, remove it (ng-if="!data.tabs") from the DOM.

You could also play with css layers (z-index) and provide your "default tab" in a div that gets masked by tab content coming on top of it. Tab content would have an opacity of 0, then transition to opacity 1 once the tabs data is retrieved.

[DmitryEfimenko]

@bonatoc Thanks for the ideas. However in the scenario that I'm describing there are no data promises until a certain tab is clicked. So the tab's content is only loaded when the tab is clicked.

Playing with z-index sounds hacky. I think there should be a legitimate straight forward solution for the issue.

[jpike88]

There are perfectly legitimate cases for disabling all tabs, as on larger screens they may form just one minor component of the UI.

This is a use case if you need convincing and using the tabs is a great way to provide a binary choice while making it obvious which one is selected, or whether either are relevant to begin with:

[jpike88]

Looks like setting md-selected to -1 works

[jpike88]

^ that should be probably be updated in documentation

[jpike88]

And i'm working too hard I just realised what I'm saying has nothing to do with the thread :/

[bonatoc]

Oh well :-) Interesting idea, tabs for binary choices. I'm not sure the tabs directives as they are allow for a custom ng-model, which could be required for forms.

[DmitryEfimenko]

@jpike88 I agree, this is a valid use case.
@bonatoc md-selected value can always be bound to the ng-model on a hidden input:

<input type="hidden" name="tabValue" ng-model="selectedIndex"  />
<md-tabs md-selected="selectedIndex">
    ... tabs
</md-tabs>