diff --git a/src/Select.js b/src/Select.js index 578766eb42..bfeefc7554 100644 --- a/src/Select.js +++ b/src/Select.js @@ -823,69 +823,69 @@ const Select = React.createClass({ }, renderInput (valueArray, focusedOptionIndex) { - if (this.props.inputRenderer) { - return this.props.inputRenderer(); - } else { - var className = classNames('Select-input', this.props.inputProps.className); - const isOpen = !!this.state.isOpen; - - const ariaOwns = classNames({ - [this._instancePrefix + '-list']: isOpen, - [this._instancePrefix + '-backspace-remove-message']: this.props.multi - && !this.props.disabled - && this.state.isFocused - && !this.state.inputValue - }); + var className = classNames('Select-input', this.props.inputProps.className); + const isOpen = !!this.state.isOpen; + + const ariaOwns = classNames({ + [this._instancePrefix + '-list']: isOpen, + [this._instancePrefix + '-backspace-remove-message']: this.props.multi + && !this.props.disabled + && this.state.isFocused + && !this.state.inputValue + }); - // TODO: Check how this project includes Object.assign() - const inputProps = Object.assign({}, 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-labelledby': this.props['aria-labelledby'], - 'aria-label': this.props['aria-label'], - className: className, - tabIndex: this.props.tabIndex, - onBlur: this.handleInputBlur, - onChange: this.handleInputChange, - onFocus: this.handleInputFocus, - ref: ref => this.input = ref, - required: this.state.required, - value: this.state.inputValue - }); + // TODO: Check how this project includes Object.assign() + const inputProps = Object.assign({}, 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-labelledby': this.props['aria-labelledby'], + 'aria-label': this.props['aria-label'], + className: className, + tabIndex: this.props.tabIndex, + onBlur: this.handleInputBlur, + onChange: this.handleInputChange, + onFocus: this.handleInputFocus, + ref: ref => this.input = ref, + required: this.state.required, + value: this.state.inputValue + }); - if (this.props.disabled || !this.props.searchable) { - const { inputClassName, ...divProps } = this.props.inputProps; - return ( -
this.input = ref} - aria-readonly={'' + !!this.props.disabled} - style={{ border: 0, width: 1, display:'inline-block' }}/> - ); - } + if (this.props.inputRenderer) { + return this.props.inputRenderer(inputProps); + } - if (this.props.autosize) { - return ( - - ); - } + if (this.props.disabled || !this.props.searchable) { + const { inputClassName, ...divProps } = this.props.inputProps; return ( -
- -
+
this.input = ref} + aria-readonly={'' + !!this.props.disabled} + style={{ border: 0, width: 1, display:'inline-block' }}/> ); } + + if (this.props.autosize) { + return ( + + ); + } + return ( +
+ +
+ ); }, renderClear () { diff --git a/test/Select-test.js b/test/Select-test.js index fe3c6d2706..3b43d12238 100644 --- a/test/Select-test.js +++ b/test/Select-test.js @@ -3061,6 +3061,40 @@ describe('Select', () => { }); }); + describe('inputRenderer', () => { + + var inputRenderer; + + beforeEach(() => { + + inputRenderer = (inputProps) => { + return ( + + ); + }; + + inputRenderer = sinon.spy(inputRenderer); + + instance = createControl({ + options: defaultOptions, + inputRenderer: inputRenderer + }); + }); + + it('renders the options using the inputRenderer', () => { + var input = ReactDOM.findDOMNode(instance).querySelector('#custom-input'); + expect(input, 'not to equal', undefined); + }); + + it('calls the renderer exactly once', () => { + expect(inputRenderer, 'was called times', 1); + }); + + it('calls the renderer with props', () => { + expect(inputRenderer, 'was called with', { value: '', className: 'Select-input' }); + }); + }); + describe('optionRenderer', () => { var optionRenderer;