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

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

Open Pascalmh opened this issue 7 months ago • 6 comments

fixes #1410

Apr 16 '25 06:04 Pascalmh

View your CI Pipeline Execution ↗ for commit b627e3dead4de94ed95f74d4b34566d6073bb12d.

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

Apr 16 '25 06:04 nx-cloud[bot]

More templates

@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

Apr 16 '25 06:04 pkg-pr-new[bot]

It appears onBlurListenTo will cause the same issue with onBlurAsync

Apr 16 '25 12:04 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.

Apr 18 '25 16:04 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.

May 19 '25 05:05 LeCarbonator

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.

Aug 19 '25 13:08 lukethacoder

form form copied to clipboard

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

form
form copied to clipboard