<b-tab> Extending component causes b-tab to stop working

Heya,

I am trying to create a custom tab component to incorporate extra components and reduce duplicate code.

Sadly, whenever I try to use extends or mixins with the tab component, the tab navigation stops working.

Steps to reproduce the bug

1. Create a custom component:

<template>
  <b-tab v-bind="$props">
    <slot></slot>
    <pagination v-if="pagination"
                :total-rows="pagination.totalRows"
                :per-page="pagination.limit">
    </pagination>
  </b-tab>
</template>

<script>
import Tab from 'bootstrap-vue/es/components/tabs/tab';
import Pagination from '@/components/Pagination.vue';

export default {
  name: 'Tab',
  extends: Tab,
  components: {
    Pagination,
  },
  props: {
    ...Tab.props,
    pagination: false
  }
}
</script>

1. Create a component that incorporates our element within a <b-tabs> element.
2. Click on the tab header
3. No tab-content is visible

Expected behavior

That the tab works just like a normal tab and makes the correct tab-content visible.

Versions

Libraries:

• BootstrapVue: 2.0.0-rc.19
• Bootstrap: 4.3.1
• Vue: 2.6.10

Environment:

• OS: Any (Fedora, Mac OS, Windows)
• Browser: Chrome
• Version: Chrome 74.0.3729.131

Additional context

I have used the example of the b-button from here

[tmorehouse]

@Pidz-b Version 2.0.0-rc.23 has been released.

[tmorehouse]

@Pidz-b Here is a solution that may work, although the detection routine that scans the DOM after mount for tabs tries to get the b-tab instances from the element reference (i.e. el.__vue__), so thre is a chance it may not detect the b-tab instances after mount (since you are adding an extra layer in the component parent stack)

<template>
  <b-tab v-bind="$props" v-on="$listeners">
    <!-- this will pass the title slot to the b-tab instance, if provided -->
    <template v-if="$slots.title" slot="title"><slot name="title"></slot></template>
    <!-- default tab content -->
    <slot></slot>
    <!-- optional custom pagination component -->
    <pagination v-if="pagination"
                :total-rows="pagination.totalRows"
                :per-page="pagination.limit">
    </pagination>
  </b-tab>
</template>

<script>
import BTab from 'bootstrap-vue';
import Pagination from '@/components/Pagination.vue';

export default {
  name: 'Tab',
  components: {
    BTab,
    Pagination,
  },
  props: {
    // Add in all of BTab's props
    ...BTab.props, // or maybe ...BTab.$options.props,
    // Add in new prop
    pagination: false
  }
}
</script>

This might be close, but we may need to alter the detection routine a bit to handle the case of the tab being nested inside another component.

EDIT: the new updated tab detection routine in PR #3442 should make this example work

The problem with extending BTab would be the registration of the child tab’s with the parent b-tabs component, as having a child b-tab in your render would make two tabs get registered (your extended b-tab and the nested b-tab, the latter being the one that needs to be registered with b-tabs). You would need to override the injection in your extended component options:

<template>
  <b-tab v-bind="$props" v-on="$listeners">
    <template v-if="$slots.title" slot="title"><slot name="title"></slot></template>
    <slot></slot>
    <pagination v-if="pagination"
                :total-rows="pagination.totalRows"
                :per-page="pagination.limit">
    </pagination>
  </b-tab>
</template>
<script>
import BTab from 'bootstrap-vue'
import Pagination from '@/components/pagination'

export default {
  name: 'MyTab',
  extends: BTab,
  inject: {
    // Override `bvTabs` injection, returning an empty object
    bvTabs: {
      from: 'NothingToSeeHere', // fake source to override injection
      default() { return {} }
    }
  },
  components: {
    BTab,
    pagination
  },
  props: {
    pagination: {
      type: Boolean,
      default: false
    }
  }
}
</script>

EDIT 2: With a minor tweak in the b-tabs child b-tab detection routine, the above inject override is no longer needed (but wont hurt).