bootstrap icon indicating copy to clipboard operation
bootstrap copied to clipboard

Tabs: uib-tab index values are not correct when using ng-if on some tab elements

Open grichka opened this issue 9 years ago • 1 comments

Bug description:

If all uib-tab elements of a uib-tabset have an ng-if attribute except the last one, the last tab has the index 0 and is selected by default. It seems the uib-tab indexes are not based on their order but on the moment they appear in the DOM.

<uib-tabset active="0">
  <uib-tab ng-if="true">
    <uib-tab-heading>Tab 1</uib-tab-heading>
    <p>Some Text 1</p>
  </uib-tab>
  <uib-tab ng-if="true">
    <uib-tab-heading>Tab 2</uib-tab-heading>
    <p>Some Text 2</p>
  </uib-tab>
  <uib-tab ng-if="true">
    <uib-tab-heading>Tab 3</uib-tab-heading>
    <p>Some Text 3</p>
  </uib-tab>
  <uib-tab>
    <uib-tab-heading>Tab 4</uib-tab-heading>
    <p>Some Text 4</p>
  </uib-tab>
  <uib-tab>
    <uib-tab-heading>Tab 5</uib-tab-heading>
    <p>Some Text 5</p>
  </uib-tab>
</uib-tabset>

Tab 1 has index 2 Tab 2 has index 3 Tab 3 has index 4 Tab 4 has index 0 Tab 5 has index 1

(an ugly workaround is to put ng-if="true" statements on every uib-tab that do not need to be displayed depending on conditions)

Link to minimally-working plunker that reproduces the issue:

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

Version of Angular, UIBS, and Bootstrap

Angular: 1.4.10

UIBS: 2.1.3

Bootstrap: 2.3.1

grichka avatar Sep 23 '16 13:09 grichka

Workaround works, but would be nice not to have to add otherwise needless logic.

christine-hack avatar Jan 02 '19 18:01 christine-hack