diff --git a/packages/client/src/components/Block.svelte b/packages/client/src/components/Block.svelte index b72ff81b49..a739065015 100644 --- a/packages/client/src/components/Block.svelte +++ b/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]) => ({ - order, - instance, - })) + const children = Object.values(map[id] || {}) if (!children.length) { return } diff --git a/packages/client/src/components/BlockComponent.svelte b/packages/client/src/components/BlockComponent.svelte index 4f720e2931..24d9b4dee4 100644 --- a/packages/client/src/components/BlockComponent.svelte +++ b/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) { - block.registerComponent(id, order ?? 0, $component?.id, instance) + if (inBuilder) { + block.registerComponent(id, parentId, order ?? 0, instance) } } onDestroy(() => { - if ($builderStore.inBuilder) { - block.unregisterComponent(order ?? 0, $component?.id) + if (inBuilder) { + block.unregisterComponent(id, parentId) } }) diff --git a/packages/client/src/components/app/blocks/CardsBlock.svelte b/packages/client/src/components/app/blocks/CardsBlock.svelte index bbe54867ee..3e48247f92 100644 --- a/packages/client/src/components/app/blocks/CardsBlock.svelte +++ b/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)} {#if enrichedSearchColumns?.length} - {#each enrichedSearchColumns as column, idx} + {#each enrichedSearchColumns as column, idx (column.name)}