diff --git a/packages/select/__tests__/select.spec.ts b/packages/select/__tests__/select.spec.ts index 738d86323c..8b52c3c90b 100644 --- a/packages/select/__tests__/select.spec.ts +++ b/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(` + + + `, () => ({ + 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) + }) }) diff --git a/packages/select/src/useSelect.ts b/packages/select/src/useSelect.ts index 174e83bd97..d1566e86af 100644 --- a/packages/select/src/useSelect.ts +++ b/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) => {