fix issue #83

react-component · May 26, 2016 · a76ecd2 · a76ecd2
1 parent b29beda
commit a76ecd2
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 1 deletion.
diff --git 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
@@ -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,13 +435,22 @@ 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>);
   },
 
   getInputDOMNode() {
     return this.inputInstance;
   },
 
+  getInputMirrorDOMNode() {
+    return this.inputMirrorInstance;
+  },
+
   getPopupDOMNode() {
     return this.refs.trigger.getPopupDOMNode();
   },