Stop Multiple onClick Events from Firing

This commit is contained in:
Gerard Burns 2023-04-27 12:01:36 +01:00
parent 3f22bbf50d
commit 50336c80e3
1 changed files with 13 additions and 1 deletions

View File

@ -5,6 +5,8 @@
const { styleable, builderStore } = getContext("sdk") const { styleable, builderStore } = getContext("sdk")
const component = getContext("component") const component = getContext("component")
let handlingOnClick = false
export let disabled = false export let disabled = false
export let text = "" export let text = ""
export let onClick export let onClick
@ -16,6 +18,16 @@
export let icon = null export let icon = null
export let active = false export let active = false
const handleOnClick = async () => {
if (handlingOnClick) {
return
}
handlingOnClick = true
await onClick()
handlingOnClick = false
}
let node let node
$: $component.editing && node?.focus() $: $component.editing && node?.focus()
@ -39,7 +51,7 @@
class:spectrum-Button--quiet={quiet} class:spectrum-Button--quiet={quiet}
{disabled} {disabled}
use:styleable={$component.styles} use:styleable={$component.styles}
on:click={onClick} on:click={handleOnClick}
contenteditable={$component.editing && !icon} contenteditable={$component.editing && !icon}
on:blur={$component.editing ? updateText : null} on:blur={$component.editing ? updateText : null}
bind:this={node} bind:this={node}