From b91e8ee3a35d1a63a73baf248cc315e865f0e3e9 Mon Sep 17 00:00:00 2001
From: Lukasz Balcerzak <lukaszbalcerzak@gmail.com>
Date: Mon, 8 Jan 2018 05:27:54 +0100
Subject: [PATCH] Select: reset input height when filterable and collapse tags
 (#8966)

* Added example that exposes the issue

* Fixed issue if select component has collapse tags and filtering enabled at the same time

* tests

* simpler tests
---
 examples/docs/en-US/select.md  | 16 ++++++++++++++++
 packages/select/src/select.vue |  2 +-
 test/unit/specs/select.spec.js | 33 ++++++++++++++++++++++++++++++++-
 3 files changed, 49 insertions(+), 2 deletions(-)

diff --git a/examples/docs/en-US/select.md b/examples/docs/en-US/select.md
index 3ede1c06d..fdc0e2f9e 100644
--- a/examples/docs/en-US/select.md
+++ b/examples/docs/en-US/select.md
@@ -102,6 +102,7 @@
         value9: [],
         value10: [],
         value11: [],
+        value12: [],
         loading: false,
         states: ["Alabama", "Alaska", "Arizona", "Arkansas", "California", "Colorado", "Connecticut", "Delaware", "Florida", "Georgia", "Hawaii", "Idaho", "Illinois", "Indiana", "Iowa", "Kansas", "Kentucky", "Louisiana", "Maine", "Maryland", "Massachusetts", "Michigan", "Minnesota", "Mississippi", "Missouri", "Montana", "Nebraska", "Nevada", "New Hampshire", "New Jersey", "New Mexico", "New York", "North Carolina", "North Dakota", "Ohio", "Oklahoma", "Oregon", "Pennsylvania", "Rhode Island", "South Carolina", "South Dakota", "Tennessee", "Texas", "Utah", "Vermont", "Virginia", "Washington", "West Virginia", "Wisconsin", "Wyoming"]
       };
@@ -346,6 +347,21 @@ Multiple select uses tags to display selected options.
       :value="item.value">
     </el-option>
   </el-select>
+  
+  <el-select
+    v-model="value12"
+    multiple
+    filterable
+    collapse-tags
+    style="margin-left: 20px; width: 200px"
+    placeholder="Select">
+    <el-option
+      v-for="item in options"
+      :key="item.value"
+      :label="item.label"
+      :value="item.value">
+    </el-option>
+  </el-select>
 </template>
 
 <script>
diff --git a/packages/select/src/select.vue b/packages/select/src/select.vue
index f3eec46eb..629b22b2e 100644
--- a/packages/select/src/select.vue
+++ b/packages/select/src/select.vue
@@ -564,7 +564,7 @@
       },
 
       resetInputHeight() {
-        if (this.collapseTags) return;
+        if (this.collapseTags && !this.filterable) return;
         this.$nextTick(() => {
           if (!this.$refs.reference) return;
           let inputChildNodes = this.$refs.reference.$el.childNodes;
diff --git a/test/unit/specs/select.spec.js b/test/unit/specs/select.spec.js
index 8d1aaf2f8..895bd9112 100644
--- a/test/unit/specs/select.spec.js
+++ b/test/unit/specs/select.spec.js
@@ -3,7 +3,7 @@ import Select from 'packages/select';
 
 describe('Select', () => {
   const getSelectVm = (configs = {}, options) => {
-    ['multiple', 'clearable', 'filterable', 'allowCreate', 'remote'].forEach(config => {
+    ['multiple', 'clearable', 'filterable', 'allowCreate', 'remote', 'collapseTags'].forEach(config => {
       configs[config] = configs[config] || false;
     });
     configs.multipleLimit = configs.multipleLimit || 0;
@@ -34,12 +34,14 @@ describe('Select', () => {
       template: `
         <div>
           <el-select
+            ref="select"
             v-model="value"
             :multiple="multiple"
             :multiple-limit="multipleLimit"
             :popper-class="popperClass"
             :clearable="clearable"
             :filterable="filterable"
+            :collapse-tags="collapseTags"
             :allow-create="allowCreate"
             :filterMethod="filterMethod"
             :remote="remote"
@@ -63,6 +65,7 @@ describe('Select', () => {
           multipleLimit: configs.multipleLimit,
           clearable: configs.clearable,
           filterable: configs.filterable,
+          collapseTags: configs.collapseTags,
           allowCreate: configs.allowCreate,
           popperClass: configs.popperClass,
           loading: false,
@@ -713,4 +716,32 @@ describe('Select', () => {
       }, 10);
     }, 10);
   });
+
+  describe('resetInputHeight', () => {
+    const getSelectComponentVm = (configs) => {
+      vm = getSelectVm(configs || {});
+      return vm.$refs.select;
+    };
+
+    it('should reset height if collapse-tags option is disabled', () => {
+      const select = getSelectComponentVm();
+      sinon.stub(select, '$nextTick');
+      select.resetInputHeight();
+      expect(select.$nextTick.callCount).to.equal(1);
+    });
+
+    it('should not reset height if collapse-tags option is enabled', () => {
+      const select = getSelectComponentVm({ collapseTags: true });
+      sinon.stub(select, '$nextTick');
+      select.resetInputHeight();
+      expect(select.$nextTick.callCount).to.equal(0);
+    });
+
+    it('should reset height if both collapse-tags and filterable are enabled', () => {
+      const select = getSelectComponentVm({ collapseTags: true, filterable: true });
+      sinon.stub(select, '$nextTick');
+      select.resetInputHeight();
+      expect(select.$nextTick.callCount).to.equal(1);
+    });
+  });
 });