Field validation errors returned by the `onMount` validator never make it to the Field instance
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
A field's meta object is never assigned the field validation errors returned by the onMount validator.
Through some local line-by-line debugging this is how I interpret the internals of the FormApi and the root cause of the issue:
- The
FormApiconstructor definesthis.mountto be a function called when the instance is mounted. - The mount function internally calls
validateSyncwith acausevalue of"mount"if there is anonMountvalidator defined. validateSyncthen callsbatchwhich parses the return value of theonMountvalidator.- Once it has built an internal map of field errors and form errors, it then attempts to assign each field error to the appropriate field by calling
this.setFieldMetawith the name of the field that has errors. So assuming thatonMountreturns the object:{ fields: { myField: "my error", myOtherField: "my other error" } }, it will iterate over the keys offieldsand attempt to set the error"my error"to themyFieldfield instance meta and"my other error"to themyOtherFieldfield instance meta. - However, in my debugging,
this.getFieldMeta(field), does not return anything because, I assume, the fields do not yet exist so the check forfieldMeta && fieldMeta.errorMap[errorMapKey]will never returntrueand thus the validation error is never set on the field.this.state.fieldMetais an empty object at this point of theFormApi's lifecycle.
Further debugging proves that the FormApi's field meta object is not defined until, as far as I can tell, the the store is accessed for the first time.FieldApi instance is mounted for the first time which seems to occur after the FormApi is considered mounted which means this would never work? 🤷
Your minimal, reproducible example
https://stackblitz.com/edit/vitejs-vite-sqnkac55?file=src%2FApp.tsx,package.json
Steps to reproduce
This minimal reproducible example is a fork from the example noted in #1149 where the only thing I changed was the version number from 0.43.0 to the latest 1.2.3
- Go to https://stackblitz.com/edit/vitejs-vite-sqnkac55?file=src%2FApp.tsx,package.json
- Note that the bottom of the page shows the field states and they are all valid.
- Now go to the original example from #1149 https://stackblitz.com/edit/vitejs-vite-ronky49r?file=src%2FApp.tsx
- Note that the field states are now all invalid due to the functional
onMountvalidator.
Expected behavior
As a user, I expect field errors reported by the onMount validator to be a part of the FieldApi meta and the field to be considered invalid.
How often does this bug happen?
Every time
Screenshots or Videos
No response
Platform
OS: macOs
Browser: Chrome
Version: 134.0.6998.89 (Official Build) (arm64)
TanStack Form adapter
react-form
TanStack Form version
v1.2.3
TypeScript version
No response
Additional context
This appears to be a regression between 0.43 and 1.2.3.
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 in packages/form-core/src/FormApi.ts at mount, validateSync, and the field-error assignment logic, then compare the mounting order in packages/react-form/src/useForm.tsx. Reproduce the regression with the linked StackBlitz examples and verify that errors returned by onMount appear in FieldApi metadata and make the field invalid.
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
- 67/100