Tab and Tab Pane Order is inconsistent when ngIf directive is applied

[skmasq]

Bug description:

When ngIf directive is applied to a uibTab directive, it is going to be rendered after all other uibTab directives who don't have ngIf directives applied. See this Plunker, the middle tab is the last tab-pane child inside tab-content element.

Expected:

What I was expecting is that order of tabs and order of tab panes would be the same. Because they are not, it is hard for me to find correct tab pane when working with tab buttons.

Link to minimally-working plunker that reproduces the issue: http://plnkr.co/edit/IUzgQ0wIkIBZoxUQUiqv

Version of Angular, UIBS, and Bootstrap

Angular: 1.3.20

UIBS: 0.14.3

Bootstrap: 3.3.1

[icfantv]

@skmasq if you use ng-show does the same problem happen?

[skmasq]

Hi @icfantv ,

With nhShow directive it creates the right order, but I need ngIf directive in particular, because I need to stop content rendering due to IE11 performance issues. Majority of our app users are IE10-11.

[RobJacobs]

@skmasq I don't understand what you are trying to report? The tab headings and the respective content are rendered in the order they appear in the mark up? I tested in Chrome, Edge, and IE 11 and everything works as I expected. I created a backing property and bound the ng-if for the middle tab to that and it still renders in the order in which they appear in your markup.

_EDIT_
Your plunk is using angular-ui-bootstrap v 0.14.3 and Angular v 1.3.2 which we no longer maintain/support.

[skmasq]

Hi @RobJacobs,

I'll try to visualize:

As you can see the <li/> element is the second child, as expected, but .tab-pane for some reason is the third child element under .tab-content - it supposed to be the second child element, the same way tab <li/> element is.

[wesleycho]

This is a known issue for older versions of UI Bootstrap - please post a reproduction if this is an issue based on the current release.

[skmasq]

Hi @wesleycho ,

Is this an issue that has been fixed previously and can you point me to the code that fixes it in the newest versions? I would very much appriciate it :)

Currently we are unable to use anything higher than 0.14.3 because we are on angular 1.3.20.

[wesleycho]

This should be fixed in UI Bootstrap 1.2, when the tab API underwent a major breaking change.

[RobJacobs]

My mistake, I wasn't looking at the markup, just what was rendered on screen.

[skmasq]

Hi @RobJacobs and @wesleycho ,

Tried to apply 1.2.0 way to create and manage tabs/tabsets, but unfortunately the issue was not solved.

So I wanted to know if the newest version 1.3.2 has solved it, and it turns out this still is an issue, here is the plunker: http://plnkr.co/edit/HoREl5xFNFBQu9hJOuQY

Here is visualization of the problem:

I believe this is an issue related to: angular/angular.js#14326

Edit: If this is a no fix issue, would it be possible to introduce new feature in the next version which would allow to toggle ngIf instead .active class on the tab-pane or its contents?

[wesleycho]

Closing, as we already fixed it in the library, and this is basically unfixable with the old mechanism. It is your responsibility to upgrade.

You can override the template if you want if you want ng-if - that is not something we will be doing at the library level

[skmasq]

Hi @wesleycho ,

In which version of the library was this issue fixed? To what versions of libraries I would need to upgrade?

[icfantv]

@skmasq if you're going to upgrade, you may as well upgrade to the latest. the longer you wait, the more painful it will be. be sure to read through the changelog and pay special attention to the breaking changes sections in each release between your current one and the latest.

[skmasq]

Hi @icfantv ,

Thanks for your reply, but I am a little bit confused now. This plunker shows that the angular bootstrap 1.3.2 (which I suppose is the latest version) has the same issue as the 0.14.3 version (see this plunker).

Is this issue fixed in one of the versions (which one) or is this a no-fix issue due to angular/angular.js#14326?

Thank you all for the fast resposnes by the way :)

Cheers

[icfantv]

@skmasq i'm looking at your plunker and it's working fine for me. I've even updated it to use a variable for ng-if and a toggle button. See here for the plunker. I'm not sure there's anything for us to do here because I'm not seeing a bug.

[RosanaRufer]

Hi, In my case It was working with angular-bootstrap 1.2.5 and it stopped properly being rendered with angular-bootstrap 1.3.3, where tabs are rendered in vertical (one on top of the other) when using the ng-ifdirective. (using justified="true" and the ng-if conditions being loaded asynchronously)

A solution:

The issue seems to get solved by combining ng-show with ng-if. I use ng-show for each tab and I use ng-if in a div wrapping the tab content.

<uib-tabset class="views-tabs" justified="true" active="vm.selectedTabIndex">
    <uib-tab heading="Tab1" ng-show="vm.loadTab1">
        <div ng-if="vm.loadTab1">
            <my-directive-view-1></my-directive-view-1>
        </div>
    </uib-tab>
    <uib-tab heading="Tab2" ng-show="vm.loadTab2">
        <div ng-if="vm.loadTab2">
            <my-directive-view-2></my-directive-view-2>
        </div>
    </uib-tab>
    <uib-tab heading="Tab3" ng-show="vm.loadTab3">
        <div ng-if="vm.loadTab3">
            <my-directive-view-3></my-directive-view-3>
        </div>
    </uib-tab>
</uib-tabset>

I Must add that myDirective-X are directives which controllers retrieve data asynchronously, so I can't only use ng-show; that's why ng-if is needed.

Not sure if this makes sense but it seems to give the desired behavior.