React-final-form: Async validation triggers field render twice

Created on 20 Aug 2018  路  2Comments  路  Source: final-form/react-final-form

Are you submitting a bug report or a feature request?

Not sure if this is a bug or a current feature 馃

What is the current behavior?

When using async form validation (before submit), it triggers field render twice. First one with error set to none and then with actual error. This happens on every keypress.

What is the expected behavior?

I'd like to make it work as a sync one when there is only one render on keypress and no error state pop before/after validation.

Sandbox Link

https://codesandbox.io/s/n9kn940k84

In this example, there are both validateAsync and validateSync for test, open console to see the difference.

What's your environment?

React Final Form version 3.6.5
Final Form version 4.9.1

@erikras maybe you have an idea what to do with this 馃檹

All 2 comments

I see same behaviour

I have same problem.
On first render, my Wizard Form trigger form validation every time.
My form validation is async function and every field trigger validation on render the form. If i have 20 fields, this breaks my page.

Why i can't stop validation on first render? And this flag validateOnBlur has no effect. Whatever i put true or false it's same, on load my page my Wizard trigger nth times the Form validation and Validation trigger render function again.

Was this page helpful?
0 / 5 - 0 ratings