fix(Button): duplicate click handlers (#2213)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Romain Hamel
2024-09-18 10:18:32 +02:00
committed by GitHub
parent a8b26eb1a8
commit dd6bf5694f
2 changed files with 9 additions and 8 deletions

View File

@@ -25,7 +25,7 @@ export interface ButtonProps extends UseComponentIconsProps, Omit<LinkProps, 'ra
block?: boolean
/** Set loading state automatically based on the `@click` promise state */
loadingAuto?: boolean
onClick?: (event: Event) => void | Promise<void>
onClick?: ((event: MouseEvent) => void | Promise<void>) | Array<((event: MouseEvent) => void | Promise<void>)>
class?: any
ui?: PartialString<typeof button.slots>
}
@@ -56,10 +56,11 @@ const { orientation, size: buttonSize } = useButtonGroup<ButtonProps>(props)
const loadingAutoState = ref(false)
const formLoading = inject<Ref<boolean> | undefined>(formLoadingInjectionKey, undefined)
async function onClickWrapper(event: Event) {
async function onClickWrapper(event: MouseEvent) {
loadingAutoState.value = true
const callbacks = Array.isArray(props.onClick) ? props.onClick : [props.onClick]
try {
await props.onClick?.(event)
await Promise.all(callbacks.map(fn => fn?.(event)))
} finally {
loadingAutoState.value = false
}

View File

@@ -3,7 +3,7 @@ export interface LinkBaseProps {
as?: string
type?: string
disabled?: boolean
click?: (e: MouseEvent) => void
onClick?: (e: MouseEvent) => void | Promise<void>
href?: string
navigate?: (e: MouseEvent) => void
rel?: string
@@ -20,15 +20,15 @@ const props = withDefaults(defineProps<LinkBaseProps>(), {
type: 'button'
})
function onClick(e: MouseEvent) {
function onClickWrapper(e: MouseEvent) {
if (props.disabled) {
e.stopPropagation()
e.preventDefault()
return
}
if (props.click) {
props.click(e)
if (props.onClick) {
props.onClick(e)
}
if (props.href && props.navigate && !props.isExternal) {
@@ -54,7 +54,7 @@ function onClick(e: MouseEvent) {
}"
:rel="rel"
:target="target"
@click="onClick"
@click="onClickWrapper"
>
<slot />
</Primitive>