From a69b3204833ec5113e8732160eddc0306e2c75b1 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 26 Jul 2021 14:11:30 +0100
Subject: [PATCH] Fix same svelte-dnd-action drag error for navigation editor

---
 .../NavigationEditor/NavigationDrawer.svelte  | 23 ++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/NavigationEditor/NavigationDrawer.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/NavigationEditor/NavigationDrawer.svelte
index bcdb6391da..4d1823108c 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/NavigationEditor/NavigationDrawer.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/NavigationEditor/NavigationDrawer.svelte
@@ -15,13 +15,13 @@
   export let links = []
 
   const flipDurationMs = 150
+  let dragDisabled = true
 
   $: links.forEach(link => {
     if (!link.id) {
       link.id = generate()
     }
   })
-
   $: urlOptions = $store.screens
     .map(screen => screen.routing?.route)
     .filter(x => x != null)
@@ -37,6 +37,11 @@
   const updateLinks = e => {
     links = e.detail.items
   }
+
+  const handleFinalize = e => {
+    updateLinks(e)
+    dragDisabled = true
+  }
 </script>
 
 <DrawerContent>
@@ -49,13 +54,21 @@
             items: links,
             flipDurationMs,
             dropTargetStyle: { outline: "none" },
+            dragDisabled,
           }}
-          on:finalize={updateLinks}
+          on:finalize={handleFinalize}
           on:consider={updateLinks}
         >
           {#each links as link (link.id)}
             <div class="link" 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>
               <Input bind:value={link.text} placeholder="Text" />
               <Combobox
                 bind:value={link.url}
@@ -108,4 +121,8 @@
     flex: 1 1 auto;
     width: 0;
   }
+  .handle {
+    display: grid;
+    place-items: center;
+  }
 </style>