final-form / final-form/react-final-form

Field-Level validation for root and nested fields

Open
#1,039 0 comments 1 reaction 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.