fix(b-dropdown-*): ensure class bindings are placed on root element for all dropdown sub-components (closes #4022) (#4024)

Author: tmorehouse

src/components/dropdown/dropdown-divider.js

@@ -12,21 +12,20 @@ export const props = {
 export const BDropdownDivider = /*#__PURE__*/ Vue.extend({
   name: 'BDropdownDivider',
   functional: true,
-  inheritAttrs: false,
   props,
   render(h, { props, data }) {
-    return h('li', { attrs: { role: 'presentation' } }, [
-      h(
-        props.tag,
-        mergeData(data, {
-          staticClass: 'dropdown-divider',
-          attrs: {
-            role: 'separator',
-            'aria-orientation': 'horizontal'
-          },
-          ref: 'divider'
-        })
-      )
+    const $attrs = data.attrs || {}
+    data.attrs = {}
+    return h('li', mergeData(data, { attrs: { role: 'presentation' } }), [
+      h(props.tag, {
+        staticClass: 'dropdown-divider',
+        attrs: {
+          ...$attrs,
+          role: 'separator',
+          'aria-orientation': 'horizontal'
+        },
+        ref: 'divider'
+      })
     ])
   }
 })

src/components/dropdown/dropdown-form.js

@@ -5,7 +5,6 @@ import { BForm, props as formProps } from '../form/form'
 export const BDropdownForm = /*#__PURE__*/ Vue.extend({
   name: 'BDropdownForm',
   functional: true,
-  inheritAttrs: false,
   props: {
     ...formProps,
     disabled: {
@@ -14,20 +13,26 @@ export const BDropdownForm = /*#__PURE__*/ Vue.extend({
     }
   },
   render(h, { props, data, children }) {
-    return h('li', { attrs: { role: 'presentation' } }, [
+    const $attrs = data.attrs || {}
+    const $listeners = data.on || {}
+    data.attrs = {}
+    data.on = {}
+    return h('li', mergeData(data, { attrs: { role: 'presentation' } }), [
       h(
         BForm,
-        mergeData(data, {
+        {
           ref: 'form',
           staticClass: 'b-dropdown-form',
           class: { disabled: props.disabled },
           props,
           attrs: {
+            ...$attrs,
             disabled: props.disabled,
             // Tab index of -1 for keyboard navigation
             tabindex: props.disabled ? null : '-1'
-          }
-        }),
+          },
+          on: $listeners
+        },
         children
       )
     ])

src/components/dropdown/dropdown-group.js

@@ -33,11 +33,12 @@ export const props = {
 export const BDropdownGroup = /*#__PURE__*/ Vue.extend({
   name: 'BDropdownGroup',
   functional: true,
-  inheritAttrs: false,
   props,
   render(h, { props, data, slots, scopedSlots }) {
     const $slots = slots()
     const $scopedSlots = scopedSlots || {}
+    const $attrs = data.attrs || {}
+    data.attrs = {}
     let header
     let headerId = null
 
@@ -62,18 +63,19 @@ export const BDropdownGroup = /*#__PURE__*/ Vue.extend({
       .join(' ')
       .trim()
 
-    return h('li', { attrs: { role: 'presentation' } }, [
+    return h('li', mergeData(data, { attrs: { role: 'presentation' } }), [
       header || h(),
       h(
         'ul',
-        mergeData(data, {
+        {
           staticClass: 'list-unstyled',
           attrs: {
+            ...$attrs,
             id: props.id || null,
             role: 'group',
             'aria-describedby': adb || null
           }
-        }),
+        },
         normalizeSlot('default', {}, $scopedSlots, $slots)
       )
     ])

src/components/dropdown/dropdown-header.js

@@ -20,23 +20,25 @@ export const props = {
 export const BDropdownHeader = /*#__PURE__*/ Vue.extend({
   name: 'BDropdownHeader',
   functional: true,
-  inheritAttrs: false,
   props,
   render(h, { props, data, children }) {
-    return h('li', { attrs: { role: 'presentation' } }, [
+    const $attrs = data.attrs || {}
+    data.attrs = {}
+    return h('li', mergeData(data, { attrs: { role: 'presentation' } }), [
       h(
         props.tag,
-        mergeData(data, {
+        {
           staticClass: 'dropdown-header',
           class: {
             [`text-${props.variant}`]: props.variant
           },
           attrs: {
+            ...$attrs,
             id: props.id || null,
             role: 'heading'
           },
           ref: 'header'
-        }),
+        },
         children
       )
     ])

src/components/dropdown/dropdown-text.js

@@ -5,7 +5,6 @@ import { mergeData } from 'vue-functional-data-merge'
 export const BDropdownText = /*#__PURE__*/ Vue.extend({
   name: 'BDropdownText',
   functional: true,
-  inheritAttrs: false,
   props: {
     tag: {
       type: String,
@@ -17,17 +16,20 @@ export const BDropdownText = /*#__PURE__*/ Vue.extend({
     }
   },
   render(h, { props, data, children }) {
-    return h('li', { attrs: { role: 'presentation' } }, [
+    const $attrs = data.attrs || {}
+    data.attrs = {}
+    return h('li', mergeData(data, { attrs: { role: 'presentation' } }), [
       h(
         props.tag,
-        mergeData(data, {
+        {
           staticClass: 'b-dropdown-text',
           class: {
             [`text-${props.variant}`]: props.variant
           },
           props,
+          attrs: $attrs,
           ref: 'text'
-        }),
+        },
         children
       )
     ])