TanStack
Array fields do not run onChange validation
Describe the bug
When calling the array helper method pushValue or removeValue, no onChange validation is triggered on the array field that called the helper methods.
The validation is only run, when setting the isTouched state manually and calling the field.validate("change") method manually.
Your minimal, reproducible example
https://stackblitz.com/edit/tanstack-form-8sihxk?file=src%2Findex.tsx
Steps to reproduce
- Click the button "Add one"
- Notice, there is no error
- Click the button "Validate"
- Now there is an error
- Click the button "Add one" one more time
- The error is still there
- Click the button "Validate" again
- The error is now gone
Expected behavior
As a user, I would expect every method that results in a mutation to validate for the "change" event, but that does not happen for the array helper methods.
How often does this bug happen?
Every time
Screenshots or Videos
No response
Platform
- OS: Windows
- Browser: Chrome
- Version: 0.19.0
TanStack Form adapter
react-form
TanStack Form version
v0.19.0
TypeScript version
v5.4.3
Additional context
This is not part of this bug, but I would also think working with the array helper methods would be easier if they would also allow for setting the touched state when using the FieldApi.
~~I was running into a similar issue that's related to this; updating one field that is nested under array did not update the array state. But, after adding an onChangeListenTo validator on a neighboring field, the array state started updating.~~
Never mind, this is exactly what form.Subscribe is for 😅
@crutchcorn I created a PR that should fix this issue, if you want to take a look.