From 4c013df676cf9e6bb2a6570a27e2489f97388131 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Thu, 9 Feb 2023 16:36:02 +0000
Subject: [PATCH] Reactivity fix for the editableColumn and an update to the
 onChange behaviour for the formula value to ensure updates are detected

---
 .../DataTable/modals/CreateEditColumn.svelte  | 27 ++++++++++++-------
 1 file changed, 18 insertions(+), 9 deletions(-)

diff --git a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
index 3e5549fcf5..95e53b4192 100644
--- a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
@@ -75,16 +75,20 @@
     editableColumn.constraints.presence = { allowEmpty: false }
   }
 
-  $: if (field && !savingColumn) {
-    editableColumn = cloneDeep(field)
-    originalName = editableColumn.name ? editableColumn.name + "" : null
-    linkEditDisabled = originalName != null
-    isCreating = originalName == null
-    primaryDisplay =
-      $tables.selected.primaryDisplay == null ||
-      $tables.selected.primaryDisplay === editableColumn.name
+  const initialiseField = (field, savingColumn) => {
+    if (field && !savingColumn) {
+      editableColumn = cloneDeep(field)
+      originalName = editableColumn.name ? editableColumn.name + "" : null
+      linkEditDisabled = originalName != null
+      isCreating = originalName == null
+      primaryDisplay =
+        $tables.selected.primaryDisplay == null ||
+        $tables.selected.primaryDisplay === editableColumn.name
+    }
   }
 
+  $: initialiseField(field, savingColumn)
+
   $: checkConstraints(editableColumn)
   $: required = !!editableColumn?.constraints?.presence || primaryDisplay
   $: uneditable =
@@ -583,7 +587,12 @@
       title="Formula"
       label="Formula"
       value={editableColumn.formula}
-      on:change={e => (editableColumn.formula = e.detail)}
+      on:change={e => {
+        editableColumn = {
+          ...editableColumn,
+          formula: e.detail,
+        }
+      }}
       bindings={getBindings({ table })}
       allowJS
     />