@tanstack/form-core 0.41.4 → 0.42.1

package/src/FormApi.ts

@@ -13,6 +13,7 @@ import {
   isStandardSchemaValidator,
   standardSchemaValidator,
 } from './standardSchemaValidator'
+import { metaHelper } from './metaHelper'
 import type { StandardSchemaV1 } from './standardSchemaValidator'
 import type { FieldApi, FieldMeta, FieldMetaBase } from './FieldApi'
 import type {
@@ -1265,9 +1266,6 @@ export class FormApi<
     this.validateField(field, 'change')
   }
 
-  /**
-   * Inserts a value into an array field at the specified index, shifting the subsequent values to the right.
-   */
   insertFieldValue = async <TField extends DeepKeys<TFormData>>(
     field: TField,
     index: number,
@@ -1290,6 +1288,11 @@ export class FormApi<
 
     // Validate the whole array + all fields that have shifted
     await this.validateField(field, 'change')
+
+    // Shift down all meta after validating to make sure the new field has been mounted
+    metaHelper(this).handleArrayFieldMetaShift(field, index, 'insert')
+
+    await this.validateArrayFieldsStartingFrom(field, index, 'change')
   }
 
   /**
@@ -1342,6 +1345,9 @@ export class FormApi<
       opts,
     )
 
+    // Shift up all meta
+    metaHelper(this).handleArrayFieldMetaShift(field, index, 'remove')
+
     if (lastIndex !== null) {
       const start = `${field}[${lastIndex}]`
       const fieldsToDelete = Object.keys(this.fieldInfo).filter((f) =>
@@ -1376,6 +1382,9 @@ export class FormApi<
       opts,
     )
 
+    // Swap meta
+    metaHelper(this).handleArrayFieldMetaShift(field, index1, 'swap', index2)
+
     // Validate the whole array
     this.validateField(field, 'change')
     // Validate the swapped fields
@@ -1401,6 +1410,9 @@ export class FormApi<
       opts,
     )
 
+    // Move meta between index1 and index2
+    metaHelper(this).handleArrayFieldMetaShift(field, index1, 'move', index2)
+
     // Validate the whole array
     this.validateField(field, 'change')
     // Validate the moved fields

package/src/mergeForm.ts

@@ -2,34 +2,73 @@ import type { FormApi } from './FormApi'
 import type { Validator } from './types'
 import type { NoInfer } from './util-types'
 
+function isValidKey(key: string | number | symbol): boolean {
+  const dangerousProps = ['__proto__', 'constructor', 'prototype']
+  return !dangerousProps.includes(String(key))
+}
+
 /**
  * @private
  */
