diff --git a/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte b/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte index 5c4f90606d..09732ce4f2 100644 --- a/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte +++ b/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte @@ -21,6 +21,7 @@ export let allowHelpers = true export let updateOnChange = true export let drawerLeft + export let disableBindings = false const dispatch = createEventDispatcher() let bindingDrawer @@ -62,7 +63,7 @@ {placeholder} {updateOnChange} /> - {#if !disabled} + {#if !disabled && !disableBindings}
{ diff --git a/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonSetting.svelte b/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonSetting.svelte index 8e8c89ac14..56b5deace4 100644 --- a/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonSetting.svelte +++ b/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonSetting.svelte @@ -17,18 +17,24 @@ // If this is a nested setting (for example inside a grid or form block) then // we need to mark all the settings of the actual buttons as nested too, to - // allow us to reference context provided by the block + // allow us to reference context provided by the block. + // We will need to update this in future if the normal button component + // gets broken into multiple settings sections, as we assume a flat array. const updatedNestedFlags = settings => { - if (!nested) { + if (!nested || !settings?.length) { return settings } - // Buttons do not currently have any sections, so this works. - // We will need to update this in future if the normal button component - // gets broken into multiple settings sections - return settings?.map(setting => ({ + let newSettings = settings.map(setting => ({ ...setting, nested: true, })) + // We need to prevent bindings for the button names because of how grid + // blocks work. This is an edge case but unavoidable. + let name = newSettings.find(x => x.key === "text") + if (name) { + name.disableBindings = true + } + return newSettings } diff --git a/packages/builder/src/components/design/settings/controls/PropertyControl.svelte b/packages/builder/src/components/design/settings/controls/PropertyControl.svelte index c8135b4f61..a6f3d1b218 100644 --- a/packages/builder/src/components/design/settings/controls/PropertyControl.svelte +++ b/packages/builder/src/components/design/settings/controls/PropertyControl.svelte @@ -23,6 +23,7 @@ export let highlighted = false export let propertyFocus = false export let info = null + export let disableBindings = false $: nullishValue = value == null || value === "" $: allBindings = getAllBindings(bindings, componentBindings, nested) @@ -99,6 +100,7 @@ {nested} {key} {type} + {disableBindings} {...props} on:drawerHide on:drawerShow diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte index 65f010e4ec..6093d2a45e 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte @@ -179,6 +179,7 @@ highlighted={$store.highlightedSettingKey === setting.key} propertyFocus={$store.propertyFocus === setting.key} info={setting.info} + disableBindings={setting.disableBindings} props={{ // Generic settings placeholder: setting.placeholder || null,