Merge pull request #11251 from Budibase/fix/block-component-keying

Fix block component keying

packages/client/src/components/Block.svelte

@@ -8,27 +8,31 @@
 
   let structureLookupMap = {}
 
-  const registerBlockComponent = (id, order, parentId, instance) => {
+  const registerBlockComponent = (id, parentId, order, instance) => {
     // Ensure child map exists
     if (!structureLookupMap[parentId]) {
       structureLookupMap[parentId] = {}
     }
     // Add this instance in this order, overwriting any existing instance in
     // this order in case of repeaters
-    structureLookupMap[parentId][order] = instance
+    structureLookupMap[parentId][id] = { order, instance }
   }
 
-  const unregisterBlockComponent = (order, parentId) => {
+  const unregisterBlockComponent = (id, parentId) => {
     // Ensure child map exists
     if (!structureLookupMap[parentId]) {
       return
     }
-    delete structureLookupMap[parentId][order]
+    delete structureLookupMap[parentId][id]
   }
 
   const eject = () => {
     // Start the new structure with the root component
-    let definition = structureLookupMap[$component.id][0]
+    const rootMap = structureLookupMap[$component.id] || {}
+    let definition = Object.values(rootMap)[0]?.instance
+    if (!definition) {
+      return
+    }
 
     // Copy styles from block to root component
     definition._styles = {
@@ -49,10 +53,7 @@
   const attachChildren = (rootComponent, map) => {
     // Transform map into children array
     let id = rootComponent._id
-    const children = Object.entries(map[id] || {}).map(([order, instance]) => ({
+    const children = Object.values(map[id] || {})
-      order,
-      instance,
-    }))
     if (!children.length) {
       return
     }

packages/client/src/components/BlockComponent.svelte

@@ -23,6 +23,8 @@
   // Create a fake component instance so that we can use the core Component
   // to render this part of the block, taking advantage of binding enrichment
   $: id = `${block.id}-${context ?? rand}`
+  $: parentId = $component?.id
+  $: inBuilder = $builderStore.inBuilder
   $: instance = {
     _component: `@budibase/standard-components/${type}`,
     _id: id,
@@ -38,14 +40,14 @@
   // Register this block component if we're inside the builder so it can be
   // ejected later
   $: {
-    if ($builderStore.inBuilder) {
+    if (inBuilder) {
-      block.registerComponent(id, order ?? 0, $component?.id, instance)
+      block.registerComponent(id, parentId, order ?? 0, instance)
     }
   }
 
   onDestroy(() => {
-    if ($builderStore.inBuilder) {
+    if (inBuilder) {
-      block.unregisterComponent(order ?? 0, $component?.id)
+      block.unregisterComponent(id, parentId)
     }
   })
 </script>

packages/client/src/components/app/blocks/CardsBlock.svelte

@@ -126,7 +126,7 @@
             order={1}
           >
             {#if enrichedSearchColumns?.length}
-              {#each enrichedSearchColumns as column, idx}
+              {#each enrichedSearchColumns as column, idx (column.name)}
                 <BlockComponent
                   type={column.componentType}
                   props={{

packages/client/src/components/app/blocks/TableBlock.svelte

@@ -169,7 +169,7 @@
             order={1}
           >
             {#if enrichedSearchColumns?.length}
-              {#each enrichedSearchColumns as column, idx}
+              {#each enrichedSearchColumns as column, idx (column.name)}
                 <BlockComponent
                   type={column.componentType}
                   props={{