diff --git a/src/addons/Select/Select.js b/src/addons/Select/Select.js index f6051dc2ca..184993b72f 100644 --- a/src/addons/Select/Select.js +++ b/src/addons/Select/Select.js @@ -8,10 +8,11 @@ import Dropdown from '../../modules/Dropdown' * @see Dropdown * @see Form */ -function Select(props) { - return -} +const Select = React.forwardRef(function (props, ref) { + return +}) +Select.displayName = 'Select' Select.propTypes = { /** Array of Dropdown.Item props e.g. `{ text: '', value: '' }` */ options: PropTypes.arrayOf(PropTypes.shape(Dropdown.Item.propTypes)).isRequired, diff --git a/src/collections/Form/FormDropdown.js b/src/collections/Form/FormDropdown.js index 52e9648f31..aeeb745314 100644 --- a/src/collections/Form/FormDropdown.js +++ b/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 -} + return +}) +FormDropdown.displayName = 'FormDropdown' FormDropdown.propTypes = { /** An element type to render as (string or function). */ as: PropTypes.elementType, diff --git a/src/collections/Form/FormSelect.js b/src/collections/Form/FormSelect.js index d867140945..30c6d3f185 100644 --- a/src/collections/Form/FormSelect.js +++ b/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 -} + return +}) +FormSelect.displayName = 'FormSelect' FormSelect.propTypes = { /** An element type to render as (string or function). */ as: PropTypes.elementType, diff --git a/src/modules/Dropdown/Dropdown.js b/src/modules/Dropdown/Dropdown.js index 387d4787b9..7c7a8a5bcd 100644 --- a/src/modules/Dropdown/Dropdown.js +++ b/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()} diff --git a/test/specs/addons/Select/Select-test.js b/test/specs/addons/Select/Select-test.js index a0c59db4e6..de0a909bf9 100644 --- a/test/specs/addons/Select/Select-test.js +++ b/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(