Add new disableBindings property to prevent a text field from being bindable when required

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}
     <div
       class="icon"
       on:click={() => {

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
   }
 </script>
 

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

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,