From 7a9197975db2d480a5068e9b66e266b946636104 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 26 Jul 2021 14:09:14 +0100
Subject: [PATCH] Fix svelte-dnd-action throwing an error when interacting with
 a spectrum field inside a draggable

---
 .../ConditionalUIDrawer.svelte                | 31 ++++++++++++++-----
 1 file changed, 24 insertions(+), 7 deletions(-)

diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ConditionalUIDrawer.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ConditionalUIDrawer.svelte
index 5839453258..ebe60c7110 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ConditionalUIDrawer.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ConditionalUIDrawer.svelte
@@ -54,6 +54,7 @@
     },
   ]
 
+  let dragDisabled = true
   $: definition = store.actions.components.getDefinition(
     $selectedComponent?._component
   )
@@ -96,11 +97,16 @@
     ]
   }
 
-  const removeLink = id => {
+  const removeCondition = id => {
     conditions = conditions.filter(link => link.id !== id)
   }
 
-  const updateLinks = e => {
+  const handleFinalize = e => {
+    updateConditions(e)
+    dragDisabled = true
+  }
+
+  const updateConditions = e => {
     conditions = e.detail.items
   }
 
@@ -142,9 +148,10 @@
             items: conditions,
             flipDurationMs,
             dropTargetStyle: { outline: "none" },
+            dragDisabled,
           }}
-          on:finalize={updateLinks}
-          on:consider={updateLinks}
+          on:finalize={handleFinalize}
+          on:consider={updateConditions}
         >
           {#each conditions as condition (condition.id)}
             <div
@@ -152,9 +159,15 @@
               class:update={condition.action === "update"}
               animate:flip={{ duration: flipDurationMs }}
             >
-              <Icon name="DragHandle" size="XL" />
+              <div
+                class="handle"
+                aria-label="drag-handle"
+                style={dragDisabled ? "cursor: grab" : "cursor: grabbing"}
+                on:mousedown={() => (dragDisabled = false)}
+              >
+                <Icon name="DragHandle" size="XL" />
+              </div>
               <Select
-                draggable={false}
                 placeholder={null}
                 options={actionOptions}
                 bind:value={condition.action}
@@ -226,7 +239,7 @@
                 name="Close"
                 hoverable
                 size="S"
-                on:click={() => removeLink(condition.id)}
+                on:click={() => removeCondition(condition.id)}
               />
             </div>
           {/each}
@@ -270,4 +283,8 @@
   .condition:hover {
     background-color: var(--spectrum-global-color-gray-100);
   }
+  .handle {
+    display: grid;
+    place-items: center;
+  }
 </style>