fix(select): should reset placeholder after clear (#1679)

packages/select/__tests__/select.spec.ts

@@ -1,5 +1,6 @@
 import { mount } from '@vue/test-utils'
 import { nextTick } from 'vue'
+import { EVENT_CODE } from '@element-plus/utils/aria'
 import Select from '../src/select.vue'
 import Group from '../src/option-group.vue'
 import Option from '../src/option.vue'
@@ -952,4 +953,37 @@ describe('Select', () => {
     await vm.$nextTick()
     expect(wrapper.findAll('.el-tag').length).toBe(0)
   })
+
+  test('should reset placeholder after clear when both multiple and filterable are true', async () => {
+    const placeholder = 'placeholder'
+    const wrapper = _mount(`
+    <el-select v-model="modelValue" multiple filterable placeholder=${placeholder}>
+      <el-option label="1" value="1" />
+    </el-select>`, () => ({
+      modelValue: ['1'],
+    }))
+    const vm = wrapper.vm as any
+    await vm.$nextTick()
+
+    const innerInput = wrapper.find('.el-input__inner')
+    const innerInputEl = innerInput.element as HTMLInputElement
+    expect(innerInputEl.placeholder).toBe('')
+
+    const tagCloseIcon = wrapper.find('.el-tag__close')
+    await tagCloseIcon.trigger('click')
+    expect(innerInputEl.placeholder).toBe(placeholder)
+
+    const selectInput = wrapper.find('.el-select__input')
+    const selectInputEl = selectInput.element as HTMLInputElement
+    selectInputEl.value = 'a'
+    selectInput.trigger('input')
+    await vm.$nextTick()
+    expect(innerInputEl.placeholder).toBe('')
+
+    selectInput.trigger('keydown', {
+      key: EVENT_CODE.backspace,
+    })
+    await vm.$nextTick()
+    expect(innerInputEl.placeholder).toBe(placeholder)
+  })
 })

packages/select/src/useSelect.ts

@@ -310,7 +310,7 @@ export const useSelect = (props, states: States, ctx) => {
 
   const managePlaceholder = () => {
     if (states.currentPlaceholder !== '') {
-      states.currentPlaceholder = input.value ? '' : states.cachedPlaceHolder
+      states.currentPlaceholder = input.value.value ? '' : states.cachedPlaceHolder
     }
   }
 
@@ -454,6 +454,10 @@ export const useSelect = (props, states: States, ctx) => {
       ctx.emit(UPDATE_MODEL_EVENT, value)
       emitChange(value)
     }
+
+    if (e.target.value.length === 1 && props.modelValue.length === 0) {
+      states.currentPlaceholder = states.cachedPlaceHolder
+    }
   }
 
   const deleteTag = (event, tag) => {