Merge pull request #10433 from Budibase/stop-multiple-onclick-events-from-firing

Stop Multiple onClick Events from Firing

packages/client/src/components/app/Button.svelte

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