Merge pull request #36 from Alex1990/master

Fix the bug the Select's scrollbar flashes repeatedly

diff --git a/assets/index/Select.less b/assets/index/Select.less
index 13b5b187418cb53ebf11e9bfd186c8ebd1389ad4..8bec4a079b13142fcb7ca313dbddea999e97de0c 100644 (file)
--- a/assets/index/Select.less
+++ b/assets/index/Select.less
@@ -9,7 +9,7 @@
   overflow: hidden;
   position: relative; // Fix chrome weird render bug
 
-  &:hover {
+  &-active {
     overflow-y: auto;
   }
 

diff --git a/src/Select.jsx b/src/Select.jsx
index 5733b1a235b9348f94c5f7fac1b3f9c4109fba71..deb155ddbae5c7884c4efe6cd63c5076c415b5cd 100644 (file)
--- a/src/Select.jsx
+++ b/src/Select.jsx
@@ -32,6 +32,12 @@ const Select = React.createClass({
     onMouseEnter: PropTypes.func,
   },
 
+  getInitialState() {
+    return {
+      active: false,
+    };
+  },
+
   componentDidMount() {
     // jump to selected option
     this.scrollToSelected(0);
@@ -87,17 +93,31 @@ const Select = React.createClass({
     scrollTo(select, to, duration);
   },
 
+  handleMouseEnter(e) {
+    this.setState({ active: true });
+    this.props.onMouseEnter(e);
+  },
+
+  handleMouseLeave() {
+    this.setState({ active: false });
+  },
+
   render() {
     if (this.props.options.length === 0) {
       return null;
     }
 
     const { prefixCls } = this.props;
+    const cls = classnames({
+      [`${prefixCls}-select`]: 1,
+      [`${prefixCls}-select-active`]: this.state.active,
+    });
 
     return (
       <div
-        className={`${prefixCls}-select`}
-        onMouseEnter={this.props.onMouseEnter}
+        className={cls}
+        onMouseEnter={this.handleMouseEnter}
+        onMouseLeave={this.handleMouseLeave}
       >
         <ul ref="list">{this.getOptions()}</ul>
       </div>

diff --git a/tests/Select.spec.jsx b/tests/Select.spec.jsx
index fd2ec326800dfb80d65058e99b8b571ee03d6529..2d300987fe2175c60ecfbae6ea642a6f7d53ccb9 100644 (file)
--- a/tests/Select.spec.jsx
+++ b/tests/Select.spec.jsx
@@ -33,6 +33,34 @@ describe('Select', () => {
     document.body.removeChild(container);
   });
 
+  describe('select panel', () => {
+    it('select panel reacts to mouseenter and mouseleave correctly', (done) => {
+      const picker = renderPicker();
+      const input = TestUtils.scryRenderedDOMComponentsWithClass(picker,
+        'rc-time-picker-input')[0];
+      async.series([(next) => {
+        Simulate.click(input);
+        setTimeout(next, 100);
+      }, (next) => {
+        const re = /(^|\s+)rc-time-picker-panel-select-active(\s+|$)/;
+        const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance,
+          'rc-time-picker-panel-select')[0];
+
+        expect(re.test(selector.className)).to.be(false);
+
+        Simulate.mouseEnter(selector);
+        expect(re.test(selector.className)).to.be(true);
+
+        Simulate.mouseLeave(selector);
+        expect(re.test(selector.className)).to.be(false);
+
+        next();
+      }], () => {
+        done();
+      });
+    });
+  });
+
   describe('select number', () => {
     it('select number correctly', (done) => {
       const picker = renderPicker();