React-final-form: Async field validation: validating prop true when validating field loses focus

[mentallabyrinth]

Are you submitting a bug report or a feature request?

Bug

What is the current behavior?

The issue is with async validation for form fields. When the form field is async validating, if the user tabs/clicks away to another field when the validation completes, the validating prop remains true.

Steps to reproduce:

1. Click on the username field and type a value
2. Immediately tab or click away from the field before async field validation completes.

What is the expected behavior?

When the async validation completes for a field, the field state will reflect this operation e.g., the validating prop will change from false to true.

Sandbox Link

https://codesandbox.io/s/wy7z7q5zx5

What's your environment?

• React: 16.8.6
• React DOM: 16.8.6
• React final form: 6.3.0
• Final form: 4.18.6
• Operating system: OSX
• Browsers: Chrome Version 78.0.3904.97, Firefox: Version 70.0.1, Brave: Version 0.70.122
• Node: 12.13.0

Other information

No stack trace because an error is never thrown.

[NicoleEtLui]

[ahaurat]

@erikras any guess where the bug might be? I'd be willing to take a shot at a PR but might need a little guidance on a possible starting point...

[marcin-piela]

Temporary solution:
https://codesandbox.io/s/react-final-form-asynchronous-field-level-validation-example-pww3l?file=/index.js (run resume validation on blur)

[AlexAndriyanenko]

I would like to try to solve this issue.

[razvanip]

me 2 :)

[razvanip]

@marcin-piela the solution won't work if u have sync and async validations once input.onBlur() will need to be called for sync validations to take place.

[razvanip]

Not sure why blur is breaking this
i guess the state of the field is not updating correctly https://github.com/final-form/final-form/blob/master/src/FinalForm.js#L328

and when the new state is calculated it will be the same and the registerd field subscriber will be called with validating true.

but it does not make sense to me why blur would cause this, since it just updates a piece of the state and notifies, when the promise finishes for the async validation that should update the state and notify as well.

blur reruns the validations only if focusOnBlur is passed as prop.

to summaries -> my conclusion would be that the subscriber is not notified when the async validation finishes.

@erikras any hints ?

[dzienisz]

Do you have any idea how to solve this?