From 0143de5020d11c591d66cff3ff80451b0bdd4ab5 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 28 Apr 2022 16:35:38 +0100
Subject: [PATCH] Deregister field validation when unmounting form fields

---
 .../client/src/components/app/forms/Field.svelte     |  6 +++++-
 .../client/src/components/app/forms/InnerForm.svelte | 12 ++++++++++++
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/packages/client/src/components/app/forms/Field.svelte b/packages/client/src/components/app/forms/Field.svelte
index 3ebfc5084f..b267f6caff 100644
--- a/packages/client/src/components/app/forms/Field.svelte
+++ b/packages/client/src/components/app/forms/Field.svelte
@@ -44,7 +44,6 @@
     fieldApi = value?.fieldApi
     fieldSchema = value?.fieldSchema
   })
-  onDestroy(() => unsubscribe?.())
 
   // Determine label class from position
   $: labelClass = labelPos === "above" ? "" : `spectrum-FieldLabel--${labelPos}`
@@ -52,6 +51,11 @@
   const updateLabel = e => {
     builderStore.actions.updateProp("label", e.target.textContent)
   }
+
+  onDestroy(() => {
+    fieldApi?.deregister()
+    unsubscribe?.()
+  })
 </script>
 
 <FieldGroupFallback>
diff --git a/packages/client/src/components/app/forms/InnerForm.svelte b/packages/client/src/components/app/forms/InnerForm.svelte
index 99dcbf4d5e..752bc9a2eb 100644
--- a/packages/client/src/components/app/forms/InnerForm.svelte
+++ b/packages/client/src/components/app/forms/InnerForm.svelte
@@ -329,6 +329,17 @@
       }
     }
 
+    // We don't want to actually remove the field state when deregistering, just
+    // remove any errors and validation
+    const deregister = () => {
+      const fieldInfo = getField(field)
+      fieldInfo.update(state => {
+        state.fieldState.validator = null
+        state.fieldState.error = null
+        return state
+      })
+    }
+
     // Updates the disabled state of a certain field
     const setDisabled = fieldDisabled => {
       const fieldInfo = getField(field)
@@ -348,6 +359,7 @@
       reset,
       updateValidation,
       setDisabled,
+      deregister,
       validate: () => {
         // Validate the field by force setting the same value again
         const { fieldState } = get(getField(field))