diff --git a/src/Select.js b/src/Select.js index f62b5353c9..6709f76bd9 100644 --- a/src/Select.js +++ b/src/Select.js @@ -812,7 +812,11 @@ class Select extends React.Component { } renderClear () { - if (!this.props.clearable || this.props.value === undefined || this.props.value === null || this.props.value === '' || this.props.multi && !this.props.value.length || this.props.disabled || this.props.isLoading) return; + const valueArray = this.getValueArray(this.props.value); + if (!this.props.clearable + || !valueArray.length + || this.props.disabled + || this.props.isLoading) return; const clear = this.props.clearRenderer(); return ( diff --git a/test/Select-test.js b/test/Select-test.js index 6254f15710..37f7acb1c5 100644 --- a/test/Select-test.js +++ b/test/Select-test.js @@ -1938,6 +1938,17 @@ describe('Select', () => { TestUtils.Simulate.mouseDown(ReactDOM.findDOMNode(instance).querySelector('.Select-clear'), { button: 0 }); expect(onChange, 'was called with', []); }); + describe('if supplied with an invalid starting value', () => { + it('should not render the clear componnet', () => { + wrapper = createControlWithWrapper({ + options: options, + value: 'nonsense, someothernonsense', + multi: true, + clearable: true, + }); + expect(ReactDOM.findDOMNode(instance), 'to contain no elements matching', '.Select-clear'); + }); + }); }); describe('with multi=true and searchable=false', () => { @@ -2069,6 +2080,16 @@ describe('Select', () => { 'to have items satisfying', 'to have text', 'Three'); }); + describe('if supplied with an invalid starting value', () => { + it('should not render the clear componnet', () => { + wrapper = createControlWithWrapper({ + options: defaultOptions, + value: 'nonsense', + clearable: true, + }); + expect(ReactDOM.findDOMNode(instance), 'to contain no elements matching', '.Select-clear'); + }); + }); describe('on pressing escape', () => { @@ -4070,4 +4091,6 @@ describe('Select', () => { }); }); }); + + });