From a76ecd232c63c0463c1724997967216817e3429f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=85=89=E5=BC=98?= <guanghong.wsj@alibaba-inc.com>
Date: Thu, 26 May 2016 10:09:40 +0800
Subject: [PATCH] fix issue #83

---
 assets/index.less |  6 ++++++
 src/Select.jsx    | 13 ++++++++++++-
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/assets/index.less b/assets/index.less
index 21fc7a3a3..a3d669c7a 100644
--- a/assets/index.less
+++ b/assets/index.less
@@ -167,6 +167,12 @@
         display: none;
       }
     }
+    .@{selectPrefixCls}-search__field__mirror {
+      position: absolute;
+      top: -999px;
+      left: 0; 
+      white-space: pre;
+    }
     > i {
       float: right;
     }
diff --git a/src/Select.jsx b/src/Select.jsx
index f355f2b68..c9642ac24 100644
--- a/src/Select.jsx
+++ b/src/Select.jsx
@@ -98,6 +98,7 @@ const Select = React.createClass({
       inputValue = value.length ? String(value[0].key) : '';
     }
     this.saveInputRef = saveRef.bind(this, 'inputInstance');
+    this.saveInputMirrorRef = saveRef.bind(this, 'inputMirrorInstance');
     let open = props.open;
     if (open === undefined) {
       open = props.defaultOpen;
@@ -128,9 +129,10 @@ const Select = React.createClass({
     const { state, props } = this;
     if (state.open && isMultipleOrTags(props)) {
       const inputNode = this.getInputDOMNode();
+      const mirrorNode = this.getInputMirrorDOMNode();
       if (inputNode.value) {
         inputNode.style.width = '';
-        inputNode.style.width = `${inputNode.scrollWidth}px`;
+        inputNode.style.width = `${mirrorNode.clientWidth}px`;
       } else {
         inputNode.style.width = '';
       }
@@ -433,6 +435,11 @@ const Select = React.createClass({
         disabled={props.disabled}
         className={`${props.prefixCls}-search__field`}
       />
+      <span ref={this.saveInputMirrorRef}
+        className={`${props.prefixCls}-search__field__mirror`}
+      >
+        {this.state.inputValue}
+      </span>
     </div>);
   },
 
@@ -440,6 +447,10 @@ const Select = React.createClass({
     return this.inputInstance;
   },
 
+  getInputMirrorDOMNode() {
+    return this.inputMirrorInstance;
+  },
+
   getPopupDOMNode() {
     return this.refs.trigger.getPopupDOMNode();
   },