diff --git a/packages/client/src/components/Block.svelte b/packages/client/src/components/Block.svelte index 112b2387a7..412dd6588a 100644 --- a/packages/client/src/components/Block.svelte +++ b/packages/client/src/components/Block.svelte @@ -4,6 +4,9 @@ const component = getContext("component") const { styleable } = getContext("sdk") + // We need to set a block context to know we're inside a block, but also + // to be able to reference the actual component ID of the block from + // any depth setContext("block", { id: $component.id, }) diff --git a/packages/client/src/components/BlockComponent.svelte b/packages/client/src/components/BlockComponent.svelte index 5ef0509391..e12c6eb86e 100644 --- a/packages/client/src/components/BlockComponent.svelte +++ b/packages/client/src/components/BlockComponent.svelte @@ -6,6 +6,9 @@ export let type export let props export let styles + + // ID is only exposed as a prop so that it can be bound to from parent + // block components export let id const block = getContext("block") @@ -14,6 +17,8 @@ $: id = block.id + rand $: instance = createInstance(type, props, id) + // 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 const createInstance = (type, props, id) => { return { _component: `@budibase/standard-components/${type}`, diff --git a/packages/client/src/components/app/blocks/TableWithSearch.svelte b/packages/client/src/components/app/blocks/TableWithSearch.svelte index a11f11be26..f5f84b664a 100644 --- a/packages/client/src/components/app/blocks/TableWithSearch.svelte +++ b/packages/client/src/components/app/blocks/TableWithSearch.svelte @@ -21,6 +21,7 @@ $: enrichedFilter = enrichFilter(filter, searchColumns, formId) + // Enrich the default filter with the specified search fields const enrichFilter = (filter, searchColumns, formId) => { let enrichedFilter = [...(filter || [])] searchColumns?.forEach(column => {