Default selection/active when adding tabs

[sveilleux]

I don't if you guys ran into this issue but it bug me a bit. Sorry for my bad english in advance. I'm using ui-bootstrap-tpls-0.5.0.js

ctrl.addTab = function addTab(tab) {
    tabs.push(tab);
    if (tabs.length === 1 || tab.active) {
      ctrl.select(tab);
    }
}

in TabsetController line 2401.

What I understood it does is to select the first tab added. I don't understand the reason for this behaviour but it cause me a problem I'll try to explain.

I have an URL where the current selected tab is indicated as a parameter. What I do is loading the tab content data according to this parameter. The problem is that it always load the "first added tab", trigger the select event, load the potentially wrong data and then I receive another select event and then it loads the tab data I really want.

When I add my tabs to the scope I made sure to indicate active to true to the tab I want to be active. But this default selection is messing with the behaviour I want.

Could you guys explain me what's the point of it or explain me what I may be doing wrong please? Another thing I may tell you that is for your curiousity only is that I'm using angular ui-router state transition when selecting a tab so the problem is quite 'in your face'.

Thanks a lot :)

[ajoslin]

Hi @sveilleux, the logic behind this is that we always want at least one tab to be selected - as that's how tabs almost always work.

However it sounds like you have a legitimate use case .. hmm .. the only thing I can think of is to add a auto-select="false" option or something - but I don't really want to add another option.

[sveilleux]

Maybe it could use the disabled property. If disabled is true when loading the tab, don't select it?

[ajoslin]

That sounds reasonable - but also might break someone's current tabs.

@angular-ui/bootstrap wdyt? Do you think it matters to break this one little thing which possibly no one cares about?

It may mess someone up if they upgrade and had a disabled tab in their tabset that they do want active.

[pkozlowski-opensource]

Uhh, this is really a corner case :-) I think that the "proper solution" here is to use $evalAsync. What I mean is that during adding a tab we could "remember" a one to be selected and deffer the actual solution to a next $digest loop via $evalAsync. In fact this is something that @sveilleux could do in his code as well to achieve and effect of "select events queuing".

I'm not sure if we want to raise the complexity of the tabs directive to accommodate for this not super-common (IMHO) use-case.

[sveilleux]

Thanks for the help.

I really don't think I may be one of the few using the tabs like that. I mean, I want to do an action when the tab is selected. One doesn't have a choice of "filtering" unwanted select event in the case select event are triggered automatically by the library. You need a way to know what is happening since there is no way out of the box to know if the select event is generated by the library or by the user (with a click).

[artem-karpenko]

This seems to be already fixed in 0.10.0. I've stumbled on another issue in selection however - #1783

[chrisirhc]

Closing due to inactivity. Reopen if this is still an issue.