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()
diff --git a/test/specs/collections/Form/FormDropdown-test.js b/test/specs/collections/Form/FormDropdown-test.js
index e988678d75..1587568b86 100644
--- a/test/specs/collections/Form/FormDropdown-test.js
+++ b/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()
diff --git a/test/specs/collections/Form/FormSelect-test.js b/test/specs/collections/Form/FormSelect-test.js
index 150fa02576..7ab6cc4d0d 100644
--- a/test/specs/collections/Form/FormSelect-test.js
+++ b/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()
diff --git a/test/specs/modules/Dropdown/Dropdown-test.js b/test/specs/modules/Dropdown/Dropdown-test.js
index 37731c371e..8f43d884aa 100644
--- a/test/specs/modules/Dropdown/Dropdown-test.js
+++ b/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,