Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Async field validation: validating prop true when validating field loses focus

See original GitHub issue

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:

Click on the username field and type a value
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.

Issue Analytics

State:
Created 4 years ago
Reactions:8
Comments:13 (2 by maintainers)

Top GitHub Comments

9reactions

NicoleEtLuicommented, Nov 20, 2019

Kapture 2019-11-20 at 15 37 32

2reactions

ahauratcommented, Mar 18, 2020

@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…

Top Results From Across the Web

Redux form successful async validation - Stack Overflow

Field loses its focus, async validation starts, don't show async success; a) Async validation returns error, show it; b) Async validation ...

Final Form Docs – `FieldRenderProps`

This object separates out the values and event handlers intended to be given to the input component from the meta data about the...

resolveProps - Data driven forms

The following example shows how resolveProps changes a behavior of components . In this example, after the component is validated, it will have...

Handling Forms - VeeValidate

This will prevent submitting the form until all fields are valid. Using validate(). You can validate the form without submissions using the validate()...

Field - Redux Form

validate : Array<Function> | (value, allValues, props, name) => error [optional] #. Allows you to provide a field-level validation rule. The function is...