diff --git a/src/components/form-datepicker/form-datepicker.spec.js b/src/components/form-datepicker/form-datepicker.spec.js index acfdcea0614..e58df6b8b37 100644 --- a/src/components/form-datepicker/form-datepicker.spec.js +++ b/src/components/form-datepicker/form-datepicker.spec.js @@ -182,8 +182,6 @@ describe('form-date', () => { await waitNT(wrapper.vm) await waitRAF() - // TBD - wrapper.destroy() }) diff --git a/src/components/popover/popover.spec.js b/src/components/popover/popover.spec.js index b34c1ae71ee..2b596d5f4ae 100644 --- a/src/components/popover/popover.spec.js +++ b/src/components/popover/popover.spec.js @@ -32,7 +32,10 @@ const App = { h( BPopover, { - attrs: { id: 'bar' }, + attrs: { + id: 'bar', + 'data-foo': 'bar' + }, props: { target: 'foo', triggers: this.triggers, @@ -156,7 +159,7 @@ describe('b-popover', () => { expect($button.attributes('id')).toEqual('foo') expect($button.attributes('data-original-title')).not.toBeDefined() // ID of the tooltip that will be in the body - const adb = $button.attributes('aria-describedby') + const $adb = $button.attributes('aria-describedby') // wrapper const $tipHolder = wrapper.findComponent(BPopover) @@ -164,12 +167,14 @@ describe('b-popover', () => { expect($tipHolder.element.nodeType).toEqual(Node.COMMENT_NODE) // Find the popover element in the document - const tip = document.getElementById(adb) - expect(tip).not.toBe(null) - expect(tip).toBeInstanceOf(HTMLElement) - expect(tip.tagName).toEqual('DIV') - expect(tip.classList.contains('popover')).toBe(true) - expect(tip.classList.contains('b-popover')).toBe(true) + const $tip = document.getElementById($adb) + expect($tip).not.toBe(null) + expect($tip).toBeInstanceOf(HTMLElement) + expect($tip.tagName).toEqual('DIV') + expect($tip.getAttribute('id')).toEqual('bar') + expect($tip.getAttribute('data-foo')).toEqual('bar') + expect($tip.classList.contains('popover')).toBe(true) + expect($tip.classList.contains('b-popover')).toBe(true) // Hide the Popover await wrapper.setProps({ @@ -184,8 +189,8 @@ describe('b-popover', () => { expect($button.attributes('aria-describedby')).not.toBeDefined() // Popover element should not be in the document - expect(document.body.contains(tip)).toBe(false) - expect(document.getElementById(adb)).toBe(null) + expect(document.body.contains($tip)).toBe(false) + expect(document.getElementById($adb)).toBe(null) wrapper.destroy() }) diff --git a/src/components/tooltip/helpers/bv-popper.js b/src/components/tooltip/helpers/bv-popper.js index 60287ff1d10..d3e0bc8a244 100644 --- a/src/components/tooltip/helpers/bv-popper.js +++ b/src/components/tooltip/helpers/bv-popper.js @@ -5,13 +5,13 @@ // Templates are only instantiated when shown, and destroyed when hidden // +import Popper from 'popper.js' import { NAME_POPPER } from '../../../constants/components' import Vue from '../../../utils/vue' -import Popper from 'popper.js' +import { BVTransition } from '../../../utils/bv-transition' import { getCS, requestAF, select } from '../../../utils/dom' import { toFloat } from '../../../utils/number' import { HTMLElement, SVGElement } from '../../../utils/safe-types' -import { BVTransition } from '../../../utils/bv-transition' const AttachmentMap = { AUTO: 'auto', @@ -95,12 +95,12 @@ export const BVPopper = /*#__PURE__*/ Vue.extend({ }, computed: { /* istanbul ignore next */ - templateType() /* istanbul ignore next */ { + templateType() { // Overridden by template component return 'unknown' }, popperConfig() { - const placement = this.placement + const { placement } = this return { placement: this.getAttachment(placement), modifiers: { @@ -157,9 +157,6 @@ export const BVPopper = /*#__PURE__*/ Vue.extend({ // as our propsData is added after `new Template({...})` this.attachment = this.getAttachment(this.placement) }, - mounted() { - // TBD - }, updated() { // Update popper if needed // TODO: Should this be a watcher on `this.popperConfig` instead? diff --git a/src/components/tooltip/helpers/bv-tooltip-template.js b/src/components/tooltip/helpers/bv-tooltip-template.js index e7c185d6f70..7c7cb4d6ee0 100644 --- a/src/components/tooltip/helpers/bv-tooltip-template.js +++ b/src/components/tooltip/helpers/bv-tooltip-template.js @@ -51,9 +51,13 @@ export const BVTooltipTemplate = /*#__PURE__*/ Vue.extend({ }, templateAttributes() { return { + // Apply attributes from root tooltip component + ...this.$parent.$parent.$attrs, + id: this.id, role: 'tooltip', tabindex: '-1', + // Add the scoped style data attribute to the template root element ...this.scopedStyleAttrs } diff --git a/src/components/tooltip/helpers/bv-tooltip.js b/src/components/tooltip/helpers/bv-tooltip.js index 28893c2e71b..77d5a1fe898 100644 --- a/src/components/tooltip/helpers/bv-tooltip.js +++ b/src/components/tooltip/helpers/bv-tooltip.js @@ -110,9 +110,6 @@ const templateData = { // @vue/component export const BVTooltip = /*#__PURE__*/ Vue.extend({ name: NAME_TOOLTIP_HELPER, - props: { - // None - }, data() { return { // BTooltip/BPopover/VBTooltip/VBPopover will update this data diff --git a/src/components/tooltip/tooltip.js b/src/components/tooltip/tooltip.js index b05c0fd9bcc..f25108ad6f2 100644 --- a/src/components/tooltip/tooltip.js +++ b/src/components/tooltip/tooltip.js @@ -10,6 +10,7 @@ import { BVTooltip } from './helpers/bv-tooltip' // @vue/component export const BTooltip = /*#__PURE__*/ Vue.extend({ name: NAME_TOOLTIP, + inheritAttrs: false, props: { title: { type: String