Field-Level validation for root and nested fields

[alena-apanovich]

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

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: #160.