TanStack
form.setFieldValue on an un-initialized field will create meta missing errors
Describe the bug
If you have a field that is displayed conditionally in the form, and use form.setFieldValue without dontUpdateMeta: true before it's initialization, it will create meta for this field without errors. I understand that makes more sense to update the value with dontUpdateMeta: true if the field wasn't initialized yet, but it can lead to some inconsistent behavior since we are not expecting errors to be undefined.
Your minimal, reproducible example
https://codesandbox.io/p/github/sinuheshinbr/tanstack-form-missing-errors/main?workspaceId=ws_NWHNzLQ8YDitxFDjr6vrpe
Steps to reproduce
go to: https://codesandbox.io/p/github/sinuheshinbr/tanstack-form-missing-errors/main?workspaceId=ws_NWHNzLQ8YDitxFDjr6vrpe click on "setFieldValue" then clikc on "Show"
Expected behavior
After clicking on setFieldValue meta shold include errors array even before the element initialization
How often does this bug happen?
None
Screenshots or Videos
No response
Platform
OS: Manjaro Linux Browser: Chrome Version: 129.0.6668.100
TanStack Form adapter
react-form
TanStack Form version
0.40.2
TypeScript version
5.5.3
Additional context
No response
Hi all 👋
Can confirm this also took me off guard. Has this always been the case?
I don't understand the problem here, transparently. Could you provide me a more real-world usecase (user-facing) where things are broken? I'm sorry, I tried to look at this but I don't see a problematic behavior in your code sample.
Imagine a field for "fees" that only renders conditionally based on the "availableFor" value:
If "availableFor" is "sale", the fee should initialize as 0.5. If "availableFor" is "longStay", the fee should initialize as 1. In an earlier step, "availableFor" is set to "longStay", so form.setFieldValue("fees", 1) runs before the field is rendered. At this point, meta is created for this field, but the errors property inside meta is missing.
When the field eventually renders and tries to access field.state.meta.errors, it throws a runtime error because errors is undefined. In my code, I wasn’t accounting for errors being possibly undefined, so my Input component breaks when attempting to display errors.
Expected Behavior Even if the field hasn’t been initialized yet, calling setFieldValue should ensure that the meta.errors property is created (even if empty), to avoid runtime errors when the field is eventually rendered.
If this is the intended behavior errors should be typed as possibly undefined, so we can avoid unexpected bugs.