diff --git a/src/Select.js b/src/Select.js index 9f7d75efe6..872a7241da 100644 --- a/src/Select.js +++ b/src/Select.js @@ -45,7 +45,7 @@ const Select = React.createClass({ addLabelText: React.PropTypes.string, // placeholder displayed when you want to add a label on a multi-value input 'aria-label': React.PropTypes.string, // Aria label (for assistive tech) 'aria-labelledby': React.PropTypes.string, // HTML ID of an element that should be used as the label (for assistive tech) - arrowRenderer: React.PropTypes.func, // Create drop-down caret element + arrowRenderer: React.PropTypes.func, // Create drop-down caret element autoBlur: React.PropTypes.bool, // automatically blur the component when an option is selected autofocus: React.PropTypes.bool, // autofocus the component on mount autosize: React.PropTypes.bool, // whether to enable autosizing or not @@ -916,6 +916,12 @@ const Select = React.createClass({ } }, + onOptionRef(ref, isFocused) { + if (isFocused) { + this.focused = ref; + } + }, + renderMenu (options, valueArray, focusedOption) { if (options && options.length) { return this.props.menuRenderer({ @@ -932,6 +938,7 @@ const Select = React.createClass({ selectValue: this.selectValue, valueArray, valueKey: this.props.valueKey, + onOptionRef: this.onOptionRef, }); } else if (this.props.noResultsText) { return ( diff --git a/src/utils/defaultMenuRenderer.js b/src/utils/defaultMenuRenderer.js index 8154d7c4b8..b5ba47b0bf 100644 --- a/src/utils/defaultMenuRenderer.js +++ b/src/utils/defaultMenuRenderer.js @@ -13,13 +13,13 @@ function menuRenderer ({ options, valueArray, valueKey, + onOptionRef }) { let Option = optionComponent; return options.map((option, i) => { let isSelected = valueArray && valueArray.indexOf(option) > -1; let isFocused = option === focusedOption; - let optionRef = isFocused ? 'focused' : null; let optionClass = classNames(optionClassName, { 'Select-option': true, 'is-selected': isSelected, @@ -39,7 +39,7 @@ function menuRenderer ({ onSelect={onSelect} option={option} optionIndex={i} - ref={optionRef} + ref={ref => { onOptionRef(ref, isFocused); }} > {optionRenderer(option, i)}