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,