Skip to content

Commit 88974b5

Browse files
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 <[email protected]>
1 parent eeffde3 commit 88974b5

File tree

8 files changed

+23
-10
lines changed

8 files changed

+23
-10
lines changed

src/addons/Select/Select.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,11 @@ import Dropdown from '../../modules/Dropdown'
88
* @see Dropdown
99
* @see Form
1010
*/
11-
function Select(props) {
12-
return <Dropdown {...props} selection />
13-
}
11+
const Select = React.forwardRef(function (props, ref) {
12+
return <Dropdown {...props} selection ref={ref} />
13+
})
1414

15+
Select.displayName = 'Select'
1516
Select.propTypes = {
1617
/** Array of Dropdown.Item props e.g. `{ text: '', value: '' }` */
1718
options: PropTypes.arrayOf(PropTypes.shape(Dropdown.Item.propTypes)).isRequired,

src/collections/Form/FormDropdown.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,15 @@ import FormField from './FormField'
1010
* @see Dropdown
1111
* @see Form
1212
*/
13-
function FormDropdown(props) {
13+
const FormDropdown = React.forwardRef(function (props, ref) {
1414
const { control } = props
1515
const rest = getUnhandledProps(FormDropdown, props)
1616
const ElementType = getElementType(FormDropdown, props)
1717

18-
return <ElementType {...rest} control={control} />
19-
}
18+
return <ElementType {...rest} control={control} ref={ref} />
19+
})
2020

21+
FormDropdown.displayName = 'FormDropdown'
2122
FormDropdown.propTypes = {
2223
/** An element type to render as (string or function). */
2324
as: PropTypes.elementType,

src/collections/Form/FormSelect.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,15 @@ import FormField from './FormField'
1111
* @see Form
1212
* @see Select
1313
*/
14-
function FormSelect(props) {
14+
const FormSelect = React.forwardRef(function (props, ref) {
1515
const { control, options } = props
1616
const rest = getUnhandledProps(FormSelect, props)
1717
const ElementType = getElementType(FormSelect, props)
1818

19-
return <ElementType {...rest} control={control} options={options} />
20-
}
19+
return <ElementType {...rest} control={control} options={options} ref={ref} />
20+
})
2121

22+
FormSelect.displayName = 'FormSelect'
2223
FormSelect.propTypes = {
2324
/** An element type to render as (string or function). */
2425
as: PropTypes.elementType,

src/modules/Dropdown/Dropdown.js

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import {
1515
getUnhandledProps,
1616
makeDebugger,
1717
objectDiff,
18+
setRef,
1819
useKeyOnly,
1920
useKeyOrValueAndKey,
2021
} from '../../lib'
@@ -73,6 +74,11 @@ class DropdownInner extends Component {
7374
sizerRef = createRef()
7475
ref = createRef()
7576

77+
handleRef = (el) => {
78+
this.ref.current = el
79+
setRef(this.props.innerRef, el)
80+
}
81+
7682
getInitialAutoControlledState() {
7783
return { focus: false, searchQuery: '' }
7884
}
@@ -1097,7 +1103,7 @@ class DropdownInner extends Component {
10971103
onFocus={this.handleFocus}
10981104
onChange={this.handleChange}
10991105
tabIndex={this.computeTabIndex()}
1100-
ref={this.ref}
1106+
ref={this.handleRef}
11011107
>
11021108
{this.renderLabels()}
11031109
{this.renderSearchInput()}

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ const requiredProps = {
1111
describe('Select', () => {
1212
common.isConformant(Select, { requiredProps })
1313
common.hasSubcomponents(Select, [Dropdown.Divider, Dropdown.Header, Dropdown.Item, Dropdown.Menu])
14+
common.forwardsRef(Select, { requiredProps })
1415

1516
it('renders a selection Dropdown', () => {
1617
shallow(<Select {...requiredProps} />)

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import * as common from 'test/specs/commonTests'
77
describe('FormDropdown', () => {
88
common.isConformant(FormDropdown, { ignoredTypingsProps: ['error'] })
99
common.labelImplementsHtmlForProp(FormDropdown)
10+
common.forwardsRef(FormDropdown)
1011

1112
it('renders a FormField with a Dropdown control', () => {
1213
shallow(<FormDropdown />)

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ const requiredProps = {
1111
describe('FormSelect', () => {
1212
common.isConformant(FormSelect, { requiredProps, ignoredTypingsProps: ['error'] })
1313
common.labelImplementsHtmlForProp(FormSelect, { requiredProps })
14+
common.forwardsRef(FormSelect, { requiredProps })
1415

1516
it('renders a FormField with a Select control', () => {
1617
shallow(<FormSelect {...requiredProps} />)

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -100,6 +100,7 @@ describe('Dropdown', () => {
100100
})
101101

102102
common.isConformant(Dropdown)
103+
common.forwardsRef(Dropdown)
103104
common.hasUIClassName(Dropdown)
104105
common.hasSubcomponents(Dropdown, [
105106
DropdownDivider,

0 commit comments

Comments
 (0)