Add ref to components (#4373)

* Add ref to FormButton

* Add ref to FormCheckbox

* Add forwardRef to FormGroup

* Remove accidental `only` calls

src/collections/Form/FormButton.js

@@ -10,13 +10,15 @@ import FormField from './FormField'
  * @see Button
  * @see Form
  */
-function FormButton(props) {
+const FormButton = React.forwardRef((props, ref) => {
   const { control } = props
   const rest = getUnhandledProps(FormButton, props)
   const ElementType = getElementType(FormButton, props)
 
-  return <ElementType {...rest} control={control} />
-}
+  return <ElementType {...rest} control={control} ref={ref} />
+})
+
+FormButton.displayName = 'FormButton'
 
 FormButton.propTypes = {
   /** An element type to render as (string or function). */

src/collections/Form/FormCheckbox.js

@@ -10,13 +10,15 @@ import FormField from './FormField'
  * @see Checkbox
  * @see Form
  */
-function FormCheckbox(props) {
+const FormCheckbox = React.forwardRef((props, ref) => {
   const { control } = props
   const rest = getUnhandledProps(FormCheckbox, props)
   const ElementType = getElementType(FormCheckbox, props)
 
-  return <ElementType {...rest} control={control} />
-}
+  return <ElementType {...rest} control={control} ref={ref} />
+})
+
+FormCheckbox.displayName = 'FormCheckbox'
 
 FormCheckbox.propTypes = {
   /** An element type to render as (string or function). */

src/collections/Form/FormGroup.js

@@ -15,7 +15,7 @@ import {
  * A set of fields can appear grouped together.
  * @see Form
  */
-function FormGroup(props) {
+const FormGroup = React.forwardRef((props, ref) => {
   const { children, className, grouped, inline, unstackable, widths } = props
 
   const classes = cx(
@@ -30,11 +30,13 @@ function FormGroup(props) {
   const ElementType = getElementType(FormGroup, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {children}
     </ElementType>
   )
-}
+})
+
+FormGroup.displayName = 'FormGroup'
 
 FormGroup.propTypes = {
   /** An element type to render as (string or function). */

test/specs/collections/Form/FormButton-test.js

@@ -15,4 +15,6 @@ describe('FormButton', () => {
       .find('FormField')
       .should.have.prop('control', Button)
   })
+
+  common.forwardsRef(FormButton, { tagName: 'button' })
 })

test/specs/collections/Form/FormCheckbox-test.js

@@ -14,4 +14,6 @@ describe('FormCheckbox', () => {
       .find('FormField')
       .should.have.prop('control', Checkbox)
   })
+
+  common.forwardsRef(FormCheckbox, { tagName: 'input' })
 })

test/specs/collections/Form/FormGroup-test.js

@@ -16,4 +16,6 @@ describe('FormGroup', () => {
   common.propKeyOnlyToClassName(FormGroup, 'grouped')
   common.propKeyOnlyToClassName(FormGroup, 'inline')
   common.propKeyOnlyToClassName(FormGroup, 'unstackable')
+
+  common.forwardsRef(FormGroup)
 })