Merge pull request #2027 from thecreazy/master

Added id in the input select

CHANGES.md

@@ -31,3 +31,8 @@ complex option values are much better supported now, won't throw duplicate key e
 ## Notes
 
 `undefined` default props are no longer declared
+
+
+## Added the id custom value
+
+Now you can add an id to the select element to use it for testing. 

examples/src/components/States.js

@@ -53,7 +53,7 @@ var StatesField = createClass({
 		return (
 			<div className="section">
 				<h3 className="section-heading">{this.props.label} <a href="https://github.com/JedWatson/react-select/tree/master/examples/src/components/States.js">(Source)</a></h3>
-				<Select ref="stateSelect" autoFocus options={options} simpleValue clearable={this.state.clearable} name="selected-state" disabled={this.state.disabled} value={this.state.selectValue} onChange={this.updateValue} searchable={this.state.searchable} />
+				<Select id="state-select" ref="stateSelect" autoFocus options={options} simpleValue clearable={this.state.clearable} name="selected-state" disabled={this.state.disabled} value={this.state.selectValue} onChange={this.updateValue} searchable={this.state.searchable} />
 
 				<div style={{ marginTop: 14 }}>
 					<button type="button" onClick={this.focusStateSelect}>Focus Select</button>

src/Select.js

@@ -750,7 +750,6 @@ class Select extends React.Component {
 				&& this.state.isFocused
 				&& !this.state.inputValue
 		});
-
 		const inputProps = {
 			...this.props.inputProps,
 			role: 'combobox',
@@ -781,8 +780,8 @@ class Select extends React.Component {
 			const ariaOwns = classNames({
 				[this._instancePrefix + '-list']: isOpen,
 			});
-
 			return (
+
 				<div
 					{...divProps}
 					role="combobox"
@@ -794,19 +793,20 @@ class Select extends React.Component {
 					onBlur={this.handleInputBlur}
 					onFocus={this.handleInputFocus}
 					ref={ref => this.input = ref}
+					id={divProps.id ? divProps.id : this.props.id}
 					aria-readonly={'' + !!this.props.disabled}
 					style={{ border: 0, width: 1, display:'inline-block' }}/>
 			);
 		}
 
 		if (this.props.autosize) {
 			return (
-				<AutosizeInput {...inputProps} minWidth="5" />
+				<AutosizeInput id={this.props.id} {...inputProps} minWidth="5" />
 			);
 		}
 		return (
 			<div className={ className } key="input-wrap">
-				<input {...inputProps} />
+				<input id={this.props.id} {...inputProps} />
 			</div>
 		);
 	}
@@ -1054,8 +1054,8 @@ Select.propTypes = {
 	'aria-labelledby': PropTypes.string,  // HTML ID of an element that should be used as the label (for assistive tech)
 	arrowRenderer: PropTypes.func,        // Create drop-down caret element
 	autoBlur: PropTypes.bool,             // automatically blur the component when an option is selected
-	autofocus: PropTypes.bool,            // deprecated; use autoFocus instead
 	autoFocus: PropTypes.bool,            // autofocus the component on mount
+	autofocus: PropTypes.bool,            // deprecated; use autoFocus instead
 	autosize: PropTypes.bool,             // whether to enable autosizing or not
 	backspaceRemoves: PropTypes.bool,     // whether backspace removes an item if there is no text input
 	backspaceToRemoveMessage: PropTypes.string,  // Message to use for screenreaders to press backspace to remove the current item - {label} is replaced with the item label
@@ -1071,6 +1071,7 @@ Select.propTypes = {
 	escapeClearsValue: PropTypes.bool,    // whether escape clears the value when the menu is closed
 	filterOption: PropTypes.func,         // method to filter a single option (option, filterString)
 	filterOptions: PropTypes.any,         // boolean to enable default filtering or function to filter the options array ([options], filterString, [values])
+	id: PropTypes.string, 				  // String to set at the input the a custom id, you can use it for the browser test
 	ignoreAccents: PropTypes.bool,        // whether to strip diacritics when filtering
 	ignoreCase: PropTypes.bool,           // whether to perform case-insensitive filtering
 	inputProps: PropTypes.object,         // custom attributes for the Input