From d093074a00881b60b3440a35503f0143612143a0 Mon Sep 17 00:00:00 2001
From: caojunchao <caojunchao@didichuxing.com>
Date: Thu, 9 Mar 2017 13:38:54 +0800
Subject: [PATCH] Fix the bug the Select's scrollbar flashes repeatedly in
 Chrome/macOS when always show scroll bars

---
 assets/index/Select.less |  2 +-
 src/Select.jsx           | 24 ++++++++++++++++++++++--
 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>
-- 
2.41.0