Skip to content
Permalink
Browse files
fix(v-tooltip, v-popover): render data-* attributes on root components (
closes #5836) (#5882)

* fix(v-tooltip, v-popover): render data-* attributes on root components

* Delete package-lock.json

* Remove TBD's

* Attribute inheritance improvents

* Update popover.spec.js

Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com>
  • Loading branch information
saloev and jacobmllr95 committed Oct 12, 2020
1 parent daea0e5 commit f6b51e04f074e45e98650034e88c2b5629ad25f6
Show file tree
Hide file tree
Showing 6 changed files with 24 additions and 22 deletions.
@@ -182,8 +182,6 @@ describe('form-date', () => {
await waitNT(wrapper.vm)
await waitRAF()

// TBD

wrapper.destroy()
})

@@ -32,7 +32,10 @@ const App = {
h(
BPopover,
{
attrs: { id: 'bar' },
attrs: {
id: 'bar',
'data-foo': 'bar'
},
props: {
target: 'foo',
triggers: this.triggers,
@@ -156,20 +159,22 @@ 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')

// <b-popover> wrapper
const $tipHolder = wrapper.findComponent(BPopover)
expect($tipHolder.exists()).toBe(true)
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()
})
@@ -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?
@@ -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
}
@@ -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
@@ -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

0 comments on commit f6b51e0

Please sign in to comment.