Fix the bug the Select's scrollbar flashes repeatedly in Chrome/macOS when always show scroll bars

2 files changed, 23 insertions, 3 deletions

diff --git a/assets/index/Select.less b/assets/index/Select.less
index 13b5b18..8bec4a0 100644
--- 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 5733b1a..deb155d 100644
--- 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>