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

saloev · jacobmllr95 · web-flow · commit f6b51e04f074 · 2020-10-12T23:31:27.000+02:00
* 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 &lt;jacob.mueller.elz@gmail.com&gt;
diff --git 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
@@ -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()
   })
diff --git 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
@@ -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
@@ -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
@@ -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
