fix(BAvatar): fix tag to be button and has attr type when prop button and prop buttonType

Author: VividLemon

packages/bootstrap-vue-3/src/components/BAvatar/BAvatar.vue

@@ -29,7 +29,7 @@
 import {isEmptySlot, isNumeric, toFloat} from '../../utils'
 import type {BAvatarGroupParentData} from '../../types/components'
 import {computed, inject, StyleValue, toRef, useSlots} from 'vue'
-import type {Booleanish, ColorVariant, TextColorVariant} from '../../types'
+import type {Booleanish, ButtonType, ColorVariant, TextColorVariant} from '../../types'
 import {injectionKey} from './BAvatarGroup.vue'
 import {useBooleanish} from '../../composables'
 
@@ -42,7 +42,7 @@ interface BAvatarProps {
   badgeTop?: Booleanish
   badgeVariant?: ColorVariant
   button?: Booleanish
-  buttonType?: string
+  buttonType?: ButtonType
   disabled?: Booleanish
   icon?: string
   rounded?: boolean | string
@@ -117,6 +117,7 @@ const computedRounded = computed<string | boolean>(() =>
 )
 
 const attrs = computed(() => ({
+  'type': buttonBoolean.value ? props.buttonType : undefined,
   'aria-label': props.ariaLabel || null,
   'disabled': disabledBoolean.value || null,
 }))
@@ -184,8 +185,7 @@ const marginStyle = computed(() => {
   return value ? {marginLeft: value, marginRight: value} : {}
 })
 
-// TODO this is incorrect. If buttonType is 'submit' and prop button is true, it will break the component
-const tag = computed<string>(() => (buttonBoolean.value ? props.buttonType : 'span'))
+const tag = computed<'button' | 'span'>(() => (buttonBoolean.value ? 'button' : 'span'))
 const tagStyle = computed(() => ({
   ...marginStyle.value,
   width: computedSize.value,

packages/bootstrap-vue-3/src/components/BAvatar/avatar.spec.ts

@@ -10,18 +10,32 @@ describe('avatar', () => {
     expect(wrapper.classes()).toContain('b-avatar')
   })
 
-  it('tag is default button when prop button is true', () => {
+  it('tag is button when prop button is true', () => {
     const wrapper = mount(BAvatar, {
       props: {button: true},
     })
     expect(wrapper.element.tagName).toBe('BUTTON')
   })
 
-  it('tag is prop buttonType when prop button is true', () => {
+  it('has attr type when prop button to be default button', () => {
     const wrapper = mount(BAvatar, {
-      props: {button: true, buttonType: 'div'},
+      props: {button: true},
+    })
+    expect(wrapper.attributes('type')).toBe('button')
+  })
+
+  it('has attr type when prop button to be prop buttonType', () => {
+    const wrapper = mount(BAvatar, {
+      props: {button: true, buttonType: 'submit'},
+    })
+    expect(wrapper.attributes('type')).toBe('submit')
+  })
+
+  it('does not have attr type when prop buttonType but not prop button', () => {
+    const wrapper = mount(BAvatar, {
+      props: {button: false, buttonType: 'submit'},
     })
-    expect(wrapper.element.tagName).toBe('DIV')
+    expect(wrapper.attributes('type')).toBeUndefined()
   })
 
   it('tag is default span', () => {