Skip to content
This repository has been archived by the owner on May 29, 2019. It is now read-only.

ub-tabaset does not select most recently added tab #5656

Closed
brijs opened this issue Mar 19, 2016 · 10 comments
Closed

ub-tabaset does not select most recently added tab #5656

brijs opened this issue Mar 19, 2016 · 10 comments

Comments

@brijs
Copy link

brijs commented Mar 19, 2016

Bug description:

uib-tabset.active becomes null after addTab calls, when I attempt to add a new tab, and also make it the active tab

See https://plnkr.co/edit/sJ6aNyPbN609toafgHx2?p=preview

HTML

<button ng-click="vm.addItem()">Add Tab</button>

 <uib-tabset active="vm.activeTab">
    <uib-tab  ng-repeat="t in vm.tabs track by $index">
      <uib-tab-heading>{{t.name}}</uib-tab-heading>
      <div>{{t.name}} Content</div>
    </uib-tab>
 </uib-tabset>

script.js

    vm.tabs = [];
    vm.activeTab = -1;
    vm.counter = 0;

    vm.addItem = function() {
      vm.tabs.push({
        name: "Item " + vm.counter
      });
      vm.activeTab = vm.counter; // select the most recently added item
      vm.counter++;
    }

Angular: 1.5.1
UIBS: 1.2.4

@lunhat79
Copy link

It is not a bug. When you add a tab. It will render the view, and in the mean time the active being updated.
So the code
vm.activeTab=vm.counter;
Do not effect.

You have to let the render view finish its job first. Then set the vm.activeTab
Ex:
Replace the code
vm.activeTab=vm.counter;

By:
var curIndex = vm.counter;
$interval(function() {
vm.activeTab = curIndex;
}, 0, 1);

That'll work

@danpolites
Copy link

I was having the same issue and lunhat79's solution worked for me. What do you think about adding an example to the docs that show how to programmatically add tabs? Two flavors would be ideal, one with a button as being used here and one using the last tab as the trigger to add additional tabs.

@wesleycho
Copy link
Contributor

Closing as a usage issue.

@lunhat79
Copy link

It is just the MVVM working flow. I am facing the problem as
#5654
But I have figured out an unoffical way for solve this. But we could make it better

@brijs
Copy link
Author

brijs commented Mar 19, 2016

@lunhat79 , thanks, yea I ended up with a similar workaround as you suggested above, and that works for me. I still think it is a bug though @wesleycho . I am not a directives expert, but in this specific case, it seems that we always want to trigger uibTab.addTabs before triggering tabset.active's watch listener, instead of being the other way round.

Currently, tabset.active's watch listener always gets called first (before ngRepeat / uibTab's:link:addTab), and when the new specified active index is out of bounds (compared to the existing tabset.tabs array), it is then reset to null; see src/tabs/tabs.js#L28.

I am guessing that this behaviour (bug) was introduced when the active attribute was moved up (& out of tab) into tabset.

@jmjcando
Copy link

@lunhat79 , thanks for the workaround. I prefer to use $timeout in stead of $interval as I only need to delay the execution just once. Not a big deal, I guess.

Ex:
Replace the code 
vm.activeTab=vm.counter;

By:
var curIndex = vm.counter;
$timeout(function() {
   vm.activeTab = curIndex;
}, 0);

I agree that either this should be classified as bug and need to fix it, Or we should have updated example which mentions this usage (workaround)

@khouleBousso
Copy link

Thanks everybody. You save my day.

@lunhat79
Copy link

Just remark:
The current UITab is not fully support for dynamic tab generation.
So be wise to use the UITab with ng-repeat.
you can reference to
#5654
Although It is closed as won't fixed but you can learn from the issue

@MilknCookie
Copy link

MilknCookie commented May 19, 2016

Hi,

This got close, but I really don't like the solution. It's definitely not clean because it's a race condition you are trying to win with an interval or timeout.

edit :
I ended up using bootstrap native tag like this :
<div role="tabpanel" class="tab-pane" ng-class="{active: graphsData.activeId == idGraph}" ng-repeat="(idGraph, graph) in graphsData.graphs">

with a controller that manage my activeId. I can now add dynamically tab and set them active in my angular code.

@rdutta845
Copy link

rdutta845 commented Mar 26, 2018

<uib-tab  index="$index+1" ng-repeat="t in vm.tabs track by $index">

add index of each tab inside the ng-repeat
do this your code will work properly

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

8 participants