Tabs - Dynamically created tabs do not respond to "select" or execute it immediately on creation

[epitka]

If one creates a dynamic tab like this

 $scope.tabs = [{ title: "Profile", content: "app/insured/profile/inProfile.html",  select: activateTab(), name: "profile" }, { title: "Coverage", content: "app/insured/profile/inCoverage.html", select: activateTab(), name: "coverage" }]

then function specified for "select" will execute right away while tabs are being constructed. I tried also using just "activateTab" without parenthesis and that does not do anything. You can try it also just using a plunker supplied with tabs example and try to put select for dynamic tab 1

{ title:"Dynamic Title 1", content:"Dynamic content 1", select:onSelect() },

 function onSelect(){
    console.log("onSelectCalled");
    alert("onSelectCalled");
  }

and you will see the issue. Also setting the "active" attribute to true from javascript code does not do anything either. My markup for the tabs is like this

  <tabset >
            <tab data-ng-repeat="tab in tabs" heading="{{tab.title}}" active="{{tab.active}}"  class="fullwidthtabs">
               <div ng-include="tab.content"></div>
            </tab>        
        </tabset>

[epitka]

Kept playing with this and figured out following. One cannot define select as option but rather bind it the markup. So my markup now looks like this

<tab data-ng-repeat="tab in tabs" heading="{{tab.title}}" active="{{tab.active}}" select="activateTab(tab.name)"  class="fullwidthtabs">
               <div ng-include="tab.content"></div>
            </tab>  

However I still have an issue with tab not being shown as selected :(

[chrisirhc]

Have you tried doing active="tab.active" ?

If that doesn't work, please post a Plunker demonstrating this issue so we can look into this further.

[epitka]

Yes, I figured that one out :), however one more issue that I am trying to figure out is that it selects the first tab as active even when all tabs are set initially to be inactive. In my setup each tab has its own controller. I have a requirement that I need to link to specific tab based on the user selection on the previous page, and make that tab active. So, I set them all to active="false", then wait for all controllers to emit a message that they are created, and then I match the routeParam with tab name and broadcast a message to activate tab, which in turn runs a fetch method and selects the tab. But because it defaults to the first tab as being active if none are made active, I end up broadcasting the message twice, once for the first tab, and once for the one that has been selected. However, if I set
active to the tabname being passed in route params, I end up broadcasting message twice for the same tab. So, my questions is basically, why make any active if I specifically set them all to inactive.

[chrisirhc]

The reason this is done is that this is usually the desired behavior of tabs. If no tab is selected, the first one is picked to be active. I'm on the fence on this behavior. Some people consider the state where no tabs are selected to be invalid.

This requires more feedback from community.

[pkozlowski-opensource]

Hmm, I don't think we should allow a state where there is no active tab, at lest this is my point of view.

More generally, those repeated issues with tabs active property make me think that maybe we've got the API wrong? Maybe, instead of having an active flag on each tab, we should have something like "active index" on the tabset level? Same applies to accordion. WDYT?

[bekos]

+1 to move the active property to tabset.
I don't think the same applies to accordion, since it's pretty valid to have none, one or more open at the same time.

[pkozlowski-opensource]

Ah, you are right @bekos, I've forgotten that we've added ability to have multiple groups open.

[chrisirhc]

I agree with switching the implementation to keeping the active tab index at the tabset level.

I think the most common use case of the active flag at the tab level, is the ability for a tab to find out whether it is currently active. I don't think it is as likely that a tab's contents or controller would set itself to be active.

We could instead use use getters and setters for changing the active tab on the tabset controller. Similar to the ngForm directive's name attribute, we can publish the tabset controller into the scope for tabs to set/getActiveTab if an attribute is set. And perhaps add a new onActive attribute which takes a function (an '&' attribute) and fires on activation of a new tab.

(There are multiple suggestions here, but they're all for consideration individually, not pushing for all or none.)

[JonnyGibson]

I am also having this issue. I create the Tabs with ng-repeat, and each tab has a select assigned to it, as soon as the 2nd tab is created it calls the select, as it assumes the first tab should be active, when in fact its the third (as yet un-rendered) tab i want to have as active. This means the functions is called twice.

[neekey]

any progress on this issue?

[wesleycho]

Closing, as this looks like a non-issue.

For progress on fixing the API, keep an eye on #4836.