[b-tabs] Cannot dynamically switch to a newly pushed b-tab by b-tabs v-model

Describe the bug

Cannot dynamically switch to a newly pushed b-tab by b-tabs v-model.

Steps to reproduce the bug

1. Have a b-tabs with v-model tabIndex binding
2. Render b-tab in a v-for loop from an array
3. Have a b-button that dynamically push a new tab to that array and switch to the last tab

Example code

<div id="app">
  <div>
    <b-tabs v-model="tabIndex">
      <b-tab v-for="i in tabArr" :key="i" :title="i"></b-tab>
    </b-tabs>
    <b-button @click="newTab">New tab</b-button>
  </div>
</div>

window.onload = () => {
  new Vue({
    el: '#app',
    data() {
      return {
        tabIndex: -1,
        tabArr : [-1]
      }
    },
    watch: {
    	tabIndex(){
      	console.log(this.tabIndex)
      }
    },
    methods: {
    	newTab() {
      	this.tabArr.push(this.tabArr.length)
        this.$nextTick(()=>{this.tabIndex = this.tabArr.length - 1})        
      }
    }
  })
}

Expected behaviour

On a button click the new tab is added, the tab then immediately becomes active.

Actual behaviour

The tab that is next to the currently active becomes active. Jitter in the tabIndex value (can be seen by watching for tabIndex).

Versions

• BootstrapVue: 2.0.0-rc.24
• Vue: 2.6.10

Environment: not relevant

Demo link

https://jsfiddle.net/tinbtb/dy5Lrfvu/4/

[tmorehouse]

yeah… looked after I replied.

because of the update cycle that B-Tabs needs to do when detecting new tabs (and not to trigger an endless update loop), we use nextTicks and requestAnimationFrame (to handle the default transition timing).

Here is an example fiddle that works, using a double nextTick and RequestAnimationFrame:

https://jsfiddle.net/to0vL4wu/

What is happening is that b-tabs tries to respect previously active b-tab’s localAvtive state when new tabs are added (unless they are explicitly added with the active prop set)

[tmorehouse]

We will be introducing a changed event, which will be emitted whenever child tabs are added, removed, or re-ordered. It will fire off once the render/state update cycle has completed.