fix disabled prop, close #34

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;
     }
   }
-}
+}

examples/disabled.html

@@ -0,0 +1 @@
+placeholder

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(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>);
+}
+
+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 (
+      <div style={{margin: 20}}>
+        <div style={{height: 150}}/>
+
+        <h2>Single Disabled Select</h2>
+
+        <div style={{width: 300}}>
+          <Select disabled
+                  value={this.state.value}
+                  dropdownMenuStyle={{maxHeight: 200, overflow: 'auto'}}
+                  style={{width: 500}}
+                  onChange={this.onChange}>
+            <Option value="jack">
+              <b style={{
+                color: 'red',
+              }}>jack</b>
+            </Option>
+            <Option value="lucy">lucy</Option>
+            <Option value="disabled" disabled>disabled</Option>
+            <Option value="yiminghe">yiminghe</Option>
+            {[1, 2, 3, 4, 5, 6, 7, 8, 9].map((i) => {
+              return <Option key={i + ''}>{i + ''}</Option>;
+            })}
+          </Select>
+        </div>
+
+        <h2>Multiple Disabled Select</h2>
+
+        <div style={{width: 300}}>
+          <Select disabled
+            animation={this.state.useAnim ? 'slide-up' : null}
+            dropdownMenuStyle={dropdownMenuStyle}
+            style={{width: 500}}
+            multiple
+            defaultValue={['name2', 'name3']}>
+            {children}
+          </Select>
+        </div>
+      </div>
+    );
+  },
+});
+
+ReactDOM.render(<Test />, document.getElementById('__react-content'));

src/Select.jsx

@@ -141,6 +141,10 @@ const Select = React.createClass({
   },
 
   onDropdownVisibleChange(open) {
+    const props = this.props;
+    if (props.disabled) {
+      return;
+    }
     this.setOpenState(open);
   },
 

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(
+      <Select disabled defaultValue="2">
+        <Option value="1">1</Option>
+        <Option value="2">2</Option>
+      </Select>, 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);