Repository: final-form/react-final-form
Pull request #541 (2019-06-19 10:32:06)

Validating flag support
Support for `final-form` [`v4.16.0`](https://github.com/final-form/final-form/releases/tag/v4.16.0)'s `validating` flag in the `meta` object.

codecov[bot]: # [Codecov](https://codecov.io/gh/final-form/react-final-form/pull/541?src=pr&el=h1) Report
> Merging [#541](https://codecov.io/gh/final-form/react-final-form/pull/541?src=pr&el=desc) into [master](https://codecov.io/gh/final-form/react-final-form/commit/b6a7917cac9fa5c47dc1994fde8c81970993dbc0?src=pr&el=desc) will **not change** coverage.
> The diff coverage is `n/a`.

[![Impacted file tree graph](https://codecov.io/gh/final-form/react-final-form/pull/541/graphs/tree.svg?width=650&token=s8VUe6IxMZ&height=150&src=pr)](https://codecov.io/gh/final-form/react-final-form/pull/541?src=pr&el=tree)

```diff
@@          Coverage Diff          @@
##           master   #541   +/-   ##
=====================================
  Coverage     100%   100%           
=====================================
  Files          16     16           
  Lines         227    227           
  Branches       55     55           
=====================================
  Hits          227    227
```


| [Impacted Files](https://codecov.io/gh/final-form/react-final-form/pull/541?src=pr&el=tree) | Coverage Δ | |
|---|---|---|
| [src/useField.js](https://codecov.io/gh/final-form/react-final-form/pull/541/diff?src=pr&el=tree#diff-c3JjL3VzZUZpZWxkLmpz) | `100% <ø> (ø)` | :arrow_up: |

------

[Continue to review full report at Codecov](https://codecov.io/gh/final-form/react-final-form/pull/541?src=pr&el=continue).
> **Legend** - [Click here to learn more](https://docs.codecov.io/docs/codecov-delta)
> `Δ = absolute <relative> (impact)`, `ø = not affected`, `? = missing data`
> Powered by [Codecov](https://codecov.io/gh/final-form/react-final-form/pull/541?src=pr&el=footer). Last update [b6a7917...fd0c9b0](https://codecov.io/gh/final-form/react-final-form/pull/541?src=pr&el=lastupdated). Read the [comment docs](https://docs.codecov.io/docs/pull-request-comments).


Patch:
diff --git a/README.md b/README.md
index 5dac23d..0fbd914 100644
--- a/README.md
+++ b/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).
diff --git a/package-lock.json b/package-lock.json
index 3c188f9..b5d64ea 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4492,9 +4492,9 @@
       }
     },
     "final-form": {
-      "version": "4.16.0",
-      "resolved": "https://registry.npmjs.org/final-form/-/final-form-4.16.0.tgz",
-      "integrity": "sha512-U3K3FBMDNva4tasSy4YCL1ee8eAENTrsQ2dJStYLwqY9dpRXx8yumMUczJd77+n/ER+wZdQxyoFNg4iWPxoX5w==",
+      "version": "4.16.1",
+      "resolved": "https://registry.npmjs.org/final-form/-/final-form-4.16.1.tgz",
+      "integrity": "sha512-nUY6ZyFRvnOhSukqpmzm6pt38qYjCA6zSeW630CcfOvy0tBM+Wy0ZLIE36y/QiUfuAtMEJWp8k7GK5LqrqubEw==",
       "dev": true,
       "requires": {
         "@babel/runtime": "^7.3.1"
diff --git a/package.json b/package.json
index 0ac05bc..59b5012 100644
--- a/package.json
+++ b/package.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": {
diff --git a/src/useField.js b/src/useField.js
index 2c1713b..5768af5 100644
--- a/src/useField.js
+++ b/src/useField.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) {


Test patch:
diff --git a/src/Field.test.js b/src/Field.test.js
index 057b631..84212d6 100644
--- a/src/Field.test.js
+++ b/src/Field.test.js
@@ -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')
+  })
 })