fix(FieldApi): onChangeListenTo should not block onChangeAsync validator on field it is listening to

[Pascalmh]

fixes #1410

[nx-cloud]

View your CI Pipeline Execution ↗ for commit b627e3d.

Command	Status	Duration	Result
nx affected --targets=test:sherif,test:knip,tes...	❌ Failed	59s	View ↗
nx run-many --target=build --exclude=examples/**	✅ Succeeded	<1s	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-04-25 11:54:59 UTC

[pkg-pr-new]

More templates

• @tanstack/form-example-angular-array
• @tanstack/form-example-angular-simple
• @tanstack/form-example-lit-simple
• @tanstack/form-example-lit-ui-libraries
• @tanstack/form-example-react-array
• @tanstack/form-example-react-compiler
• @tanstack/field-errors-from-form-validators
• @tanstack/form-example-react-large-form
• @tanstack/form-example-react-next-server-actions
• @tanstack/form-example-react-query-integration
• @tanstack/form-example-remix
• @tanstack/form-example-react-simple
• @tanstack/form-example-react-standard-schema
• @tanstack/form-example-react-tanstack-start
• @tanstack/form-example-react-ui-libraries
• @tanstack/form-example-solid-array
• @tanstack/form-example-solid-simple
• @tanstack/form-example-svelte-array
• @tanstack/form-example-svelte-simple
• @tanstack/form-example-vue-array
• @tanstack/form-example-vue-simple

@tanstack/angular-form

npm i https://pkg.pr.new/@tanstack/angular-form@1420

@tanstack/form-core

npm i https://pkg.pr.new/@tanstack/form-core@1420

@tanstack/react-form

npm i https://pkg.pr.new/@tanstack/react-form@1420

@tanstack/lit-form

npm i https://pkg.pr.new/@tanstack/lit-form@1420

@tanstack/solid-form

npm i https://pkg.pr.new/@tanstack/solid-form@1420

@tanstack/svelte-form

npm i https://pkg.pr.new/@tanstack/svelte-form@1420

@tanstack/vue-form

npm i https://pkg.pr.new/@tanstack/vue-form@1420

commit: b627e3d

[LeCarbonator]

It appears onBlurListenTo will cause the same issue with onBlurAsync

[LeCarbonator]

I believe this error may be related to how linked fields contribute to the hasErrored property.

Since the linked field errors, it no longer tries to perform the async error of the current field.

[LeCarbonator]

I believe this can cause another problem, but I'm not confident I wrote the proper test case for it:

If two fields share a common onChangeListenTo of a third field, then it could be that the sync error from one affects the async validator from the other.

[lukethacoder]

Running into similar issues with inter-dependant fields.

new FieldApi({
  name: 'field_1',
  validators: {
    onChangeListenTo: ['field_2', 'field_3'],
    onChangeAsync: async (props) => {
      // magical async stuff
    }
  },
})

new FieldApi({
  name: 'field_2',
  validators: {
    onChangeListenTo: ['field_1'],
    onChangeAsync: async (props) => {
      // magical async stuff
    }
  },
})

new FieldApi({
  name: 'field_2',
  validators: {
    onChangeListenTo: ['field_1'],
    onChangeAsync: async (props) => {
      // magical async stuff
    }
  },
})

Shifting from using onChangeAsync to the non-async onChange seems to fix the issues... but means we loose async which is not ideal. Will have to do for now.