final-form / final-form/react-final-form
Field-Level validation for root and nested fields
- Dominant language
- JavaScript
- Stars
- 7.4k
- Forks
- 497
- PR merge metrics
- No merged PRs in 30d
Description
### Are you submitting a **bug report** or a **feature request**?
Bug Report
### What is the current behavior?
#### Prerequisites
1. I have two Fields on my UI:
2. `name` property for the first field equals `"test"`.
3. `name` property for the second field equals `"test.inner"`.
4. `validate` property for the first field equals `() => 'Required'`.
5. `validate` property for the first field equals `() => 'Required2'`.
#### Example 1
The first rendered field on UI is the `"test"` field
**Actual result**:
- **`"test"`** field receives broken error `{"0":"R","1":"e","2":"q","3":"u","4":"i","5":"r","6":"e","7":"d","inner":"Required2"}`
- **`"test.inner"`** field receives the correct error: `"Required2"`
#### Example 2
The first rendered field on UI is the `"test.inner"` field
**Actual result**:
- **`"test.inner"`** field doesn't receive an error at all
- **`"test"`** field receives the correct error: `"Required"`
### What is the expected behavior?
1. The result doesn't depend on the Fields rendering order on the UI.
2. Fields receive error represented as a string (specified in the `validate` callback for the field):
- **`"test"`** field will receive `"Required"` error.
- **`"test.inner"`** field will receive `"Required2"` error.
### Sandbox Link
The two examples are presented in [CodeSandbox](https://codesandbox.io/p/sandbox/final-form-errors-demo-rwm9f3?file=%2Fsrc%2FFinalFormErrorsDemo.jsx%3A28%2C13)
### What's your environment?
react-final-form: 6.5.0
final-form: 4.20.1
Node: 18.19.0
Browser: Latest Chrome
MacOS Apple M1
### Other information
A similar issue was fixed for FieldArray: https://github.com/final-form/react-final-form/issues/160.
Contributor guide
Research direction
Start with the linked CodeSandbox, especially src/FinalFormErrorsDemo.jsx, and reproduce both field-rendering orders using the listed react-final-form and final-form versions. Trace how validation errors are assigned to test and test.inner; done means both fields consistently receive the separate strings "Required" and "Required2", regardless of render order.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100