diff --git a/packages/select/__tests__/select.spec.ts b/packages/select/__tests__/select.spec.ts index 8b52c3c90b..bddfba8c20 100644 --- a/packages/select/__tests__/select.spec.ts +++ b/packages/select/__tests__/select.spec.ts @@ -986,4 +986,77 @@ describe('Select', () => { await vm.$nextTick() expect(innerInputEl.placeholder).toBe(placeholder) }) + + describe('after search', () => { + async function testAfterSearch({ multiple, filterMethod, remote, remoteMethod }) { + const wrapper = _mount(` + + + + `, () => ({ + modelValue: multiple ? [1] : 1, + options: [ + { label: 'Test 1', value: 1 }, + { label: 'Test 2', value: 2 }, + { label: 'Test 3', value: 3 }, + { label: 'Test 4', value: 4 }, + ], + multiple, + filterMethod, + remote, + remoteMethod, + })) + const method = remote ? remoteMethod : filterMethod + const firstInputLetter = 'a' + const secondInputLetter = 'aa' + + const vm = wrapper.vm as any + await vm.$nextTick() + + const input = wrapper.find(multiple ? '.el-select__input' : '.el-input__inner') + const inputEl = input.element as HTMLInputElement + await input.trigger('click') + inputEl.value = firstInputLetter + await input.trigger('input') + expect(method).toBeCalled() + expect(method.mock.calls[0][0]).toBe(firstInputLetter) + + inputEl.value = secondInputLetter + await input.trigger('input') + expect(method).toBeCalledTimes(2) + expect(method.mock.calls[1][0]).toBe(secondInputLetter) + } + + test('should call filter method', async () => { + const filterMethod = jest.fn() + await testAfterSearch({ filterMethod }) + }) + + test('should call filter method in multiple mode', async () => { + const filterMethod = jest.fn() + await testAfterSearch({ multiple: true, filterMethod }) + }) + + test('should call remote method', async () => { + const remoteMethod = jest.fn() + await testAfterSearch({ remote: true, remoteMethod }) + }) + + test('should call remote method in multiple mode', async () => { + const remoteMethod = jest.fn() + await testAfterSearch({ multiple: true, remote: true, remoteMethod }) + }) + }) }) diff --git a/packages/select/src/useSelect.ts b/packages/select/src/useSelect.ts index 2df3b1f66f..efb3bcd66b 100644 --- a/packages/select/src/useSelect.ts +++ b/packages/select/src/useSelect.ts @@ -207,13 +207,12 @@ export const useSelect = (props, states: States, ctx) => { states.currentPlaceholder = states.selectedLabel states.selectedLabel = '' } + if (!props.remote) { + states.selectEmitter.emit('elOptionQueryChange', '') + states.selectEmitter.emit('elOptionGroupQueryChange') + } } - if (!props.multiple && !props.remote) { - states.selectEmitter.emit('elOptionQueryChange', '') - states.selectEmitter.emit('elOptionGroupQueryChange') - } else { - handleQueryChange(states.query) - } + handleQueryChange(states.query) } } ctx.emit('visible-change', val)