uib-tabset: problems when dynamically adding and removing tabs

[bolemeus]

Bug description:

I have a uib-tabset on my site where there is a fixed first tab, from where I can open additional tabs. These additional tabs can be closed. It appears uib-tabset messes up the id's of these new tabs.

The index is set with index = "$index+1", much like the example in the documentation. But it seems that this index is completely ignored, or it is used in some way that I don't understand. When removing tabs the $index changes, but the active tab index's do not. Because of this it can happen that you have an active set of tabs with the following index's.

[0, 1, 3, 7, 8]

This would not be such a big deal, but what happens when you add more tabs is more worrying. You'd get the following id's after adding a couple of new tabs.

[0, 1, 3, 7, 8, 5, 6, 7, 8]

You can get duplicate index's this way, resulting in buggy behaviour.

It's probably best to just show the plunkr. See below...

Link to minimally-working plunker that reproduces the issue:

http://plnkr.co/edit/RgWAhoZT6F6ORDcqxz6g?p=preview

Version of Angular, UIBS, and Bootstrap

Angular: 1.4.7

UIBS: 1.2.1

Bootstrap: 3.3.1

[wesleycho]

This is because of the lack of use of track by - see here for an example.

[bolemeus]

Hello wesleycho,

It seems the track by doesn't fix the problem. The example you posted still exhibits thesame problems

[wesleycho]

I was not able to reproduce it - can you give exact reproduction steps?

[eddiriarte]

Hi @wesleycho, im also still have problems with dynamic tabs

http://plnkr.co/edit/fKrgrC1hA4PmU7d3xuY4?p=preview

[bolemeus]

Hi @wesleycho, Sorry for the late reply.

It's possible to reproduce the error in the following steps

1. Add a new tab (you now have 3 tabs with the following id's: 0, 1, 2)
2. Remove the second tab (you now have 2 tabs with the following id's: 0, 2; This should be 0, 1)
3. Try to add a new tab. It's impossible because a new tab with id = 2 is trying to be added. You'd get tabs with the following id's: 0, 2, 2.

Additional weird behaviour: 4. Try to add a couple of other new tabs. It won't work. 5. Remove the second tab and all the other new tabs suddenly show up, but some seem to have a duplicate body. This is because some tabs have thesame id.

[bolemeus]

I think this issue has been prematurely closed, and because it is closed I think it will dissapear in the background. Can someone reopen it?

[wesleycho]

Opening so more research can be done - not sure this is a legitimate issue, but I will look into this sometime in the upcoming week.

[bolemeus]

thanks

[mcfdez]

I have the same problem here: http://plnkr.co/edit/02Lll7oPYyvAxcKu5GkK?p=preview

[icfantv]

@wesleycho i think you forgot to reopen this.

[nicolejohnson]

Has anyone found a fix for this? I am having the exact same issue.

[groberts9]

+1

Exact match to my experiences, when using $index to assign the index attribute value. Basically as a result of this highlighted issue, the UIBS dynamic tabs feature is effectively unusable. For those that need it, this is a major failure.

The documentation states index attribute needs to be unique, so I tried using my own generated unique ids; however although this works better, I found that for one of my tab sets the watcher on the active field eventually ignored my changes. As the implementation worked fine for one of my tab sets, I would hope that it is possible to solve the problem, but I've run out of time, as my primary task was upgrading to angular 1.5.x. I would not discourage anybody from attempting to find their own solution. My personal requirements are to allow tab deletion and move tabs between tab sets, selecting as active the moved tab.

Version of Angular, UIBS, and Bootstrap

Angular: 1.5.8

UIBS: 2.1.2

Bootstrap: 3.2.0

[MikaelLambert]

I've fixed this issue using a unique incrementing index as seen in the plunkr. http://plnkr.co/edit/FUBhaIawQbDORAbDbQZe?p=preview

Additionally, I believe I've fixed @groberts9's issue by using the workaround mentioned here (also included in the plunkr): https://github.com/angular-ui/bootstrap/issues/5656#issuecomment-203513128

@wesleycho, my opinion of these bugs and all of the other dynamic tab related bugs is that they should probably be fixed by ui-bootstrap. Hopefully someone submits a PR, or you guys decide to work on dynamic tabs more.

[phillip-haydon]

Dynamic tabs is horribly broken right now.

When you remove all tabs by setting the array of an ng-repeat to null it causes select to be called on each tab which is super super silly. The library is trying to be too smart by assuming that you want to select a different tab to have no unselected tab.

This results in lots of api calls to be started to grab templates or initialize the content of a tab.

---

The documentation is also not reflective of reality, it says you have access to $event in both select/deselect but you don't.

[phillip-haydon]

Ah, it raises the event passed to select/deselect incorrectly, it just assumes you want to pass nothing, or $event. Doesn't let you pass more than 1 argument.

I would go fix this and send a PR but it looks like this project is dead in favor of the Angular 2 variant.

Sad times to see projects die.

[jiinus]

I know it's an old issue but I ran into this when working with legacy stuff. Got dynamic tabs working by using tab.$$hashKey instead of $index. Seems that the index is not updated dynamically but using tab.$$hashKey seems to work fine since angular makes it unique for each repeated object always. Not as convenient in all cases as $index but manageable. I know $$hashKey is sort of private, but hey, isn't it more like a guideline...

[sunscheung]

@bolemeus @wesleycho @eddiriarte @mcfdez @icfantv But when adding and deleting tabs for long time makes it unstable and its active index becomes null. Example: <uib-tabset active="activeTabIndex"> activeTabIndex becomes null when changed