From 55b3a5b5b8bd5ffd005fb0fe5a834fbc90648058 Mon Sep 17 00:00:00 2001 From: Yuri S Date: Tue, 19 Dec 2017 23:30:28 +0200 Subject: [PATCH 1/7] Refactor Select.js --- src/Select.js | 110 ++++++++++++++++++++++---------------------- test/Select-test.js | 1 - 2 files changed, 55 insertions(+), 56 deletions(-) diff --git a/src/Select.js b/src/Select.js index 06d519c7ec..596386ff93 100644 --- a/src/Select.js +++ b/src/Select.js @@ -53,6 +53,27 @@ const shouldShowPlaceholder = (state, props, isOpen) => { return !inputValue || !onSelectResetsInput && !isOpen && !isPseudoFocused && !isFocused; }; +/** + * Retrieve a value from the given options and valueKey + * @param {String|Number|Array} value - the selected value(s) + * @param {Object} props - the Select component's props (or nextProps) + */ +const expandValue = (value, props) => { + const valueType = typeof value; + if (valueType !== 'string' && valueType !== 'number' && valueType !== 'boolean') return value; + let { options, valueKey } = props; + if (!options) return; + for (let i = 0; i < options.length; i++) { + if (String(options[i][valueKey]) === String(value)) return options[i]; + } +}; + + +const handleRequired = (value, multi) => { + if (!value) return true; + return (multi ? value.length === 0 : Object.keys(value).length === 0); +}; + class Select extends React.Component { constructor (props) { super(props); @@ -68,7 +89,6 @@ class Select extends React.Component { 'handleMouseDown', 'handleMouseDownOnArrow', 'handleMouseDownOnMenu', - 'handleRequired', 'handleTouchOutside', 'handleTouchMove', 'handleTouchStart', @@ -96,7 +116,7 @@ class Select extends React.Component { if (this.props.required) { this.setState({ - required: this.handleRequired(valueArray[0], this.props.multi), + required: handleRequired(valueArray[0], this.props.multi), }); } } @@ -115,7 +135,7 @@ class Select extends React.Component { if (nextProps.required) { this.setState({ - required: this.handleRequired(valueArray[0], nextProps.multi), + required: handleRequired(valueArray[0], nextProps.multi), }); } else if (this.props.required) { // Used to be required but it's not any more @@ -130,7 +150,7 @@ class Select extends React.Component { componentDidUpdate (prevProps, prevState) { // focus to the selected option if (this.menu && this.focused && this.state.isOpen && !this.hasScrolledToOption) { - let focusedOptionNode = findDOMNode(this.focused); + const focusedOptionNode = findDOMNode(this.focused); let menuNode = findDOMNode(this.menu); const scrollTop = menuNode.scrollTop; @@ -152,10 +172,10 @@ class Select extends React.Component { if (this._scrollToFocusedOptionOnUpdate && this.focused && this.menu) { this._scrollToFocusedOptionOnUpdate = false; - var focusedDOM = findDOMNode(this.focused); - var menuDOM = findDOMNode(this.menu); - var focusedRect = focusedDOM.getBoundingClientRect(); - var menuRect = menuDOM.getBoundingClientRect(); + const focusedDOM = findDOMNode(this.focused); + let menuDOM = findDOMNode(this.menu); + const focusedRect = focusedDOM.getBoundingClientRect(); + const menuRect = menuDOM.getBoundingClientRect(); if (focusedRect.bottom > menuRect.bottom) { menuDOM.scrollTop = (focusedDOM.offsetTop + focusedDOM.clientHeight - menuDOM.offsetHeight); } else if (focusedRect.top < menuRect.top) { @@ -163,7 +183,7 @@ class Select extends React.Component { } } if (this.props.scrollMenuIntoView && this.menuContainer) { - var menuContainerRect = this.menuContainer.getBoundingClientRect(); + const menuContainerRect = this.menuContainer.getBoundingClientRect(); if (window.innerHeight < menuContainerRect.bottom + this.props.menuBuffer) { window.scrollBy(0, menuContainerRect.bottom + this.props.menuBuffer - window.innerHeight); } @@ -216,12 +236,12 @@ class Select extends React.Component { this.input.blur(); } - handleTouchMove (event) { + handleTouchMove () { // Set a flag that the view is being dragged this.dragging = true; } - handleTouchStart (event) { + handleTouchStart () { // Set a flag that the view is not being dragged this.dragging = false; } @@ -270,7 +290,7 @@ class Select extends React.Component { // for the non-searchable select, toggle the menu if (!this.props.searchable) { - // TODO: This code means that if a select is searchable, onClick the options menu will not appear, only on subsequent click will it open. + // This code means that if a select is searchable, onClick the options menu will not appear, only on subsequent click will it open. this.focus(); return this.setState({ isOpen: !this.state.isOpen, @@ -391,7 +411,7 @@ class Select extends React.Component { if (this.props.onBlur) { this.props.onBlur(event); } - var onBlurredState = { + let onBlurredState = { isFocused: false, isOpen: false, isPseudoFocused: false, @@ -534,22 +554,17 @@ class Select extends React.Component { } } - handleRequired (value, multi) { - if (!value) return true; - return (multi ? value.length === 0 : Object.keys(value).length === 0); - } - getOptionLabel (op) { return op[this.props.labelKey]; } /** * Turns a value into an array from the given options - * @param {String|Number|Array} value - the value of the select input - * @param {Object} nextProps - optionally specify the nextProps so the returned array uses the latest configuration + * @param {String|Number|Array} value - the value of the select input + * @param {Object} nextProps - optionally specify the nextProps so the returned array uses the latest configuration * @returns {Array} the value of the select represented in an array */ - getValueArray (value, nextProps) { + getValueArray (value, nextProps = undefined) { /** support optionally passing in the `nextProps` so `componentWillReceiveProps` updates will function as expected */ const props = typeof nextProps === 'object' ? nextProps : this.props; if (props.multi) { @@ -560,33 +575,18 @@ class Select extends React.Component { if (value === null || value === undefined) return []; value = [value]; } - return value.map(value => this.expandValue(value, props)).filter(i => i); + return value.map(value => expandValue(value, props)).filter(i => i); } - var expandedValue = this.expandValue(value, props); + const expandedValue = expandValue(value, props); return expandedValue ? [expandedValue] : []; } - /** - * Retrieve a value from the given options and valueKey - * @param {String|Number|Array} value - the selected value(s) - * @param {Object} props - the Select component's props (or nextProps) - */ - expandValue (value, props) { - const valueType = typeof value; - if (valueType !== 'string' && valueType !== 'number' && valueType !== 'boolean') return value; - let { options, valueKey } = props; - if (!options) return; - for (var i = 0; i < options.length; i++) { - if (String(options[i][valueKey]) === String(value)) return options[i]; - } - } - setValue (value) { if (this.props.autoBlur) { this.blurInput(); } if (this.props.required) { - const required = this.handleRequired(value, this.props.multi); + const required = handleRequired(value, this.props.multi); this.setState({ required }); } if (this.props.onChange) { @@ -610,7 +610,7 @@ class Select extends React.Component { inputValue: this.handleInputValueChange(updatedValue), isOpen: !this.props.closeOnSelect, }, () => { - var valueArray = this.getValueArray(this.props.value); + const valueArray = this.getValueArray(this.props.value); if (valueArray.some(i => i[this.props.valueKey] === value[this.props.valueKey])) { this.removeValue(value); } else { @@ -629,7 +629,7 @@ class Select extends React.Component { } addValue (value) { - var valueArray = this.getValueArray(this.props.value); + let valueArray = this.getValueArray(this.props.value); const visibleOptions = this._visibleOptions.filter(val => !val.disabled); const lastValueIndex = visibleOptions.indexOf(value); this.setValue(valueArray.concat(value)); @@ -643,14 +643,14 @@ class Select extends React.Component { } popValue () { - var valueArray = this.getValueArray(this.props.value); + let valueArray = this.getValueArray(this.props.value); if (!valueArray.length) return; if (valueArray[valueArray.length-1].clearableValue === false) return; this.setValue(this.props.multi ? valueArray.slice(0, valueArray.length - 1) : null); } removeValue (value) { - var valueArray = this.getValueArray(this.props.value); + let valueArray = this.getValueArray(this.props.value); this.setValue(valueArray.filter(i => i[this.props.valueKey] !== value[this.props.valueKey])); this.focus(); } @@ -714,7 +714,7 @@ class Select extends React.Component { } focusAdjacentOption (dir) { - var options = this._visibleOptions + const options = this._visibleOptions .map((option, index) => ({ option, index })) .filter(option => !option.option.disabled); this._scrollToFocusedOptionOnUpdate = true; @@ -727,8 +727,8 @@ class Select extends React.Component { return; } if (!options.length) return; - var focusedIndex = -1; - for (var i = 0; i < options.length; i++) { + let focusedIndex = -1; + for (let i = 0; i < options.length; i++) { if (this._focusedOption === options[i].option) { focusedIndex = i; break; @@ -747,14 +747,14 @@ class Select extends React.Component { } else if (dir === 'end') { focusedIndex = options.length - 1; } else if (dir === 'page_up') { - var potentialIndex = focusedIndex - this.props.pageSize; + const potentialIndex = focusedIndex - this.props.pageSize; if (potentialIndex < 0) { focusedIndex = 0; } else { focusedIndex = potentialIndex; } } else if (dir === 'page_down') { - var potentialIndex = focusedIndex + this.props.pageSize; + const potentialIndex = focusedIndex + this.props.pageSize; if (potentialIndex > options.length - 1) { focusedIndex = options.length - 1; } else { @@ -835,7 +835,7 @@ class Select extends React.Component { } renderInput (valueArray, focusedOptionIndex) { - var className = classNames('Select-input', this.props.inputProps.className); + const className = classNames('Select-input', this.props.inputProps.className); const isOpen = !!this.state.isOpen; const ariaOwns = classNames({ @@ -877,7 +877,7 @@ class Select extends React.Component { } if (this.props.disabled || !this.props.searchable) { - const { inputClassName, ...divProps } = this.props.inputProps; + const { ...divProps } = this.props.inputProps; const ariaOwns = classNames({ [this._instancePrefix + '-list']: isOpen, @@ -957,8 +957,8 @@ class Select extends React.Component { } filterOptions (excludeOptions) { - var filterValue = this.state.inputValue; - var options = this.props.options || []; + const filterValue = this.state.inputValue; + const options = this.props.options || []; if (this.props.filterOptions) { // Maintain backwards compatibility with boolean attribute const filterOptions = typeof this.props.filterOptions === 'function' @@ -1046,7 +1046,7 @@ class Select extends React.Component { } getFocusableOptionIndex (selectedOption) { - var options = this._visibleOptions; + const options = this._visibleOptions; if (!options.length) return null; const valueKey = this.props.valueKey; @@ -1065,7 +1065,7 @@ class Select extends React.Component { } } - for (var i = 0; i < options.length; i++) { + for (let i = 0; i < options.length; i++) { if (!options[i].disabled) return i; } return null; @@ -1157,7 +1157,7 @@ class Select extends React.Component { ); } -}; +} Select.propTypes = { 'aria-describedby': PropTypes.string, // html id(s) of element(s) that should be used to describe this input (for assistive tech) diff --git a/test/Select-test.js b/test/Select-test.js index 3b00677e4d..f6e6b4f3fe 100644 --- a/test/Select-test.js +++ b/test/Select-test.js @@ -2990,7 +2990,6 @@ describe('Select', () => { instance = createControl({ searchable: false, inputProps: { - inputClassName: 'extra-input-class', className: 'extra-class-name', id: 'search-input-id' }, From 1cc9bf5777efe8a9e5b729914b94c69d1989ca8f Mon Sep 17 00:00:00 2001 From: Yuri S Date: Tue, 19 Dec 2017 23:33:55 +0200 Subject: [PATCH 2/7] Minor spaces --- src/Select.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Select.js b/src/Select.js index 596386ff93..c2f694a873 100644 --- a/src/Select.js +++ b/src/Select.js @@ -55,7 +55,7 @@ const shouldShowPlaceholder = (state, props, isOpen) => { /** * Retrieve a value from the given options and valueKey - * @param {String|Number|Array} value - the selected value(s) + * @param {String|Number|Array} value - the selected value(s) * @param {Object} props - the Select component's props (or nextProps) */ const expandValue = (value, props) => { @@ -560,7 +560,7 @@ class Select extends React.Component { /** * Turns a value into an array from the given options - * @param {String|Number|Array} value - the value of the select input + * @param {String|Number|Array} value - the value of the select input * @param {Object} nextProps - optionally specify the nextProps so the returned array uses the latest configuration * @returns {Array} the value of the select represented in an array */ From 62b4efb4f37f007677be1bc5532813c4e9cc1db2 Mon Sep 17 00:00:00 2001 From: Yuri S Date: Tue, 19 Dec 2017 23:36:19 +0200 Subject: [PATCH 3/7] Removed line --- src/Select.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/Select.js b/src/Select.js index c2f694a873..621eb5844f 100644 --- a/src/Select.js +++ b/src/Select.js @@ -68,7 +68,6 @@ const expandValue = (value, props) => { } }; - const handleRequired = (value, multi) => { if (!value) return true; return (multi ? value.length === 0 : Object.keys(value).length === 0); From 9e003b71ced64907edf08cb90f424da1f2e699d0 Mon Sep 17 00:00:00 2001 From: Yuri S Date: Tue, 19 Dec 2017 23:41:53 +0200 Subject: [PATCH 4/7] Spaces --- src/Select.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Select.js b/src/Select.js index 621eb5844f..bdb0d387db 100644 --- a/src/Select.js +++ b/src/Select.js @@ -56,7 +56,7 @@ const shouldShowPlaceholder = (state, props, isOpen) => { /** * Retrieve a value from the given options and valueKey * @param {String|Number|Array} value - the selected value(s) - * @param {Object} props - the Select component's props (or nextProps) + * @param {Object} props - the Select component's props (or nextProps) */ const expandValue = (value, props) => { const valueType = typeof value; @@ -559,7 +559,7 @@ class Select extends React.Component { /** * Turns a value into an array from the given options - * @param {String|Number|Array} value - the value of the select input + * @param {String|Number|Array} value - the value of the select input * @param {Object} nextProps - optionally specify the nextProps so the returned array uses the latest configuration * @returns {Array} the value of the select represented in an array */ From b09afb98c7bdf3b84b3e20623c5479670609df82 Mon Sep 17 00:00:00 2001 From: Yuri S Date: Wed, 20 Dec 2017 00:35:35 +0200 Subject: [PATCH 5/7] Removed !! --- src/Select.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/Select.js b/src/Select.js index bdb0d387db..ef5da5c756 100644 --- a/src/Select.js +++ b/src/Select.js @@ -393,7 +393,7 @@ class Select extends React.Component { this.setState({ isFocused: true, - isOpen: toOpen, + isOpen: !!toOpen, }); this._openAfterFocus = false; @@ -835,7 +835,7 @@ class Select extends React.Component { renderInput (valueArray, focusedOptionIndex) { const className = classNames('Select-input', this.props.inputProps.className); - const isOpen = !!this.state.isOpen; + const isOpen = this.state.isOpen; const ariaOwns = classNames({ [this._instancePrefix + '-list']: isOpen, @@ -896,7 +896,7 @@ class Select extends React.Component { onBlur={this.handleInputBlur} onFocus={this.handleInputFocus} ref={ref => this.input = ref} - aria-disabled={'' + !!this.props.disabled} + aria-disabled={'' + this.props.disabled} style={{ border: 0, width: 1, display:'inline-block' }}/> ); } From 8a5689f23454da4885e7a016eca099890c365839 Mon Sep 17 00:00:00 2001 From: Yuri S Date: Wed, 20 Dec 2017 01:17:48 +0200 Subject: [PATCH 6/7] Alphabetically sorted --- src/Select.js | 118 +++++++++++++++++++++++++++----------------------- 1 file changed, 65 insertions(+), 53 deletions(-) diff --git a/src/Select.js b/src/Select.js index ef5da5c756..4a9aec5083 100644 --- a/src/Select.js +++ b/src/Select.js @@ -3,16 +3,16 @@ Licensed under the MIT License (MIT), see http://jedwatson.github.io/react-select */ -import React from 'react'; -import PropTypes from 'prop-types'; -import { findDOMNode } from 'react-dom'; import AutosizeInput from 'react-input-autosize'; import classNames from 'classnames'; +import PropTypes from 'prop-types'; +import React from 'react'; +import { findDOMNode } from 'react-dom'; import defaultArrowRenderer from './utils/defaultArrowRenderer'; +import defaultClearRenderer from './utils/defaultClearRenderer'; import defaultFilterOptions from './utils/defaultFilterOptions'; import defaultMenuRenderer from './utils/defaultMenuRenderer'; -import defaultClearRenderer from './utils/defaultClearRenderer'; import Option from './Option'; import Value from './Value'; @@ -79,6 +79,7 @@ class Select extends React.Component { [ 'clearValue', 'focusOption', + 'getOptionLabel', 'handleInputBlur', 'handleInputChange', 'handleInputFocus', @@ -88,13 +89,12 @@ class Select extends React.Component { 'handleMouseDown', 'handleMouseDownOnArrow', 'handleMouseDownOnMenu', - 'handleTouchOutside', - 'handleTouchMove', - 'handleTouchStart', 'handleTouchEnd', 'handleTouchEndClearValue', + 'handleTouchMove', + 'handleTouchOutside', + 'handleTouchStart', 'handleValueClick', - 'getOptionLabel', 'onOptionRef', 'removeValue', 'selectValue', @@ -368,9 +368,9 @@ class Select extends React.Component { closeMenu () { if(this.props.onCloseResetsInput) { this.setState({ + inputValue: this.handleInputValueChange(''), isOpen: false, isPseudoFocused: this.state.isFocused && !this.props.multi, - inputValue: this.handleInputValueChange('') }); } else { this.setState({ @@ -396,8 +396,8 @@ class Select extends React.Component { isOpen: !!toOpen, }); - this._openAfterFocus = false; this._focusAfterClear = false; + this._openAfterFocus = false; } handleInputBlur (event) { @@ -429,9 +429,9 @@ class Select extends React.Component { } this.setState({ + inputValue: newInputValue, isOpen: true, isPseudoFocused: false, - inputValue: newInputValue, }); } @@ -665,8 +665,8 @@ class Select extends React.Component { this.setValue(this.getResetValue()); this.setState({ - isOpen: false, inputValue: this.handleInputValueChange(''), + isOpen: false, }, this.focus); this._focusAfterClear = true; @@ -719,9 +719,9 @@ class Select extends React.Component { this._scrollToFocusedOptionOnUpdate = true; if (!this.state.isOpen) { this.setState({ - isOpen: true, + focusedOption: this._focusedOption || (options.length ? options[dir === 'next' ? 0 : options.length - 1].option : null), inputValue: '', - focusedOption: this._focusedOption || (options.length ? options[dir === 'next' ? 0 : options.length - 1].option : null) + isOpen: true, }); return; } @@ -802,14 +802,14 @@ class Select extends React.Component { return valueArray.map((value, i) => { return ( {renderLabel(value, i)}   @@ -820,12 +820,12 @@ class Select extends React.Component { if (isOpen) onClick = null; return ( {renderLabel(valueArray[0])} @@ -853,21 +853,21 @@ class Select extends React.Component { const inputProps = { ...this.props.inputProps, - role: 'combobox', - 'aria-expanded': '' + isOpen, - 'aria-owns': ariaOwns, - 'aria-haspopup': '' + isOpen, 'aria-activedescendant': isOpen ? this._instancePrefix + '-option-' + focusedOptionIndex : this._instancePrefix + '-value', 'aria-describedby': this.props['aria-describedby'], - 'aria-labelledby': this.props['aria-labelledby'], + 'aria-expanded': '' + isOpen, + 'aria-haspopup': '' + isOpen, 'aria-label': this.props['aria-label'], + 'aria-labelledby': this.props['aria-labelledby'], + 'aria-owns': ariaOwns, className: className, - tabIndex: this.props.tabIndex, onBlur: this.handleInputBlur, onChange: this.handleInputChange, onFocus: this.handleInputFocus, ref: ref => this.input = ref, + role: 'combobox', required: this.state.required, + tabIndex: this.props.tabIndex, value, }; @@ -885,19 +885,20 @@ class Select extends React.Component {
this.input = ref} - aria-disabled={'' + this.props.disabled} - style={{ border: 0, width: 1, display:'inline-block' }}/> + role="combobox" + style={{ border: 0, width: 1, display:'inline-block' }} + tabIndex={this.props.tabIndex || 0} + /> ); } @@ -919,15 +920,18 @@ class Select extends React.Component { || !valueArray.length || this.props.disabled || this.props.isLoading) return; + const ariaLabel = this.props.multi ? this.props.clearAllText : this.props.clearValueText; const clear = this.props.clearRenderer(); return ( - {clear} @@ -975,8 +979,8 @@ class Select extends React.Component { labelKey: this.props.labelKey, matchPos: this.props.matchPos, matchProp: this.props.matchProp, + trimFilter: this.props.trimFilter, valueKey: this.props.valueKey, - trimFilter: this.props.trimFilter } ); } else { @@ -999,16 +1003,16 @@ class Select extends React.Component { instancePrefix: this._instancePrefix, labelKey: this.props.labelKey, onFocus: this.focusOption, + onOptionRef: this.onOptionRef, onSelect: this.selectValue, optionClassName: this.props.optionClassName, optionComponent: this.props.optionComponent, optionRenderer: this.props.optionRenderer || this.getOptionLabel, options, - selectValue: this.selectValue, removeValue: this.removeValue, + selectValue: this.selectValue, valueArray, valueKey: this.props.valueKey, - onOptionRef: this.onOptionRef, }); } else if (this.props.noResultsText) { return ( @@ -1027,20 +1031,23 @@ class Select extends React.Component { let value = valueArray.map(i => stringifyValue(i[this.props.valueKey])).join(this.props.delimiter); return ( this.value = ref} + disabled={this.props.disabled} name={this.props.name} + ref={ref => this.value = ref} + type="hidden" value={value} - disabled={this.props.disabled} /> + /> ); } return valueArray.map((item, index) => ( - + /> )); } @@ -1078,10 +1085,15 @@ class Select extends React.Component { return (
this.menuContainer = ref} className="Select-menu-outer" style={this.props.menuContainerStyle}> -
this.menu = ref} role="listbox" tabIndex={-1} className="Select-menu" id={this._instancePrefix + '-list'} - style={this.props.menuStyle} - onScroll={this.handleMenuScroll} - onMouseDown={this.handleMouseDownOnMenu}> +
this.menu = ref} + className="Select-menu" + id={this._instancePrefix + '-list'} + onMouseDown={this.handleMouseDownOnMenu} + onScroll={this.handleMenuScroll} + role="listbox" + style={this.props.menuStyle} + tabIndex={-1} + > {menu}
@@ -1102,8 +1114,7 @@ class Select extends React.Component { focusedOption = this._focusedOption = null; } let className = classNames('Select', this.props.className, { - 'Select--multi': this.props.multi, - 'Select--single': !this.props.multi, + 'has-value': valueArray.length, 'is-clearable': this.props.clearable, 'is-disabled': this.props.disabled, 'is-focused': this.state.isFocused, @@ -1111,8 +1122,9 @@ class Select extends React.Component { 'is-open': isOpen, 'is-pseudo-focused': this.state.isPseudoFocused, 'is-searchable': this.props.searchable, - 'has-value': valueArray.length, + 'Select--multi': this.props.multi, 'Select--rtl': this.props.rtl, + 'Select--single': !this.props.multi, }); let removeMessage = null; @@ -1136,12 +1148,12 @@ class Select extends React.Component { {this.renderHiddenField(valueArray)}
this.control = ref} className="Select-control" - style={this.props.style} onKeyDown={this.handleKeyDown} onMouseDown={this.handleMouseDown} onTouchEnd={this.handleTouchEnd} - onTouchStart={this.handleTouchStart} onTouchMove={this.handleTouchMove} + onTouchStart={this.handleTouchStart} + style={this.props.style} > {this.renderValue(valueArray, isOpen)} @@ -1265,8 +1277,8 @@ Select.defaultProps = { multi: false, noResultsText: 'No results found', onBlurResetsInput: true, - onSelectResetsInput: true, onCloseResetsInput: true, + onSelectResetsInput: true, openOnClick: true, optionComponent: Option, pageSize: 5, From bb8e7b0a1481b23bf56f19182561d48f115f4b91 Mon Sep 17 00:00:00 2001 From: Yuri S Date: Wed, 20 Dec 2017 01:23:16 +0200 Subject: [PATCH 7/7] One more alphabetically ordered --- src/Select.js | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/src/Select.js b/src/Select.js index 4a9aec5083..8981fa4fc9 100644 --- a/src/Select.js +++ b/src/Select.js @@ -1085,14 +1085,15 @@ class Select extends React.Component { return (
this.menuContainer = ref} className="Select-menu-outer" style={this.props.menuContainerStyle}> -
this.menu = ref} - className="Select-menu" - id={this._instancePrefix + '-list'} - onMouseDown={this.handleMouseDownOnMenu} - onScroll={this.handleMenuScroll} - role="listbox" - style={this.props.menuStyle} - tabIndex={-1} +
this.menu = ref} + role="listbox" + style={this.props.menuStyle} + tabIndex={-1} > {menu}