diff --git a/packages/select/__tests__/select.spec.ts b/packages/select/__tests__/select.spec.ts index bddfba8c20..2431b86fd4 100644 --- a/packages/select/__tests__/select.spec.ts +++ b/packages/select/__tests__/select.spec.ts @@ -987,37 +987,39 @@ describe('Select', () => { expect(innerInputEl.placeholder).toBe(placeholder) }) + describe('should show all options when open select dropdown', () => { + async function testShowOptions({ filterable, multiple }: SelectProps = {}) { + const wrapper = getSelectVm({ filterable, multiple }) + const options = wrapper.findAllComponents({ name: 'ElOption' }) + + await wrapper.find('.select-trigger').trigger('click') + expect(options.every(option => option.vm.visible)).toBe(true) + + await options[1].trigger('click') + await wrapper.find('.select-trigger').trigger('click') + expect(options.every(option => option.vm.visible)).toBe(true) + } + + test('both filterable and multiple are false', async () => { + await testShowOptions() + }) + + test('filterable is true and multiple is false', async () => { + await testShowOptions({ filterable: true }) + }) + + test('filterable is false and multiple is true', async () => { + await testShowOptions({ multiple: true }) + }) + + test('both filterable and multiple are true', async () => { + await testShowOptions({ filterable: true, multiple: true }) + }) + }) + 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, - })) + async function testAfterSearch({ multiple, filterMethod, remote, remoteMethod }: SelectProps) { + const wrapper = getSelectVm({ filterable: true, multiple, filterMethod, remote, remoteMethod }) const method = remote ? remoteMethod : filterMethod const firstInputLetter = 'a' const secondInputLetter = 'aa' diff --git a/packages/select/src/useSelect.ts b/packages/select/src/useSelect.ts index efb3bcd66b..fc7f551b3d 100644 --- a/packages/select/src/useSelect.ts +++ b/packages/select/src/useSelect.ts @@ -207,12 +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') - } } handleQueryChange(states.query) + if (!props.multiple && !props.remote) { + states.selectEmitter.emit('elOptionQueryChange', '') + states.selectEmitter.emit('elOptionGroupQueryChange') + } } } ctx.emit('visible-change', val)