React-final-form: Async validation with Field components causes a loop

[lgluszek]

Are you submitting a bug report or a feature request?

Bug report

What is the current behavior?

I have a case where I want to display a few fields depending on the result of async validation. When trying to display regular HTML elements everything works fine, but if a rendered element is Field component, it causes a loop. I've tried to create the simplest example I could think of.

Here's the link to the example where the only rendered elements are divs. https://codesandbox.io/s/p3155prp1j As you can see, everything works fine. If an input is empty, it will fail, otherwise, it will pass after 1 second.

And the second example is where problems happen. https://codesandbox.io/s/jvrjq4jryw The only difference is that I display Field components instead of div elements. When you open up the console, you can see that the condition is checked every 1 second.

I've checked the documentation and there is an example of async validation, where the rendered element is a spinner. If you change this element to the Field component, it will crash completely.

What is the expected behavior?

Rendering Field components shouldn't cause a loop to happen.

Sandbox Link

Working example using divs https://codesandbox.io/s/p3155prp1j
Failing example using Field components https://codesandbox.io/s/jvrjq4jryw

What's your environment?

react-final-form 3.6.5

[maciejmyslinski]

wow, this is super interesting issue to solve 😮

[maciejmyslinski]

OK seems like the problem is that rendering a new Field causes all other fields to validate. Then Form's validating changes to true. So the new Field is not rendered. Then after async validation is finished the Form's validating changes to false, the new Field is rendered, the whole form is revalidated, and the cycle repeats.

Bottom line: in order to make it work we can't trigger validation of the whole form every time a new field is being registered. Or at least not async validation. Why do we need to revalidate the whole form on new field registration @erikras?

[erikras]

This _IS_ a good one! It's going to take some thought...

I managed to crash CodeSandbox and Chrome several times while playing around with this. 😱

[lmazurek]

Hey @erikras any updates on this? 😅

[rodrigovallades]

@erikras any updates on this?

[erikras]

I've bookmarked this for examination this week or next.

[erikras]

Just looked into this. It looks like it's been fixed. If I upgrade all the deps in the example that fails, it doesn't get stuck in a loop.