fix(b-tabs): cleanup rendering logic (#6154)

* fix(b-tabs): tabs detection for SSR

* Update tab.js

* Update tabs.js

* testing

* Update safe-types.js

* Update dom.js

* Update tabs.js

* Update tabs.js

* Update tabs.js

* Update tabs.js

* Update tabs.js

* fix(b-tabs): improve rendering logic

* Update tabs.js

* Update tabs.js

* Update tab.js

* Update tabs.js

* Update tabs.js

Author: jacobmllr95

src/components/tabs/tab.js

@@ -54,11 +54,14 @@ export const BTab = /*#__PURE__*/ Vue.extend({
   props,
   data() {
     return {
-      localActive: this[MODEL_PROP_NAME_ACTIVE] && !this.disabled,
-      show: false
+      localActive: this[MODEL_PROP_NAME_ACTIVE] && !this.disabled
     }
   },
   computed: {
+    // For parent sniffing of child
+    _isTab() {
+      return true
+    },
     tabClasses() {
       const { localActive: active, disabled } = this
 
@@ -80,17 +83,9 @@ export const BTab = /*#__PURE__*/ Vue.extend({
     },
     computedLazy() {
       return this.bvTabs.lazy || this.lazy
-    },
-    // For parent sniffing of child
-    _isTab() {
-      return true
     }
   },
   watch: {
-    localActive(newValue) {
-      // Make `active` prop work with `.sync` modifier
-      this.$emit(MODEL_EVENT_NAME_ACTIVE, newValue)
-    },
     [MODEL_PROP_NAME_ACTIVE](newValue, oldValue) {
       if (newValue !== oldValue) {
         if (newValue) {
@@ -114,13 +109,15 @@ export const BTab = /*#__PURE__*/ Vue.extend({
           firstTab()
         }
       }
+    },
+    localActive(newValue) {
+      // Make `active` prop work with `.sync` modifier
+      this.$emit(MODEL_EVENT_NAME_ACTIVE, newValue)
     }
   },
   mounted() {
-    // Inform b-tabs of our presence
+    // Inform `<b-tabs>` of our presence
     this.registerTab()
-    // Initially show on mount if active and not disabled
-    this.show = this.localActive
   },
   updated() {
     // Force the tab button content to update (since slots are not reactive)
@@ -130,8 +127,8 @@ export const BTab = /*#__PURE__*/ Vue.extend({
       updateButton(this)
     }
   },
-  destroyed() {
-    // inform b-tabs of our departure
+  beforeDestroy() {
+    // Inform `<b-tabs>` of our departure
     this.unregisterTab()
   },
   methods: {

src/components/tabs/tab.spec.js

@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils'
-import { waitNT, waitRAF } from '../../../tests/utils'
+import { waitNT } from '../../../tests/utils'
 import { BTab } from './tab'
 
 describe('tab', () => {
@@ -31,7 +31,6 @@ describe('tab', () => {
 
     expect(wrapper.vm._isTab).toBe(true)
     expect(wrapper.vm.localActive).toBe(false)
-    expect(wrapper.vm.show).toBe(false)
 
     wrapper.destroy()
   })
@@ -86,15 +85,13 @@ describe('tab', () => {
 
     await wrapper.setData({ localActive: true })
     await waitNT(wrapper.vm)
-    await waitRAF()
 
     expect(wrapper.classes()).toContain('active')
     expect(wrapper.classes()).not.toContain('disabled')
     expect(wrapper.classes()).not.toContain('card-body')
 
     await wrapper.setData({ localActive: false })
     await waitNT(wrapper.vm)
-    await waitRAF()
 
     expect(wrapper.classes()).not.toContain('active')
     expect(wrapper.classes()).not.toContain('disabled')