Using onChangeAsync in an array field causes isFieldsValidating to always be true after calling removeValue
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 6.7k
- Forks
- 682
- Avg merge
- 5d 18h
- Merged PRs (30d)
- 7
Description
Describe the bug
When using a validators config which has both onChangeListenTo and onChangeAsync in a subfield of an array mode field, removing any entry but the last of the array field will cause the listened-to fields in each shifted entry to be stuck on isValidating: true.
This does not happen when onChangeListenTo is included with onChange.
This does not happen when onChangeListenTo is not included with onChangeAsync.
Possibly related to https://github.com/TanStack/form/issues/2131 ?
Your minimal, reproducible example
Steps to reproduce
In the example sandbox, click the add button twice, then remove the first row and click submit.
Notice in the console logs that all errors are empty, and that the field meta for list[0].operator shows isValidating: true, even though it does not have a validator.
Comment out line 70, repeat the above steps, and notice that the form submits as normal.
Uncomment line 70, change onChangeAsync on line 71 to onChange, repeat the above steps, and notice that the form submits as normal.
Expected behavior
On aform submit, the listened-to field should show isValidating: false, and the form submission should succeed.
How often does this bug happen?
Every time
Screenshots or Videos
No response
Platform
- OS: macOS
- Browser: chrome
TanStack Form adapter
react-form
TanStack Form version
1.33.0
TypeScript version
No response
Additional context
No response
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked CodeSandbox and reproduce the issue by adding two rows, removing the first row, and submitting. Compare the async-validator path using onChangeListenTo with the working onChange and non-listened cases, focusing on shifted array entries and their isValidating state. Done means the listened-to field reports isValidating: false and submission succeeds after removing a non-final row.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 54/100