Forward refs to input component (#18)

* Forward ref

* Temporarily update react-final-form to a fork that fixes Field to forward refs

* Add a prepare script that builds dist/ so that dist won't be missing if you install the package from from a git repo instead of from npm

* Fixed deps

Co-authored-by: Erik Rasmussen <rasmussenerik@gmail.com>

Author: TylerRick

package-lock.json

@@ -12,7 +12,8 @@
   "scripts": {
     "start": "nps",
     "test": "nps test",
-    "precommit": "lint-staged && npm start validate"
+    "precommit": "lint-staged && npm start validate",
+    "prepare": "nps build"
   },
   "author": "Erik Rasmussen <rasmussenerik@gmail.com> (http://github.com/erikras)",
   "license": "MIT",
@@ -66,7 +67,7 @@
     "raf": "^3.4.1",
     "react": "^16.8.1",
     "react-dom": "^16.8.1",
-    "react-final-form": "^4.0.2",
+    "react-final-form": "^6.5.0",
     "react-test-renderer": "^16.8.1",
     "rollup": "^1.1.2",
     "rollup-plugin-babel": "^4.3.2",
@@ -77,11 +78,11 @@
     "rollup-plugin-uglify": "^6.0.2"
   },
   "peerDependencies": {
-    "final-form": ">=4.0.0",
+    "final-form": ">=4.20.0",
     "prop-types": "^15.6.0",
     "react": "^15.3.0 || ^16.0.0-0",
     "react-dom": "^15.3.0 || ^16.0.0-0",
-    "react-final-form": ">=3.0.0"
+    "react-final-form": ">=6.5.0"
   },
   "jest": {
     "testEnvironment": "jsdom"

package.json

@@ -22,7 +22,7 @@ type WithValidity = {
   setCustomValidity: (error: ?string) => void
 }
 
-export default class Html5ValidationField extends React.Component<Props> {
+class Html5ValidationField extends React.Component<Props> {
   props: Props
   input: ?WithValidity
 
@@ -81,9 +81,9 @@ export default class Html5ValidationField extends React.Component<Props> {
         }
         const errorKey: ?string = errorKeys.find(key => (validity: Object)[key])
         let error = errorKey && this.props[errorKey]
-          if (typeof error === 'function') {
-              error = error(value, this.props)
-          }
+        if (typeof error === 'function') {
+          error = error(value, this.props)
+        }
         input.setCustomValidity(error)
         return error
       }
@@ -104,8 +104,20 @@ export default class Html5ValidationField extends React.Component<Props> {
       tooShort,
       typeMismatch,
       valueMissing,
+      innerRef,
       ...rest
     } = this.props
-    return React.createElement(Field, { validate: this.validate, ...rest })
+    return React.createElement(Field, {
+      validate: this.validate,
+      ref: innerRef,
+      ...rest
+    })
   }
 }
+
+export default React.forwardRef((props, ref) => (
+  React.createElement(Html5ValidationField, {
+    innerRef: ref,
+    ...props
+  })
+))

src/Html5ValidationField.js

@@ -70,6 +70,22 @@ describe('Html5ValidationField', () => {
     })
   })
 
+  it('should pass ref through to the input', () => {
+    const ref = React.createRef()
+    TestUtils.renderIntoDocument(
+      <Form onSubmit={onSubmitMock} subscription={{ values: true }}>
+        {() => (
+          <form>
+            <Html5ValidationField name="name" component="input" ref={ref} />
+          </form>
+        )}
+      </Form>
+    )
+
+    expect(ref.current).not.toBe(null)
+    expect(ref.current instanceof HTMLInputElement).toBe(true)
+  })
+
   describe('Html5ValidationField.messages', () => {
     const testNotPassThrough = message => {
       const consoleSpy = jest
@@ -537,34 +553,43 @@ describe('Html5ValidationField', () => {
         }
       )
     })
-      it('should support functions as default error keys', () => {
-        const setCustomValidity = jest.fn()
-        mockFindNode(
-            {
-                nodeName: 'input',
-                setCustomValidity,
-                validity: {
-                    tooShort: true
-                }
-            },
-            () => {
-              const spy = jest.fn(({ input }) => <input {...input} />)
-              TestUtils.renderIntoDocument(
-                <Form initialValues={{ foo: 'bar' }} onSubmit={onSubmitMock} subscription={{}}>
-                  {() =>
-                      <Html5ValidationField
-                          tooShort={(value, { minLength }) =>
-                              `Value ${value} should have at least ${minLength} characters.`}
-                          minLength={8} name="foo" render={spy} />
+    it('should support functions as default error keys', () => {
+      const setCustomValidity = jest.fn()
+      mockFindNode(
+        {
+          nodeName: 'input',
+          setCustomValidity,
+          validity: {
+            tooShort: true
+          }
+        },
+        () => {
+          const spy = jest.fn(({ input }) => <input {...input} />)
+          TestUtils.renderIntoDocument(
+            <Form
+              initialValues={{ foo: 'bar' }}
+              onSubmit={onSubmitMock}
+              subscription={{}}
+            >
+              {() => (
+                <Html5ValidationField
+                  tooShort={(value, { minLength }) =>
+                    `Value ${value} should have at least ${minLength} characters.`
                   }
-                </Form>
-              )
-              expect(spy).toHaveBeenCalled()
-              expect(spy).toHaveBeenCalledTimes(2)
-              expect(spy.mock.calls[1][0].meta.error).toBe('Value bar should have at least 8 characters.')
-            }
-        )
-      })
+                  minLength={8}
+                  name="foo"
+                  render={spy}
+                />
+              )}
+            </Form>
+          )
+          expect(spy).toHaveBeenCalled()
+          expect(spy).toHaveBeenCalledTimes(2)
+          expect(spy.mock.calls[1][0].meta.error).toBe(
+            'Value bar should have at least 8 characters.'
+          )
+        }
+      )
+    })
   })
-
 })