fix(CDropdownMenu, CPopover, CTooltip): add inheritAttrs: false to resolve the inheritance issue

Author: mrholek

packages/coreui-vue/src/components/dropdown/CDropdownMenu.ts

@@ -5,6 +5,7 @@ import { getAlignmentClassNames } from './utils'
 
 const CDropdownMenu = defineComponent({
   name: 'CDropdownMenu',
+  inheritAttrs: false,
   props: {
     /**
      * Component used for the root node. Either a string to use a HTML element or a component.
@@ -16,7 +17,7 @@ const CDropdownMenu = defineComponent({
       default: 'div',
     },
   },
-  setup(props, { slots }) {
+  setup(props, { attrs, slots }) {
     const dropdownMenuRef = inject('dropdownMenuRef') as Ref<HTMLElement>
     const config = inject('config') as any // eslint-disable-line @typescript-eslint/no-explicit-any
     const visible = inject('visible') as Ref<boolean>
@@ -35,10 +36,12 @@ const CDropdownMenu = defineComponent({
             h(
               props.component,
               {
+                ...attrs,
                 class: [
                   'dropdown-menu',
                   { show: visible.value },
                   getAlignmentClassNames(alignment),
+                  attrs.class,
                 ],
                 ...((typeof alignment === 'object' || !popper) && {
                   'data-coreui-popper': 'static',

packages/coreui-vue/src/components/popover/CPopover.ts

@@ -9,6 +9,7 @@ import { getRTLPlacement } from '../../utils'
 
 const CPopover = defineComponent({
   name: 'CPopover',
+  inheritAttrs: false,
   props: {
     /**
      * Apply a CSS fade transition to the popover.
@@ -25,9 +26,7 @@ const CPopover = defineComponent({
      * @since v5.0.0-beta.0
      */
     container: {
-      type: [Object, String] as PropType<
-        HTMLElement | (() => HTMLElement) | string
-      >,
+      type: [Object, String] as PropType<HTMLElement | (() => HTMLElement) | string>,
       default: 'body',
     },
     /**
@@ -198,16 +197,17 @@ const CPopover = defineComponent({
                 h(
                   'div',
                   {
+                    ...attrs,
                     class: [
                       'popover',
                       'bs-popover-auto',
                       {
                         fade: props.animation,
                       },
+                      attrs.class,
                     ],
                     ref: popoverRef,
                     role: 'tooltip',
-                    ...attrs,
                   },
                   [
                     h('div', { class: 'popover-arrow' }),

packages/coreui-vue/src/components/tooltip/CTooltip.ts

@@ -9,6 +9,7 @@ import { getRTLPlacement } from '../../utils'
 
 const CTooltip = defineComponent({
   name: 'CTooltip',
+  // inheritAttrs: false,
   props: {
     /**
      * Apply a CSS fade transition to the tooltip.
@@ -194,16 +195,17 @@ const CTooltip = defineComponent({
                 h(
                   'div',
                   {
+                    ...attrs,
                     class: [
                       'tooltip',
                       'bs-tooltip-auto',
                       {
                         fade: props.animation,
                       },
+                      attrs.class,
                     ],
                     ref: tooltipRef,
                     role: 'tooltip',
-                    ...attrs,
                   },
                   [
                     h('div', { class: 'tooltip-arrow' }),