From 50336c80e3aba56c86374e014e8b97686a6fda1f Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Thu, 27 Apr 2023 12:01:36 +0100
Subject: [PATCH 1/2] Stop Multiple onClick Events from Firing

---
 packages/client/src/components/app/Button.svelte | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/packages/client/src/components/app/Button.svelte b/packages/client/src/components/app/Button.svelte
index 018f21c583..51452de199 100644
--- a/packages/client/src/components/app/Button.svelte
+++ b/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 () => {
+    if (handlingOnClick) {
+      return
+    }
+
+    handlingOnClick = true
+    await onClick()
+    handlingOnClick = false
+  }
+
   let node
 
   $: $component.editing && node?.focus()
@@ -39,7 +51,7 @@
     class:spectrum-Button--quiet={quiet}
     {disabled}
     use:styleable={$component.styles}
-    on:click={onClick}
+    on:click={handleOnClick}
     contenteditable={$component.editing && !icon}
     on:blur={$component.editing ? updateText : null}
     bind:this={node}

From e74d4b4ddb3212db11095a7a969957bfc795f5fb Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Thu, 27 Apr 2023 14:17:09 +0100
Subject: [PATCH 2/2] PR Feedback

---
 packages/client/src/components/app/Button.svelte | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/client/src/components/app/Button.svelte b/packages/client/src/components/app/Button.svelte
index 51452de199..a074986342 100644
--- a/packages/client/src/components/app/Button.svelte
+++ b/packages/client/src/components/app/Button.svelte
@@ -19,12 +19,12 @@
   export let active = false
 
   const handleOnClick = async () => {
-    if (handlingOnClick) {
-      return
+    handlingOnClick = true
+
+    if (onClick) {
+      await onClick()
     }
 
-    handlingOnClick = true
-    await onClick()
     handlingOnClick = false
   }
 
@@ -49,7 +49,7 @@
   <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={handleOnClick}
     contenteditable={$component.editing && !icon}