diff --git a/assets/index.less b/assets/index.less index 78de5b9ee..bb89a9d23 100644 --- a/assets/index.less +++ b/assets/index.less @@ -68,12 +68,13 @@ &-disabled { color: #ccc; cursor: not-allowed; - pointer-events: none; } &-disabled &-selection { + cursor: not-allowed; &:hover, &:active { border-color: #d9d9d9; + box-shadow: none; } } @@ -460,4 +461,4 @@ border-width: 0 4px 5px 4px; } } -} \ No newline at end of file +} diff --git a/examples/common/disabled.js b/examples/common/disabled.js new file mode 100644 index 000000000..e69de29bb diff --git a/examples/disabled.html b/examples/disabled.html new file mode 100644 index 000000000..48cdce852 --- /dev/null +++ b/examples/disabled.html @@ -0,0 +1 @@ +placeholder diff --git a/examples/disabled.js b/examples/disabled.js new file mode 100644 index 000000000..a2ede38ab --- /dev/null +++ b/examples/disabled.js @@ -0,0 +1,86 @@ +import React from 'react'; +import Select, {Option} from 'rc-select'; +import 'rc-select/assets/index.less'; +import ReactDOM from 'react-dom'; + +const children = []; +for (let i = 10; i < 36; i++) { + children.push(); +} + +const Test = React.createClass({ + getInitialState() { + return { + destroy: false, + value: '1', + }; + }, + + onChange(e) { + let value; + if (e.target) { + value = e.target.value; + } else { + value = e; + } + this.setState({value}); + }, + + handleDestroy() { + this.setState({ + destroy: 1, + }); + }, + + render() { + if (this.state.destroy) { + return null; + } + const dropdownMenuStyle = { + maxHeight: 200, + overflow: 'auto', + }; + return ( +
+
+ +

Single Disabled Select

+ +
+ +
+ +

Multiple Disabled Select

+ +
+ +
+
+ ); + }, +}); + +ReactDOM.render(, document.getElementById('__react-content')); diff --git a/src/Select.jsx b/src/Select.jsx index c9b6436f8..1f87153dd 100644 --- a/src/Select.jsx +++ b/src/Select.jsx @@ -141,6 +141,10 @@ const Select = React.createClass({ }, onDropdownVisibleChange(open) { + const props = this.props; + if (props.disabled) { + return; + } this.setOpenState(open); }, diff --git a/tests/Select.spec.js b/tests/Select.spec.js index e864b500b..0413da30d 100644 --- a/tests/Select.spec.js +++ b/tests/Select.spec.js @@ -89,6 +89,18 @@ describe('Select', () => { expect(TestUtils.scryRenderedDOMComponentsWithClass(instance, 'rc-select-selection__clear').length).to.be(1); }); + it.only('should not response click event when select is disabled', (done) => { + instance = ReactDOM.render( + , div); + Simulate.click(ReactDOM.findDOMNode(instance.refs.selection)); + console.log(instance.state); + expect(instance.state.open).to.be(undefined); + done(); + }); + describe('when open', function test() { this.timeout(400000);