From e0333136085426ff4a06851c7c2a1262ecec7220 Mon Sep 17 00:00:00 2001
From: Leopoldthecoder <Leopoldthecuber@gmail.com>
Date: Thu, 23 Nov 2017 11:08:39 +0800
Subject: [PATCH] Select: fix filter input display in multiple mode

---
 examples/docs/en-US/select.md        | 3 ++-
 examples/docs/zh-CN/select.md        | 3 ++-
 packages/select/src/select.vue       | 8 +++++---
 packages/theme-chalk/src/select.scss | 2 +-
 4 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/examples/docs/en-US/select.md b/examples/docs/en-US/select.md
index abff1c601..6185ea5a6 100644
--- a/examples/docs/en-US/select.md
+++ b/examples/docs/en-US/select.md
@@ -368,7 +368,8 @@ Multiple select uses tags to display selected options.
           value: 'Option5',
           label: 'Option5'
         }],
-        value5: []
+        value5: [],
+        value11: []
       }
     }
   }
diff --git a/examples/docs/zh-CN/select.md b/examples/docs/zh-CN/select.md
index d2492ef01..fa387fb3c 100644
--- a/examples/docs/zh-CN/select.md
+++ b/examples/docs/zh-CN/select.md
@@ -367,7 +367,8 @@
           value: '选项5',
           label: '北京烤鸭'
         }],
-        value5: []
+        value5: [],
+        value11: []
       }
     }
   }
diff --git a/packages/select/src/select.vue b/packages/select/src/select.vue
index 464e6f229..a7f86252d 100644
--- a/packages/select/src/select.vue
+++ b/packages/select/src/select.vue
@@ -11,6 +11,7 @@
       :style="{ 'max-width': inputWidth - 32 + 'px' }">
       <span
         class="el-select__multiple-text"
+        v-show="multipleText"
         v-if="collapseTags">
         {{ multipleText }}
       </span>
@@ -65,8 +66,8 @@
       @blur="handleBlur"
       @mousedown.native="handleMouseDown"
       @keyup.native="debouncedOnInputChange"
-      @keydown.native.down.prevent="navigateOptions('next')"
-      @keydown.native.up.prevent="navigateOptions('prev')"
+      @keydown.native.down.stop.prevent="navigateOptions('next')"
+      @keydown.native.up.stop.prevent="navigateOptions('prev')"
       @keydown.native.enter.prevent="selectOption"
       @keydown.native.esc.stop.prevent="visible = false"
       @keydown.native.tab="visible = false"
@@ -375,7 +376,8 @@
         });
         this.hoverIndex = -1;
         if (this.multiple && this.filterable) {
-          this.inputLength = this.$refs.input.value.length * 15 + 20;
+          const length = this.$refs.input.value.length * 15 + 20;
+          this.inputLength = this.collapseTags ? Math.min(50, length) : length;
           this.managePlaceholder();
           this.resetInputHeight();
         }
diff --git a/packages/theme-chalk/src/select.scss b/packages/theme-chalk/src/select.scss
index a585a7dad..32c7320db 100644
--- a/packages/theme-chalk/src/select.scss
+++ b/packages/theme-chalk/src/select.scss
@@ -93,7 +93,7 @@
     margin-left: 15px;
     color: $--input-color;
     font-size: $--font-size-base;
-    display: block;
+    display: inline;
     @include utils-ellipsis;
   }