-export function mutateMergeDeep(target: object, source: object): object {
+export function mutateMergeDeep(
+  target: object | null | undefined,
+  source: object | null | undefined,
+): object {
+  // Early return if either is not an object
+  if (target === null || target === undefined || typeof target !== 'object')
+    return {} as object
+  if (source === null || source === undefined || typeof source !== 'object')
+    return target
+
   const targetKeys = Object.keys(target)
   const sourceKeys = Object.keys(source)
   const keySet = new Set([...targetKeys, ...sourceKeys])
+
   for (const key of keySet) {
-    const targetKey = key as never as keyof typeof target
-    const sourceKey = key as never as keyof typeof source
-
-    if (Array.isArray(target[targetKey]) && Array.isArray(source[sourceKey])) {
-      // always use the source array to prevent array fields from multiplying
-      target[targetKey] = source[sourceKey] as [] as never
-    } else if (
-      typeof target[targetKey] === 'object' &&
-      typeof source[sourceKey] === 'object'
-    ) {
-      mutateMergeDeep(target[targetKey] as {}, source[sourceKey] as {})
-    } else {
-      // Prevent assigning undefined to target, only if undefined is not explicitly set on source
-      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-      if (!(sourceKey in source) && source[sourceKey] === undefined) {
-        continue
-      }
-      target[targetKey] = source[sourceKey] as never
+    if (!isValidKey(key)) continue
+
+    const targetKey = key as keyof typeof target
+    const sourceKey = key as keyof typeof source
+
+    if (!Object.hasOwn(source, sourceKey)) continue
+
+    const sourceValue = source[sourceKey] as unknown
+    const targetValue = target[targetKey] as unknown
+
+    // Handle arrays
+    if (Array.isArray(targetValue) && Array.isArray(sourceValue)) {
+      Object.defineProperty(target, key, {
+        value: [...sourceValue],
+        enumerable: true,
+        writable: true,
+        configurable: true,
+      })
+      continue
+    }
+
+    // Handle nested objects (type assertion to satisfy ESLint)
+    const isTargetObj = typeof targetValue === 'object' && targetValue !== null
+    const isSourceObj = typeof sourceValue === 'object' && sourceValue !== null
+    const areObjects =
+      isTargetObj &&
+      isSourceObj &&
+      !Array.isArray(targetValue) &&
+      !Array.isArray(sourceValue)
+
+    if (areObjects) {
+      mutateMergeDeep(targetValue as object, sourceValue as object)
+      continue
     }
+
+    // Handle all other cases
+    Object.defineProperty(target, key, {
+      value: sourceValue,
+      enumerable: true,
+      writable: true,
+      configurable: true,
+    })
   }
+
   return target
 }
 

package/src/metaHelper.ts

@@ -0,0 +1,184 @@
+import type { FieldMeta } from './FieldApi'
+import type { FormApi } from './FormApi'
+import type { Validator } from './types'
+import type { DeepKeys } from './util-types'
+
+type ArrayFieldMode = 'insert' | 'remove' | 'swap' | 'move'
+
+export function metaHelper<
+  TFormData,
+  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,
+>(formApi: FormApi<TFormData, TFormValidator>) {
+  function handleArrayFieldMetaShift(
+    field: DeepKeys<TFormData>,
+    index: number,
+    mode: ArrayFieldMode,
+    secondIndex?: number,
+  ) {
+    const affectedFields = getAffectedFields(field, index, mode, secondIndex)
+
+    const handlers = {
+      insert: () => handleInsertMode(affectedFields, field, index),
+      remove: () => handleRemoveMode(affectedFields),
+      swap: () =>
+        secondIndex !== undefined &&
+        handleSwapMode(affectedFields, field, index, secondIndex),
+      move: () =>
+        secondIndex !== undefined &&
+        handleMoveMode(affectedFields, field, index, secondIndex),
+    }
+
+    handlers[mode]()
+  }
+
+  function getFieldPath(field: DeepKeys<TFormData>, index: number): string {
+    return `${field}[${index}]`
+  }
+
+  function getAffectedFields(
+    field: DeepKeys<TFormData>,
+    index: number,
+    mode: ArrayFieldMode,
+    secondIndex?: number,
+  ): DeepKeys<TFormData>[] {
+    const affectedFieldKeys = [getFieldPath(field, index)]
+
+    if (mode === 'swap') {
+      affectedFieldKeys.push(getFieldPath(field, secondIndex!))
+    } else if (mode === 'move') {
+      const [startIndex, endIndex] = [
+        Math.min(index, secondIndex!),
+        Math.max(index, secondIndex!),
+      ]
+      for (let i = startIndex; i <= endIndex; i++) {
+        affectedFieldKeys.push(getFieldPath(field, i))
+      }
+    } else {
+      const currentValue = formApi.getFieldValue(field)
+      const fieldItems = Array.isArray(currentValue) ? currentValue.length : 0
+      for (let i = index + 1; i < fieldItems; i++) {
+        affectedFieldKeys.push(getFieldPath(field, i))
+      }
+    }
+
+    return Object.keys(formApi.fieldInfo).filter((fieldKey) =>
+      affectedFieldKeys.some((key) => fieldKey.startsWith(key)),
+    ) as DeepKeys<TFormData>[]
+  }
+
+  function updateIndex(
+    fieldKey: string,
+    direction: 'up' | 'down',
+  ): DeepKeys<TFormData> {
+    return fieldKey.replace(/\[(\d+)\]/, (_, num) => {
+      const currIndex = parseInt(num, 10)
+      const newIndex =
+        direction === 'up' ? currIndex + 1 : Math.max(0, currIndex - 1)
+      return `[${newIndex}]`
+    }) as DeepKeys<TFormData>
+  }
+
+  function shiftMeta(fields: DeepKeys<TFormData>[], direction: 'up' | 'down') {
+    const sortedFields = direction === 'up' ? fields : [...fields].reverse()
+
+    sortedFields.forEach((fieldKey) => {
+      const nextFieldKey = updateIndex(fieldKey.toString(), direction)
+      const nextFieldMeta = formApi.getFieldMeta(nextFieldKey)
+      if (nextFieldMeta) {
+        formApi.setFieldMeta(fieldKey, nextFieldMeta)
+      }
+    })
+  }
+
+  const getEmptyFieldMeta = (): FieldMeta => ({
+    isValidating: false,
+    isTouched: false,
+    isBlurred: false,
+    isDirty: false,
+    isPristine: true,
+    errors: [],
+    errorMap: {},
+  })
+
+  const handleInsertMode = (
+    fields: DeepKeys<TFormData>[],
+    field: DeepKeys<TFormData>,
+    insertIndex: number,
+  ) => {
+    shiftMeta(fields, 'down')
+
+    fields.forEach((fieldKey) => {
+      if (fieldKey.toString().startsWith(getFieldPath(field, insertIndex))) {
+        formApi.setFieldMeta(fieldKey, getEmptyFieldMeta())
+      }
+    })
+  }
+
+  const handleRemoveMode = (fields: DeepKeys<TFormData>[]) => {
+    shiftMeta(fields, 'up')
+  }
+
+  const handleMoveMode = (
+    fields: DeepKeys<TFormData>[],
+    field: DeepKeys<TFormData>,
+    fromIndex: number,
+    toIndex: number,
+  ) => {
+    // Store the original field meta that will be reapplied at the destination index
+    const fromFields = new Map(
+      Object.keys(formApi.fieldInfo)
+        .filter((fieldKey) =>
+          fieldKey.startsWith(getFieldPath(field, fromIndex)),
+        )
+        .map((fieldKey) => [
+          fieldKey as DeepKeys<TFormData>,
+          formApi.getFieldMeta(fieldKey as DeepKeys<TFormData>),
+        ]),
+    )
+
+    shiftMeta(fields, fromIndex < toIndex ? 'up' : 'down')
+
+    // Reapply the stored field meta at the destination index
+    Object.keys(formApi.fieldInfo)
+      .filter((fieldKey) => fieldKey.startsWith(getFieldPath(field, toIndex)))
+      .forEach((fieldKey) => {
+        const fromKey = fieldKey.replace(
+          getFieldPath(field, toIndex),
+          getFieldPath(field, fromIndex),
+        ) as DeepKeys<TFormData>
+
+        const fromMeta = fromFields.get(fromKey)
+        if (fromMeta) {
+          formApi.setFieldMeta(fieldKey as DeepKeys<TFormData>, fromMeta)
+        }
+      })
+  }
+
+  const handleSwapMode = (
+    fields: DeepKeys<TFormData>[],
+    field: DeepKeys<TFormData>,
+    index: number,
+    secondIndex: number,
+  ) => {
+    fields.forEach((fieldKey) => {
+      if (!fieldKey.toString().startsWith(getFieldPath(field, index))) return
+
+      const swappedKey = fieldKey
+        .toString()
+        .replace(
+          getFieldPath(field, index),
+          getFieldPath(field, secondIndex),
+        ) as DeepKeys<TFormData>
+
+      const [meta1, meta2] = [
+        formApi.getFieldMeta(fieldKey),
+        formApi.getFieldMeta(swappedKey),
+      ]
+
+      if (meta1) formApi.setFieldMeta(swappedKey, meta1)
+      if (meta2) formApi.setFieldMeta(fieldKey, meta2)
+    })
+  }
+
+  return { handleArrayFieldMetaShift }
+}