From 601a4935a9a207a50925ebb7f04e9bcc797ab7e3 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 16 Sep 2021 15:49:58 +0100
Subject: [PATCH] Ensure transitions work properly when showing and hiding DND
 candidate positions

---
 packages/client/src/components/preview/DNDHandler.svelte     | 5 ++---
 .../src/components/preview/DNDPositionIndicator.svelte       | 5 +++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/client/src/components/preview/DNDHandler.svelte b/packages/client/src/components/preview/DNDHandler.svelte
index d1a4934826..111c009a3a 100644
--- a/packages/client/src/components/preview/DNDHandler.svelte
+++ b/packages/client/src/components/preview/DNDHandler.svelte
@@ -25,9 +25,7 @@
 
     // Highlight being dragged by setting opacity
     const child = getDOMNodeForComponent(e.target)
-    console.log(child)
     if (child) {
-      console.log("set opacity")
       child.style.opacity = "0.5"
     }
   }
@@ -163,7 +161,8 @@
 />
 
 <DNDPositionIndicator
-  dropInfo={dropMode !== "inside" ? dropInfo : null}
+  componentId={dropTarget}
+  {dropInfo}
   mode={dropMode}
   color="var(--spectrum-global-color-static-green-500)"
   zIndex="940"
diff --git a/packages/client/src/components/preview/DNDPositionIndicator.svelte b/packages/client/src/components/preview/DNDPositionIndicator.svelte
index d9a12231ed..8f7e1bdcbc 100644
--- a/packages/client/src/components/preview/DNDPositionIndicator.svelte
+++ b/packages/client/src/components/preview/DNDPositionIndicator.svelte
@@ -1,6 +1,7 @@
 <script>
   import Indicator from "./Indicator.svelte"
 
+  export let componentId
   export let dropInfo
   export let mode
   export let zIndex
@@ -24,8 +25,8 @@
   }
 </script>
 
-{#key mode}
-  {#if dimensions}
+{#key `${componentId}-${mode}`}
+  {#if dimensions && mode !== "inside"}
     <Indicator
       left={dimensions.left}
       top={dimensions.top}