Select: set placeholder to label of option selected when filterable is true (#14989)

packages/select/src/select.vue

@@ -394,6 +394,10 @@
               }
               if (this.filterable) this.query = this.selectedLabel;
             }
+
+            if (this.filterable) {
+              this.currentPlaceholder = this.cachedPlaceHolder;
+            }
           }
         } else {
           this.broadcast('ElSelectDropdown', 'updatePopper');
@@ -407,7 +411,11 @@
                 this.broadcast('ElOption', 'queryChange', '');
                 this.broadcast('ElOptionGroup', 'queryChange');
               }
-              this.broadcast('ElInput', 'inputSelect');
+
+              if (this.selectedLabel) {
+                this.currentPlaceholder = this.selectedLabel;
+                this.selectedLabel = '';
+              }
             }
           }
         }

test/unit/specs/select.spec.js

@@ -1,4 +1,4 @@
-import { createTest, createVue, triggerEvent, destroyVM } from '../util';
+import { createTest, createVue, triggerEvent, destroyVM, waitImmediate } from '../util';
 import Select from 'packages/select';
 
 describe('Select', () => {
@@ -821,6 +821,28 @@ describe('Select', () => {
     done();
   });
 
+  it('should set placeholder to label of selected option when filterable is true and multiple is false', async() => {
+    vm = createVue({
+      template: `
+        <div>
+          <el-select ref="select" v-model="value" filterable>
+            <el-option label="test" value="test" />
+          </el-select>
+        </div>
+      `,
+      data() {
+        return {
+          value: 'test'
+        };
+      }
+    });
+    vm.$refs.select.$el.click();
+    await waitImmediate();
+    expect(vm.$refs.select.visible).to.be.equal(true);
+    expect(vm.$el.querySelector('.el-input__inner').placeholder).to.be.equal('test');
+    expect(vm.value).to.be.equal('test');
+  });
+
   describe('resetInputHeight', () => {
     const getSelectComponentVm = (configs) => {
       vm = getSelectVm(configs || {});