Validating flag support (#541)

* Added support for [email protected] `validating` flag

* linting

Author: erikras

README.md

@@ -705,6 +705,10 @@ The current value of the field.
 
 [See the 🏁 Final Form docs on `valid`](https://github.com/final-form/final-form#valid-boolean).
 
+#### `meta.validating?: boolean`
+
+[See the 🏁 Final Form docs on `validating`](https://github.com/final-form/final-form#validating-boolean).
+
 #### `meta.visited?: boolean`
 
 [See the 🏁 Final Form docs on `visited`](https://github.com/final-form/final-form#visited-boolean).

package-lock.json

@@ -62,7 +62,7 @@
     "eslint-plugin-react": "^7.13.0",
     "eslint-plugin-react-hooks": "^1.6.0",
     "fast-deep-equal": "^2.0.1",
-    "final-form": "^4.16.0",
+    "final-form": "^4.16.1",
     "flow-bin": "^0.98.1",
     "glow": "^1.2.2",
     "husky": "^2.4.1",
@@ -89,7 +89,7 @@
     "typescript": "^3.5.2"
   },
   "peerDependencies": {
-    "final-form": "^4.16.0",
+    "final-form": "^4.16.1",
     "react": "^16.8.0"
   },
   "lint-staged": {

package.json

@@ -6,6 +6,7 @@ import Form from './ReactFinalForm'
 import Field from './Field'
 
 const onSubmitMock = values => {}
+const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))
 
 describe('Field', () => {
   afterEach(cleanup)
@@ -951,4 +952,53 @@ describe('Field', () => {
     expect(onSubmit).not.toHaveBeenCalled()
     expect(beforeSubmit).toHaveBeenCalled()
   })
+
+  it('update validating flag on async field-level validation', async () => {
+    const { getByTestId } = render(
+      <Form onSubmit={onSubmitMock}>
+        {({ handleSubmit }) => (
+          <form onSubmit={handleSubmit}>
+            <Field
+              name="name"
+              component="input"
+              validate={async value => {
+                await sleep(5)
+                return value === 'erikras' ? 'Username taken' : undefined
+              }}
+              data-testid="name"
+            />
+            <Field name="name" subscription={{ validating: true }}>
+              {({ meta: { validating } }) => (
+                <div data-testid="validating">
+                  {validating === true ? 'Spinner' : 'Not Validating'}
+                </div>
+              )}
+            </Field>
+            <button type="submit">Submit</button>
+          </form>
+        )}
+      </Form>
+    )
+    expect(getByTestId('validating')).toHaveTextContent('Spinner')
+
+    await sleep(6)
+
+    expect(getByTestId('name').value).toBe('')
+    fireEvent.focus(getByTestId('name'))
+    expect(getByTestId('validating')).toHaveTextContent('Not Validating')
+
+    fireEvent.change(getByTestId('name'), { target: { value: 'erik' } })
+    expect(getByTestId('validating')).toHaveTextContent('Spinner')
+
+    await sleep(6)
+
+    expect(getByTestId('validating')).toHaveTextContent('Not Validating')
+
+    fireEvent.change(getByTestId('name'), { target: { value: 'erikras' } })
+    expect(getByTestId('validating')).toHaveTextContent('Spinner')
+
+    await sleep(6)
+
+    expect(getByTestId('validating')).toHaveTextContent('Not Validating')
+  })
 })

src/Field.test.js

@@ -195,6 +195,7 @@ function useField<FormValues: FormValuesShape>(
     submitting: otherState.submitting,
     touched: otherState.touched,
     valid: otherState.valid,
+    validating: otherState.validating,
     visited: otherState.visited
   }
   if (formatOnBlur) {