don't set error to undefined when async validation still running

src/FinalForm.js

@@ -379,10 +379,14 @@ function createForm<FormValues: FormValuesShape>(
  let recordLevelErrors: Object = {}
  const fieldLevelErrors = {}
 
- const promises = [
- ...runRecordLevelValidation(errors => {
+ const recordLevelValidationPromises = runRecordLevelValidation(
+ (errors) => {
  recordLevelErrors = errors || {}
- }),
+ }
+ )
+
+ const promises = [
+ ...recordLevelValidationPromises,
  ...fieldKeys.reduce(
  (result, name) =>
  result.concat(
@@ -405,29 +409,35 @@ function createForm<FormValues: FormValuesShape>(
  asyncValidationPromises[asyncValidationPromiseKey] = promise
  }
 
- const processErrors = () => {
+ const processErrors = (isAsyncProcess = false) => {
  let merged = {
  ...(limitedFieldLevelValidation ? formState.errors : {}),
  ...recordLevelErrors
  }
  const forEachError = (fn: (name: string, error: any) => void) => {
  fieldKeys.forEach(name => {
  if (fields[name]) {
- // make sure field is still registered
- // field-level errors take precedent over record-level errors
- const recordLevelError = getIn(recordLevelErrors, name)
- const errorFromParent = getIn(merged, name)
  const hasFieldLevelValidation = getValidators(safeFields[name])
  .length
- const fieldLevelError = fieldLevelErrors[name]
- fn(
- name,
- (hasFieldLevelValidation && fieldLevelError) ||
- (validate && recordLevelError) ||
- (!recordLevelError && !limitedFieldLevelValidation
- ? errorFromParent
- : undefined)
- )
+
+ // if not has field level validation, validate is async and current processing is for sync errors - return current error
+ if (!hasFieldLevelValidation && !isAsyncProcess && recordLevelValidationPromises.length) {
+ fn(name, getIn(formState.errors, name))
+ } else {
+ // make sure field is still registered
+ // field-level errors take precedent over record-level errors
+ const recordLevelError = getIn(recordLevelErrors, name)
+ const errorFromParent = getIn(merged, name)
+ const fieldLevelError = fieldLevelErrors[name]
+ fn(
+ name,
+ (hasFieldLevelValidation && fieldLevelError) ||
+ (validate && recordLevelError) ||
+ (!recordLevelError && !limitedFieldLevelValidation
+ ? errorFromParent
+ : undefined)
+ )
+ }
  }
  })
  }
@@ -469,7 +479,7 @@ function createForm<FormValues: FormValuesShape>(
  return
  }
 
- processErrors()
+ processErrors(true)
  })
  .then(afterPromise, afterPromise)
  }

src/FinalForm.validating.test.js

@@ -393,15 +393,59 @@ describe('Field.validation', () => {
 
  change('another')
 
- // spy called because sync validation passed
- expect(spy).toHaveBeenCalledTimes(3)
- expect(spy.mock.calls[2][0].error).toBeUndefined()
+ // still has error because async validation still running
+ expect(spy).toHaveBeenCalledTimes(2)
+ expect(spy.mock.calls[1][0].error).toBe('Username taken')
 
  // wait for validation to return
  await sleep(delay * 2)
 
  // spy not called because sync validation already cleared error
  expect(spy).toHaveBeenCalledTimes(3)
+ expect(spy.mock.calls[2][0].error).toBeUndefined()
+ })
+
+ it('async validate should wait for result - not set error to undefined via sync validation', async () => {
+ const delay = 2
+ const form = createForm({
+ onSubmit: onSubmitMock,
+ validate: async (values) => {
+ const errors = {}
+ if (!values.username) {
+ errors.username = 'Required'
+ }
+ await sleep(delay)
+ return errors
+ }
+ })
+ const spyValidatedField = jest.fn()
+ const spy = jest.fn()
+ form.registerField('username', spyValidatedField, { error: true })
+ form.registerField('age', spy)
+
+ const { change } = spy.mock.calls[0][0]
+
+ expect(spyValidatedField).toHaveBeenCalledTimes(1)
+ expect(spyValidatedField.mock.calls[0][0].error).toBeUndefined()
+
+ change('20')
+
+ await sleep(delay * 2)
+
+ expect(spyValidatedField).toHaveBeenCalledTimes(2)
+ expect(spyValidatedField.mock.calls[1][0].error).toBe('Required')
+
+ change('40')
+
+ // should not be called - async validation is still running
+ expect(spyValidatedField).toHaveBeenCalledTimes(2)
+ expect(spyValidatedField.mock.calls[1][0].error).toBe('Required')
+
+ await sleep(delay * 2)
+
+ // should not be called - validation return same errors like earlier
+ expect(spyValidatedField).toHaveBeenCalledTimes(2)
+ expect(spyValidatedField.mock.calls[1][0].error).toBe('Required')
  })
 
  it('should ignore old validation promise results', async () => {