diff --git a/src/Select.js b/src/Select.js index 3fa455acb9..9e1c045fb1 100644 --- a/src/Select.js +++ b/src/Select.js @@ -834,7 +834,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 e834b4c15b..d0c83768a7 100644 --- a/test/Select-test.js +++ b/test/Select-test.js @@ -1950,6 +1950,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', () => { @@ -2185,6 +2196,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', () => { @@ -4224,4 +4245,6 @@ describe('Select', () => { }); }); }); + + });