chore(Select,FormSelect,FormDropdown): use React.forwardRef() (#4408)

* chore(Select): use React.forwardRef()

* chore(FormSelect): use React.forwardRef()

* chore(FormDropdown): use React.forwardRef()

* fix tests, fix Dropdown component

Co-authored-by: Oleksandr Fediashov <olfedias@microsoft.com>

Author: felixmosh

src/addons/Select/Select.js

@@ -8,10 +8,11 @@ import Dropdown from '../../modules/Dropdown'
  * @see Dropdown
  * @see Form
  */
-function Select(props) {
-  return <Dropdown {...props} selection />
-}
+const Select = React.forwardRef(function (props, ref) {
+  return <Dropdown {...props} selection ref={ref} />
+})
 
+Select.displayName = 'Select'
 Select.propTypes = {
   /** Array of Dropdown.Item props e.g. `{ text: '', value: '' }` */
   options: PropTypes.arrayOf(PropTypes.shape(Dropdown.Item.propTypes)).isRequired,

src/collections/Form/FormDropdown.js

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

src/collections/Form/FormSelect.js

@@ -11,14 +11,15 @@ import FormField from './FormField'
  * @see Form
  * @see Select
  */
-function FormSelect(props) {
+const FormSelect = React.forwardRef(function (props, ref) {
   const { control, options } = props
   const rest = getUnhandledProps(FormSelect, props)
   const ElementType = getElementType(FormSelect, props)
 
-  return <ElementType {...rest} control={control} options={options} />
-}
+  return <ElementType {...rest} control={control} options={options} ref={ref} />
+})
 
+FormSelect.displayName = 'FormSelect'
 FormSelect.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,

src/modules/Dropdown/Dropdown.js

@@ -15,6 +15,7 @@ import {
   getUnhandledProps,
   makeDebugger,
   objectDiff,
+  setRef,
   useKeyOnly,
   useKeyOrValueAndKey,
 } from '../../lib'
@@ -73,6 +74,11 @@ class DropdownInner extends Component {
   sizerRef = createRef()
   ref = createRef()
 
+  handleRef = (el) => {
+    this.ref.current = el
+    setRef(this.props.innerRef, el)
+  }
+
   getInitialAutoControlledState() {
     return { focus: false, searchQuery: '' }
   }
@@ -1097,7 +1103,7 @@ class DropdownInner extends Component {
         onFocus={this.handleFocus}
         onChange={this.handleChange}
         tabIndex={this.computeTabIndex()}
-        ref={this.ref}
+        ref={this.handleRef}
       >
         {this.renderLabels()}
         {this.renderSearchInput()}

test/specs/addons/Select/Select-test.js

@@ -11,6 +11,7 @@ const requiredProps = {
 describe('Select', () => {
   common.isConformant(Select, { requiredProps })
   common.hasSubcomponents(Select, [Dropdown.Divider, Dropdown.Header, Dropdown.Item, Dropdown.Menu])
+  common.forwardsRef(Select, { requiredProps })
 
   it('renders a selection Dropdown', () => {
     shallow(<Select {...requiredProps} />)

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

@@ -7,6 +7,7 @@ import * as common from 'test/specs/commonTests'
 describe('FormDropdown', () => {
   common.isConformant(FormDropdown, { ignoredTypingsProps: ['error'] })
   common.labelImplementsHtmlForProp(FormDropdown)
+  common.forwardsRef(FormDropdown)
 
   it('renders a FormField with a Dropdown control', () => {
     shallow(<FormDropdown />)

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

@@ -11,6 +11,7 @@ const requiredProps = {
 describe('FormSelect', () => {
   common.isConformant(FormSelect, { requiredProps, ignoredTypingsProps: ['error'] })
   common.labelImplementsHtmlForProp(FormSelect, { requiredProps })
+  common.forwardsRef(FormSelect, { requiredProps })
 
   it('renders a FormField with a Select control', () => {
     shallow(<FormSelect {...requiredProps} />)

test/specs/modules/Dropdown/Dropdown-test.js

@@ -100,6 +100,7 @@ describe('Dropdown', () => {
   })
 
   common.isConformant(Dropdown)
+  common.forwardsRef(Dropdown)
   common.hasUIClassName(Dropdown)
   common.hasSubcomponents(Dropdown, [
     DropdownDivider,