fix: ensure async validation cancellation on field unmount

Author: TkDodo

packages/form-core/src/FieldApi.ts

@@ -1863,12 +1863,13 @@ export class FieldApi<
       promises: Promise<ValidationError | undefined>[],
     ) => {
       const errorMapKey = getErrorMapKey(validateObj.cause)
-      const fieldValidatorMeta = field.getInfo().validationMetaMap[errorMapKey]
+      const fieldInfo = field.getInfo()
+      const fieldValidatorMeta = fieldInfo.validationMetaMap[errorMapKey]
 
       fieldValidatorMeta?.lastAbortController.abort()
       const controller = new AbortController()
 
-      this.getInfo().validationMetaMap[errorMapKey] = {
+      fieldInfo.validationMetaMap[errorMapKey] = {
         lastAbortController: controller,
       }
 
@@ -1877,11 +1878,11 @@ export class FieldApi<
           let rawError!: ValidationError | undefined
           try {
             rawError = await new Promise((rawResolve, rawReject) => {
-              if (this.timeoutIds.validations[validateObj.cause]) {
-                clearTimeout(this.timeoutIds.validations[validateObj.cause]!)
+              if (field.timeoutIds.validations[validateObj.cause]) {
+                clearTimeout(field.timeoutIds.validations[validateObj.cause]!)
               }
 
-              this.timeoutIds.validations[validateObj.cause] = setTimeout(
+              field.timeoutIds.validations[validateObj.cause] = setTimeout(
                 async () => {
                   if (controller.signal.aborted) return rawResolve(undefined)
                   try {
@@ -1911,14 +1912,20 @@ export class FieldApi<
 
           const fieldLevelError = normalizeError(rawError)
           const formLevelError =
-            asyncFormValidationResults[this.name]?.[errorMapKey]
+            asyncFormValidationResults[
+              field.name as keyof typeof asyncFormValidationResults
+            ]?.[errorMapKey]
 
           const { newErrorValue, newSource } =
             determineFieldLevelErrorSourceAndValue({
               formLevelError,
               fieldLevelError,
             })
 
+          if (field.getInfo().instance !== field) {
+            return resolve(undefined)
+          }
+
           field.setMeta((prev) => {
             return {
               ...prev,

packages/form-core/tests/FieldApi.spec.ts

@@ -2229,6 +2229,61 @@ describe('field api', () => {
     ])
   })
 
+  it('should cancel linked field async validation when the target field unmounts', async () => {
+    vi.useFakeTimers()
+
+    let resolve!: () => void
+    const promise = new Promise((r) => {
+      resolve = r as never
+    })
+
+    const form = new FormApi({
+      defaultValues: {
+        password: '',
+        confirm_password: '',
+      },
+      cleanupFieldsOnUnmount: true,
+    })
+
+    form.mount()
+
+    const passField = new FieldApi({
+      form,
+      name: 'password',
+    })
+
+    const passconfirmField = new FieldApi({
+      form,
+      name: 'confirm_password',
+      validators: {
+        onChangeListenTo: ['password'],
+        onChangeAsyncDebounceMs: 0,
+        onChangeAsync: async () => {
+          await promise
+          return 'Passwords do not match'
+        },
+      },
+    })
+
+    passField.mount()
+    const unmount = passconfirmField.mount()
+
+    passField.setValue('one')
+    await vi.runAllTimersAsync()
+
+    expect(unmount).toBeTypeOf('function')
+    unmount()
+    resolve()
+    await vi.runAllTimersAsync()
+
+    expect(form.state.fieldMeta.confirm_password).toMatchObject({
+      errors: [],
+      isValid: true,
+    })
+
+    vi.useRealTimers()
+  })
+
   it('should add  a new value to the fieldApi errorMap', () => {
     interface Form {
       name: string