From 90172ec2a1b9e613ee8ebb1acb7df63f568c0f08 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 10 Oct 2022 09:51:13 +0100
Subject: [PATCH] Fully remove source component from client tree while dragging

---
 .../src/components/preview/DNDHandler.svelte  |  6 +++--
 packages/client/src/stores/screens.js         | 14 +++++++-----
 packages/client/src/utils/components.js       | 22 +++++++++++++++++++
 3 files changed, 34 insertions(+), 8 deletions(-)

diff --git a/packages/client/src/components/preview/DNDHandler.svelte b/packages/client/src/components/preview/DNDHandler.svelte
index 04503f8020..df36d7cb85 100644
--- a/packages/client/src/components/preview/DNDHandler.svelte
+++ b/packages/client/src/components/preview/DNDHandler.svelte
@@ -210,8 +210,10 @@
         return
       }
 
-      // Filter out source component from consideration
-      const children = parent._children?.filter(x => x._id !== sourceId)
+      // Filter out source component and placeholder from consideration
+      const children = parent._children?.filter(
+        x => x._id !== "placeholder" && x._id !== sourceId
+      )
 
       // Use inside if no existing children
       if (!children?.length) {
diff --git a/packages/client/src/stores/screens.js b/packages/client/src/stores/screens.js
index 85293cd0ce..69dcf99b07 100644
--- a/packages/client/src/stores/screens.js
+++ b/packages/client/src/stores/screens.js
@@ -3,10 +3,7 @@ import { routeStore } from "./routes"
 import { builderStore } from "./builder"
 import { appStore } from "./app"
 import { RoleUtils } from "@budibase/frontend-core"
-import {
-  findComponentById,
-  findComponentPathById,
-} from "../utils/components.js"
+import { findComponentById, findComponentParent } from "../utils/components.js"
 import { Helpers } from "@budibase/bbui"
 
 const createScreenStore = () => {
@@ -51,11 +48,16 @@ const createScreenStore = () => {
       const { dndParent, dndIndex, selectedComponentId } = $builderStore
       const insert = true
       if (insert && activeScreen && dndParent && dndIndex != null) {
-        let selectedComponent = findComponentById(
+        // Remove selected component from tree
+        let selectedParent = findComponentParent(
           activeScreen.props,
           selectedComponentId
         )
-        delete selectedComponent._component
+        selectedParent._children = selectedParent._children?.filter(
+          x => x._id !== selectedComponentId
+        )
+
+        // Insert placeholder
         const placeholder = {
           _component: "placeholder",
           _id: "placeholder",
diff --git a/packages/client/src/utils/components.js b/packages/client/src/utils/components.js
index 4b1b8a7ada..1812175c2c 100644
--- a/packages/client/src/utils/components.js
+++ b/packages/client/src/utils/components.js
@@ -60,3 +60,25 @@ export const findChildrenByType = (component, type, children = []) => {
     findChildrenByType(child, type, children)
   })
 }
+
+/**
+ * Recursively searches for the parent component of a specific component ID
+ */
+export const findComponentParent = (rootComponent, id, parentComponent) => {
+  if (!rootComponent || !id) {
+    return null
+  }
+  if (rootComponent._id === id) {
+    return parentComponent
+  }
+  if (!rootComponent._children) {
+    return null
+  }
+  for (const child of rootComponent._children) {
+    const childResult = findComponentParent(child, id, rootComponent)
+    if (childResult) {
+      return childResult
+    }
+  }
+  return null
+}