Fully remove source component from client tree while dragging

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) {

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",

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
+}