meta.error incorrect for fields when changing validator despite adding key to field as per example. See sandbox

doldyn commented 2 years ago

Are you submitting a bug report or a feature request?

Bug Report

What is the current behavior?

Based on the documentation, validate functions for fields can be changed but a unique key must be added to the Field to ensure the correct validate function is used. This works and the overall error state is updated correctly. Unfortunately, the meta.error for the render component of the field with the validator gets a previous error state making it incorrect when trying to display the error.

What is the expected behavior?

The render component for a Field being parsed the correct error in meta.error as per the overall error state

Sandbox Link

The issue is simple to reproduce with this example. Note that the error rendered for the Field is different from the error for the field in the formState - it is the previous error.

Sandbox link reproducing the issue

What's your environment?

final-form: 4.20.6 reat-final-form: 6.5.8 react: 16.14 react-dom: 16.14

Other information

If I downgrade react-final-form to 4.1.0, the issue is resolved. Any version above this has the issue. Our initial investigation indicated that any version above uses useField inside Field and 4.1.0 doesn't.

qingxiao commented 2 years ago

Same question

const validateCustom = (v) => {
   // Dynamic verification using the props property
}
<Field name="xx" validate={validateCustom} key="xx">
 {({ input, meta }) => {
   // is not OK
   meta.error
}}
</Field>

but like this is OK


const form = useForm();
const validateCustom = (v) => {
   // Dynamic verification using the props property
}
<Field name="xx" validate={validateCustom} key="xx">
 {({ input }) => {
   const meta = form.getFieldState('xx');
   // is OK
  meta.error
}}
</Field>

ilia-luk commented 1 year ago

same issue here

"final-form": "^4.20.7",
"react-final-form": "^6.5.9",

works on dev-server fail after build.

Solved this by using useField, extract meta.error from it and use it instead of the provided error from <Field> component.

Fork of the original sandbox provided by @doldyn

final-form / react-final-form