Problems with popovers in tabs

I’m having issues when using popovers in tabs. Here is some code from the examples:

            <b-tabs>
                <b-tab title="first" active>
                    <b-popover placement="left">
                        <b-button variant="primary">Using slots</b-button>
                        <span slot="content">
                            Embedding content <span
                            style="color: red">using slots</span> affords you <em>greater <strong>control.</strong></em>
                        </span>
                    </b-popover>
                </b-tab>
                <b-tab title="second" >
                    <b-popover content="Embedding content using properties is easier as well as simpler to make dynamic.">
                        <b-button variant="primary">Using properties</b-button>
                    </b-popover>
                </b-tab>
                <b-tab title="disabled" disabled>
                    <b-card>I'm the card in tab</b-card>
                </b-tab>
            </b-tabs>

… and some steps for reproducing the problems I’ve noticed:

1. Load the page( First tab should be opened with button ‘Using slots’)
2. Go to Second tab
3. Click the Using properties button -> It is changed to ‘Using slots’ and the tab is switched to First tab
4. It no longer possible closing the popover by clicking on the page

[GregPeden]

So I did some digging… reactivity is best affected in the “updated()” reactivity event in VueJS components. This is called every time the DOM is updated in any context which concerns your component. So… when this is called, I just refresh the Tether position, which will cause itself to hide if the anchored element is not in the viewport.

I think this means that in the background the reposition call gets spammed whenever anything is happening like a page scroll and the Popover is shown, but… the cost for that is small, and this provides a universal solution for all cases.

See: https://github.com/bootstrap-vue/bootstrap-vue/pull/230

[GregPeden]

Thanks, I’ll look in to this.