From 4510a5b71e56cda11d1493e614c5be4bffdfbd81 Mon Sep 17 00:00:00 2001
From: Davide Di Pumpo <davidemak@gmail.com>
Date: Thu, 4 Dec 2025 00:41:08 +0100
Subject: [PATCH] fix: enhance field registration and error handling for better
 component re-mounting

---
 .changeset/cold-singers-matter.md                  |  5 +++++
 .../src/components/OmegaForm/OmegaInput.vue        | 13 -------------
 .../components/OmegaForm/OmegaInternalInput.vue    |  1 +
 .../src/components/OmegaForm/useOmegaForm.ts       | 14 ++++++++++++--
 .../src/components/OmegaForm/useRegisterField.ts   |  4 +++-
 5 files changed, 21 insertions(+), 16 deletions(-)
 create mode 100644 .changeset/cold-singers-matter.md

diff --git a/.changeset/cold-singers-matter.md b/.changeset/cold-singers-matter.md
new file mode 100644
index 000000000..90d7e7a20
--- /dev/null
+++ b/.changeset/cold-singers-matter.md
@@ -0,0 +1,5 @@
+---
+"@effect-app/vue-components": patch
+---
+
+fix: enhance field registration and error handling for better component re-mounting
diff --git a/packages/vue-components/src/components/OmegaForm/OmegaInput.vue b/packages/vue-components/src/components/OmegaForm/OmegaInput.vue
index a78f0bec6..b4f3ddd8b 100644
--- a/packages/vue-components/src/components/OmegaForm/OmegaInput.vue
+++ b/packages/vue-components/src/components/OmegaForm/OmegaInput.vue
@@ -1,7 +1,6 @@
 <template>
   <component
     :is="form.Field"
-    :key="fieldKey"
     :name="name"
     :validators="{
       onChange: schema,
@@ -82,18 +81,6 @@ const meta = computed(() => {
   return props.form.meta[propsName.value]
 })
 
-// Key to force Field re-mount when meta type changes (for TaggedUnion support)
-const fieldKey = computed(() => {
-  const m = meta.value
-  if (!m) return propsName.value
-  // Include type and key constraints in the key so Field re-mounts when validation rules change
-  // Cast to any since not all FieldMeta variants have these properties
-  const fm = m as any
-  return `${propsName.value}-${fm.type}-${fm.minLength ?? ""}-${fm.maxLength ?? ""}-${fm.minimum ?? ""}-${
-    fm.maximum ?? ""
-  }`
-})
-
 // Call useIntl during setup to avoid issues when computed re-evaluates
 const { trans } = useIntl()
 
diff --git a/packages/vue-components/src/components/OmegaForm/OmegaInternalInput.vue b/packages/vue-components/src/components/OmegaForm/OmegaInternalInput.vue
index 3c463a791..41bea515a 100644
--- a/packages/vue-components/src/components/OmegaForm/OmegaInternalInput.vue
+++ b/packages/vue-components/src/components/OmegaForm/OmegaInternalInput.vue
@@ -102,6 +102,7 @@ props.register(computed(() => ({ name: props.field.name, label: props.label, id
 // This ensures errors persist when Field components re-mount due to :key changes
 const _errors = computed(() => {
   const fieldMeta = formFieldMeta.value[props.field.name] as any
+  // Treat errors as an array (like useOmegaForm does)
   return fieldMeta?.errors ?? []
 })
 const errors = computed(() =>
diff --git a/packages/vue-components/src/components/OmegaForm/useOmegaForm.ts b/packages/vue-components/src/components/OmegaForm/useOmegaForm.ts
index f580f9629..8e50eac95 100644
--- a/packages/vue-components/src/components/OmegaForm/useOmegaForm.ts
+++ b/packages/vue-components/src/components/OmegaForm/useOmegaForm.ts
@@ -962,8 +962,18 @@ export const useOmegaForm = <
     // /** @experimental */
     handleSubmitEffect,
     registerField: (field: ComputedRef<{ name: string; label: string; id: string }>) => {
-      watch(field, (f) => fieldMap.value.set(f.name, { label: f.label, id: f.id }), { immediate: true })
-      onUnmounted(() => fieldMap.value.delete(field.value.name)) // todo; perhap only when owned (id match)
+      watch(field, (f) => {
+        fieldMap.value.set(f.name, { label: f.label, id: f.id })
+      }, { immediate: true })
+      onUnmounted(() => {
+        // Only delete if we still own this entry (id matches)
+        // This prevents old components from deleting entries registered by new components
+        // during re-mount transitions (e.g., when :key changes)
+        const currentEntry = fieldMap.value.get(field.value.name)
+        if (currentEntry?.id === field.value.id) {
+          fieldMap.value.delete(field.value.name)
+        }
+      })
     }
   })
 
diff --git a/packages/vue-components/src/components/OmegaForm/useRegisterField.ts b/packages/vue-components/src/components/OmegaForm/useRegisterField.ts
index 412da3ec0..213e19750 100644
--- a/packages/vue-components/src/components/OmegaForm/useRegisterField.ts
+++ b/packages/vue-components/src/components/OmegaForm/useRegisterField.ts
@@ -5,7 +5,9 @@ const Key = Symbol("injected") as InjectionKey<Map<string, { label: string; id:
 
 export const useRegisterField = (field: ComputedRef<{ name: string; label: string; id: string }>) => {
   const map = injectCertain(Key)
-  watch(field, (f) => map.set(f.name, { label: f.label, id: f.id }), { immediate: true })
+  watch(field, (f) => {
+    map.set(f.name, { label: f.label, id: f.id })
+  }, { immediate: true })
   onUnmounted(() => map.delete(field.value.name)) // todo; perhap only when owned
 }