fix(form-core): fix fields being stale on array changes (#1729)

* add 'found' property to getBy

* WIP: for testing

* ci: apply automated fixes and generate docs

* refactor metaHelper for clarity

* add baseStore to fieldApi

* chore: remove dead code from metaHelper

* chore: let's see what sticks

* chore: remove unneeded additional store

* fix undefined errors being passed to fieldMeta

* remove unused import

* chore: add tests for vue

* chore: clean up previous drafts

* remove unrelated unit test diff

* fix: prevent defaultValue regression

* chore: adjust unit tests's target value

* fix: adhere to rules of react for useField

* chore: add solidjs unit test

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Lachlan Collins <1667261+lachlancollins@users.noreply.github.com>

Author: 3 people

packages/form-core/src/FieldApi.ts

@@ -6,6 +6,7 @@ import {
 import { defaultFieldMeta } from './metaHelper'
 import {
   determineFieldLevelErrorSourceAndValue,
+  evaluate,
   getAsyncValidatorArray,
   getBy,
   getSyncValidatorArray,
@@ -1052,7 +1053,7 @@ export class FieldApi<
   /**
    * The field name.
    */
-  name!: DeepKeys<TParentData>
+  name: TName
   /**
    * The field options.
    */
@@ -1151,8 +1152,10 @@ export class FieldApi<
       TParentSubmitMeta
     >,
   ) {
-    this.form = opts.form as never
-    this.name = opts.name as never
+    this.form = opts.form
+    this.name = opts.name
+    this.options = opts
+
     this.timeoutIds = {
       validations: {} as Record<ValidationCause, never>,
       listeners: {} as Record<ListenerCause, never>,
@@ -1162,12 +1165,21 @@ export class FieldApi<
     this.store = new Derived({
       deps: [this.form.store],
       fn: () => {
-        const value = this.form.getFieldValue(this.name)
         const meta = this.form.getFieldMeta(this.name) ?? {
           ...defaultFieldMeta,
           ...opts.defaultMeta,
         }
 
+        let value = this.form.getFieldValue(this.name)
+        if (
+          !meta.isTouched &&
+          (value as unknown) === undefined &&
+          this.options.defaultValue !== undefined &&
+          !evaluate(value, this.options.defaultValue)
+        ) {
+          value = this.options.defaultValue
+        }
+
         return {
           value,
           meta,
@@ -1196,8 +1208,6 @@ export class FieldApi<
         >
       },
     })
-
-    this.options = opts as never
   }
 
   /**
@@ -1232,8 +1242,8 @@ export class FieldApi<
   mount = () => {
     const cleanup = this.store.mount()
 
-    if ((this.options.defaultValue as unknown) !== undefined) {
-      this.form.setFieldValue(this.name, this.options.defaultValue as never, {
+    if (this.options.defaultValue !== undefined && !this.getMeta().isTouched) {
+      this.form.setFieldValue(this.name, this.options.defaultValue, {
         dontUpdateMeta: true,
       })
     }
@@ -1309,33 +1319,23 @@ export class FieldApi<
       TParentSubmitMeta
     >,
   ) => {
-    this.options = opts as never
-
-    const nameHasChanged = this.name !== opts.name
+    this.options = opts
     this.name = opts.name
 
     // Default Value
-    if ((this.state.value as unknown) === undefined) {
-      const formDefault = getBy(opts.form.options.defaultValues, opts.name)
-
-      const defaultValue = (opts.defaultValue as unknown) ?? formDefault
-
-      // The name is dynamic in array fields. It changes when the user performs operations like removing or reordering.
-      // In this case, we don't want to force a default value if the store managed to find an existing value.
-      if (nameHasChanged) {
-        this.setValue((val) => (val as unknown) || defaultValue, {
-          dontUpdateMeta: true,
-        })
-      } else if (defaultValue !== undefined) {
-        this.setValue(defaultValue as never, {
+    if (!this.state.meta.isTouched && this.options.defaultValue !== undefined) {
+      const formField = this.form.getFieldValue(this.name)
+      if (!evaluate(formField, opts.defaultValue)) {
+        this.form.setFieldValue(this.name, opts.defaultValue as never, {
           dontUpdateMeta: true,
+          dontValidate: true,
+          dontRunListeners: true,
         })
       }
     }
 
-    // Default Meta
-    if (this.form.getFieldMeta(this.name) === undefined) {
-      this.setMeta(this.state.meta)
+    if (!this.form.getFieldMeta(this.name)) {
+      this.form.setFieldMeta(this.name, this.state.meta)
     }
   }
 

packages/form-core/src/FormApi.ts

@@ -1071,20 +1071,18 @@ export class FormApi<
             // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
             fieldErrors = Object.values(currBaseMeta.errorMap ?? {}).filter(
               (val) => val !== undefined,
-            ) as never
+            )
 
             // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
             const fieldInstance = this.getFieldInfo(fieldName)?.instance
 
             if (fieldInstance && !fieldInstance.options.disableErrorFlat) {
-              fieldErrors = (fieldErrors as undefined | string[])?.flat(
-                1,
-              ) as never
+              fieldErrors = fieldErrors.flat(1)
             }
           }
 
           // As primitives, we don't need to aggressively persist the same referential value for performance reasons
-          const isFieldValid = !isNonEmptyArray(fieldErrors ?? [])
+          const isFieldValid = !isNonEmptyArray(fieldErrors)
           const isFieldPristine = !currBaseMeta.isDirty
           const isDefaultValue =
             evaluate(
@@ -1112,11 +1110,11 @@ export class FormApi<
 
           fieldMeta[fieldName] = {
             ...currBaseMeta,
-            errors: fieldErrors,
+            errors: fieldErrors ?? [],
             isPristine: isFieldPristine,
             isValid: isFieldValid,
             isDefaultValue: isDefaultValue,
-          } as AnyFieldMeta
+          } satisfies AnyFieldMeta as AnyFieldMeta
         }
 
         if (!Object.keys(currBaseStore.fieldMetaBase).length) return fieldMeta
@@ -2347,7 +2345,7 @@ export class FormApi<
     }
 
     // Shift down all meta after validating to make sure the new field has been mounted
-    metaHelper(this).handleArrayFieldMetaShift(field, index, 'insert')
+    metaHelper(this).handleArrayInsert(field, index)
 
     if (!dontValidate) {
       await this.validateArrayFieldsStartingFrom(field, index, 'change')
@@ -2408,7 +2406,7 @@ export class FormApi<
     )
 
     // Shift up all meta
-    metaHelper(this).handleArrayFieldMetaShift(field, index, 'remove')
+    metaHelper(this).handleArrayRemove(field, index)
 
     if (lastIndex !== null) {
       const start = `${field}[${lastIndex}]`
@@ -2443,7 +2441,7 @@ export class FormApi<
     )
 
     // Swap meta
-    metaHelper(this).handleArrayFieldMetaShift(field, index1, 'swap', index2)
+    metaHelper(this).handleArraySwap(field, index1, index2)
 
     const dontValidate = options?.dontValidate ?? false
     if (!dontValidate) {
@@ -2475,7 +2473,7 @@ export class FormApi<
     )
 
     // Move meta between index1 and index2
-    metaHelper(this).handleArrayFieldMetaShift(field, index1, 'move', index2)
+    metaHelper(this).handleArrayMove(field, index1, index2)
 
     const dontValidate = options?.dontValidate ?? false
     if (!dontValidate) {