Forward refs to input component (#608)

* Wrap Field with forwardRef

* 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

* Document that the ref is forwarded

* Typed forwardRef call

Co-authored-by: Erik Rasmussen <[email protected]>

Author: TylerRick

docs/types/FieldProps.md

@@ -189,6 +189,10 @@ A function that takes the value from the input and name of the field and convert
 
 **Note: If would like to override the default behavior of converting `''` to `undefined`, you can pass an [identity function](https://en.wikipedia.org/wiki/Identity_function), `v => v`, to `parse`, thus allowing you to have form values of `''`.**
 
+## `ref`
+
+The `ref` is forwarded to the component provided by the `component` prop.
+
 ## `render`
 
 <!-- prettier-ignore -->

src/Field.js

@@ -4,62 +4,72 @@ import type { FieldProps as Props, FieldRenderProps } from './types'
 import renderComponent from './renderComponent'
 import useField from './useField'
 
-const Field = ({
-  afterSubmit,
-  allowNull,
-  beforeSubmit,
-  children,
-  component,
-  data,
-  defaultValue,
-  format,
-  formatOnBlur,
-  initialValue,
-  isEqual,
-  multiple,
-  name,
-  parse,
-  subscription,
-  type,
-  validate,
-  validateFields,
-  value,
-  ...rest
-}: Props) => {
-  const field: FieldRenderProps = useField(name, {
-    afterSubmit,
-    allowNull,
-    beforeSubmit,
-    children,
-    component,
-    data,
-    defaultValue,
-    format,
-    formatOnBlur,
-    initialValue,
-    isEqual,
-    multiple,
-    parse,
-    subscription,
-    type,
-    validate,
-    validateFields,
-    value
-  })
+const Field = React.forwardRef<any, Props>(
+  (
+    {
+      afterSubmit,
+      allowNull,
+      beforeSubmit,
+      children,
+      component,
+      data,
+      defaultValue,
+      format,
+      formatOnBlur,
+      initialValue,
+      isEqual,
+      multiple,
+      name,
+      parse,
+      subscription,
+      type,
+      validate,
+      validateFields,
+      value,
+      ...rest
+    }: Props,
+    ref
+  ) => {
+    const field: FieldRenderProps = useField(name, {
+      afterSubmit,
+      allowNull,
+      beforeSubmit,
+      children,
+      component,
+      data,
+      defaultValue,
+      format,
+      formatOnBlur,
+      initialValue,
+      isEqual,
+      multiple,
+      parse,
+      subscription,
+      type,
+      validate,
+      validateFields,
+      value
+    })
 
-  if (typeof children === 'function') {
-    return (children: Function)({ ...field, ...rest })
-  }
+    if (typeof children === 'function') {
+      return (children: Function)({ ...field, ...rest })
+    }
 
-  if (typeof component === 'string') {
-    // ignore meta, combine input with any other props
-    return React.createElement(component, { ...field.input, children, ...rest })
+    if (typeof component === 'string') {
+      // ignore meta, combine input with any other props
+      return React.createElement(component, {
+        ...field.input,
+        children,
+        ref,
+        ...rest
+      })
+    }
+    return renderComponent(
+      { children, component, ref, ...rest },
+      field,
+      `Field(${name})`
+    )
   }
-  return renderComponent(
-    { children, component, ...rest },
-    field,
-    `Field(${name})`
-  )
-}
+)
 
 export default Field

src/Field.test.js

@@ -405,6 +405,22 @@ describe('Field', () => {
     expect(CustomSelect.mock.calls[0][0].input.multiple).toBe(true)
   })
 
+  it('should pass ref through to the input', () => {
+    const ref = React.createRef()
+    render(
+      <Form onSubmit={onSubmitMock} subscription={{ values: true }}>
+        {() => (
+          <form>
+            <Field name="name" component="input" ref={ref} />
+          </form>
+        )}
+      </Form>
+    )
+
+    expect(ref.current).not.toBe(null)
+    expect(ref.current instanceof HTMLInputElement).toBe(true)
+  })
+
   it('should not pass an undefined type through to the input', () => {
     const MyInput = jest.fn(({ input }) => <input {...input} />)
     render(