[b-tabs] not able to active a new tab added on fly

Describe the bug

The problem was also indicated in this closed ticket https://github.com/bootstrap-vue/bootstrap-vue/issues/1378 but I suspect never was solved ( if it might be solved? ).

Basically after adding a new tab dynamically is not possible to activate this tab on fly.

I’m using v-model=“groups” what is a list of elements

I have tested with :

this.$nextTick(() => {
          this.tabIndex = this.groups.length - 1;
        });

and also with

Vue.nextTick().then(() => {
          this.tabIndex = this.groups.length - 1;
        });

Expected behavior

I success get it working with a timeout, but seems a not safe way for doing it:

setTimeout(() => {
          this.tabIndex = this.groups.length - 1;
        }, 400);

I would like to know if it is another version to get it running

Versions

Libraries:

• BootstrapVue: 2.0.0-rc.24
• Bootstrap: 4.3.1
• Vue: 2.6.6

Environment:

• Browser: Chrome
• Version: 75.0.3770.100 (Build oficial) (64 bits)

Demo link

Here is an old sample of the issue what is not working as expected: http://jsfiddle.net/cihkem/3apaaz4n/1/

[tmorehouse]

@darkman97i I just remembered about another way you could know when the tab is ready to be activated. <b-tabs> emits the event changed when tabs are added, removed, or re-ordered. You could listen to that event and update the v-model then, and you would no longer need the $nextTicks and requestAnimation frame.

https://bootstrap-vue.js.org/docs/components/tabs#comp-ref-b-tabs-events

<b-tabs v-model="currentTab" @changed="updateCurrent">
  <b-tab v-for="tab in tabs"  :title="tab.title" :key="tab.id">
    {{ tab.content }}
  </b-tab>
</b-tabs>

export default {
  data() {
     tabs: [],
     currentTab: 1
  },
  methods: {
    // ...
    updateCurrent(currentTabs, previousTabs) {
      if (currentTabs.length > previousTabs.length) {
        this.currentTab = currentTabs.length - 1
      }
    }
  }

[tmorehouse]

When you diagrammatically add a tab (i.e. with v-if, or similar), you can have the b-tab’s active prop set, which will activate the tab once it is discovered (assuming the new tab appears last)

And after reviewing the code, I think you need a double nextTick + Request animation frame to set the new active tab index (via the v-model), to get around the delays required by the tab probing/disovery process:

this.$nextTick(() => {
  this.$nextTick(() => {
    requestAnimationFrame(() => {
      this.tabIndex = this.groups.length - 1;
    })
  })
});

Or if using the promise version of $nextTick (with async support):

await this.$nextTick();
await this.$nextTick();
requestAnimationFrame(() => {
  this.tabIndex = this.groups.length - 1;
});