Fix for datasource reset on formblock. Added 'resetOn' to the manifest to trigger a clear when the configured field is cleared

packages/builder/src/builderStore/store/frontend.js

@@ -1246,6 +1246,16 @@ export const getFrontendStore = () => {
           const settings = getComponentSettings(component._component)
           const updatedSetting = settings.find(setting => setting.key === name)
 
+          const resetFields = settings.filter(
+            setting => name === setting.resetOn
+          )
+          resetFields?.forEach(setting => {
+            console.log(setting.key, component)
+            if (component[setting.key]) {
+              component[setting.key] = null
+            }
+          })
+
           if (
             updatedSetting?.type === "dataSource" ||
             updatedSetting?.type === "table"

packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldConfiguration.svelte

@@ -34,9 +34,10 @@
   }
 
   $: datasource = getDatasourceForProvider($currentAsset, componentInstance)
+  $: resourceId = datasource.resourceId || datasource.tableId
 
-  $: if (!isEqual(value, cachedValue)) {
+  $: if (!isEqual(value, cachedValue) || resourceId) {
-    cachedValue = value
+    cachedValue = cloneDeep(value)
     schema = getSchema($currentAsset, datasource)
   }
 

packages/client/manifest.json

@@ -4745,7 +4745,8 @@
             "dependsOn": {
               "setting": "clickBehaviour",
               "value": "details"
-            }
+            },
+            "resetOn": "dataSource"
           },
           {
             "label": "Save button",
@@ -5397,6 +5398,7 @@
             "type": "fieldConfiguration",
             "key": "fields",
             "nested": true,
+            "resetOn": "dataSource",
             "selectAllFields": true
           },
           {

packages/client/src/components/app/blocks/form/InnerFormBlock.svelte

@@ -211,17 +211,19 @@
           {/if}
         </BlockComponent>
       {/if}
-      <BlockComponent type="fieldgroup" props={{ labelPosition }} order={1}>
+      {#key fields}
-        {#each fields as field, idx}
+        <BlockComponent type="fieldgroup" props={{ labelPosition }} order={1}>
-          {#if getComponentForField(field) && field.active}
+          {#each fields as field, idx}
-            <BlockComponent
+            {#if getComponentForField(field) && field.active}
-              type={getComponentForField(field)}
+              <BlockComponent
-              props={getPropsForField(field)}
+                type={getComponentForField(field)}
-              order={idx}
+                props={getPropsForField(field)}
-            />
+                order={idx}
-          {/if}
+              />
-        {/each}
+            {/if}
-      </BlockComponent>
+          {/each}
+        </BlockComponent>
+      {/key}
     </BlockComponent>
   </BlockComponent>
 {:else}