From 4ce25fdf0bcd4a9d49316afdb0b6cabb348a0fa1 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 18 Nov 2021 14:18:06 +0000
Subject: [PATCH] Allow dynamic re-registration of form field components

---
 .../src/components/app/forms/Field.svelte       | 17 ++---------------
 .../src/components/app/forms/InnerForm.svelte   | 17 ++++++++---------
 2 files changed, 10 insertions(+), 24 deletions(-)

diff --git a/packages/client/src/components/app/forms/Field.svelte b/packages/client/src/components/app/forms/Field.svelte
index d0bfce9738..2832a38bb7 100644
--- a/packages/client/src/components/app/forms/Field.svelte
+++ b/packages/client/src/components/app/forms/Field.svelte
@@ -23,7 +23,7 @@
   // Register field with form
   const formApi = formContext?.formApi
   const labelPos = fieldGroupContext?.labelPosition || "above"
-  const formField = formApi?.registerField(
+  $: formField = formApi?.registerField(
     field,
     type,
     defaultValue,
@@ -37,29 +37,16 @@
   $: $component.editing && labelNode?.focus()
 
   // Update form properties in parent component on every store change
-  const unsubscribe = formField?.subscribe(value => {
+  $: unsubscribe = formField?.subscribe(value => {
     fieldState = value?.fieldState
     fieldApi = value?.fieldApi
     fieldSchema = value?.fieldSchema
   })
   onDestroy(() => unsubscribe?.())
 
-  // Keep field state up to date with props which might change due to
-  // conditional UI
-  $: updateValidation(validation)
-  $: updateDisabled(disabled)
-
   // Determine label class from position
   $: labelClass = labelPos === "above" ? "" : `spectrum-FieldLabel--${labelPos}`
 
-  const updateValidation = validation => {
-    fieldApi?.updateValidation(validation)
-  }
-
-  const updateDisabled = disabled => {
-    fieldApi?.setDisabled(disabled)
-  }
-
   const updateLabel = e => {
     builderStore.actions.updateProp("label", e.target.textContent)
   }
diff --git a/packages/client/src/components/app/forms/InnerForm.svelte b/packages/client/src/components/app/forms/InnerForm.svelte
index fbf3d2db9f..432c9b2bde 100644
--- a/packages/client/src/components/app/forms/InnerForm.svelte
+++ b/packages/client/src/components/app/forms/InnerForm.svelte
@@ -96,15 +96,14 @@
         return
       }
 
-      // If we've already registered this field then wipe any errors and
-      // return the existing field
+      // If we've already registered this field then keep some existing state
+      let initialValue = initialValues[field] ?? defaultValue
+      let fieldId = `id-${generateID()}`
       const existingField = getField(field)
       if (existingField) {
-        existingField.update(state => {
-          state.fieldState.error = null
-          return state
-        })
-        return existingField
+        const { fieldState } = get(existingField)
+        initialValue = fieldState.value ?? initialValue
+        fieldId = fieldState.fieldId
       }
 
       // Auto columns are always disabled
@@ -125,8 +124,8 @@
         type,
         step: step || 1,
         fieldState: {
-          fieldId: `id-${generateID()}`,
-          value: initialValues[field] ?? defaultValue,
+          fieldId,
+          value: initialValue,
           error: null,
           disabled: disabled || fieldDisabled || isAutoColumn,
           defaultValue,