From d445aadbcf464cd7a03c283bdd41cbeabfaeb5f7 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 30 Aug 2022 13:32:52 +0100
Subject: [PATCH] Allow dropping on empty space below tree

---
 .../navigation/ComponentScrollWrapper.svelte   | 18 +++++++++++++++++-
 .../navigation/ComponentTree.svelte            |  3 ++-
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentScrollWrapper.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentScrollWrapper.svelte
index 65352a5dda..15ba7acecf 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentScrollWrapper.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentScrollWrapper.svelte
@@ -1,5 +1,7 @@
 <script>
   import { setContext } from "svelte"
+  import { dndStore } from "./dndStore"
+  import { notifications } from "@budibase/bbui"
 
   let scrollRef
 
@@ -50,9 +52,23 @@
   setContext("scroll", {
     scrollTo,
   })
+
+  const onDrop = async () => {
+    try {
+      await dndStore.actions.drop()
+    } catch (error) {
+      console.error(error)
+      notifications.error("Error saving component")
+    }
+  }
 </script>
 
-<div bind:this={scrollRef}>
+<div
+  bind:this={scrollRef}
+  on:drop={onDrop}
+  ondragover="return false"
+  ondragenter="return false"
+>
   <slot />
 </div>
 
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentTree.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentTree.svelte
index 6704027f35..31d6eb132b 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentTree.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentTree.svelte
@@ -68,7 +68,8 @@
     closedNodes = closedNodes
   }
 
-  const onDrop = async () => {
+  const onDrop = async e => {
+    e.stopPropagation()
     try {
       await dndStore.actions.drop()
     } catch (error) {