diff --git a/packages/components/select-v2/__tests__/select.test.ts b/packages/components/select-v2/__tests__/select.test.ts index 6c682b39ac..4f949bf6ae 100644 --- a/packages/components/select-v2/__tests__/select.test.ts +++ b/packages/components/select-v2/__tests__/select.test.ts @@ -2614,4 +2614,44 @@ describe('Select', () => { await input.trigger('click') expect(selectVm.states.hoveringIndex).toBe(1) }) + + it('should trigger visible-change when dropdownMenuVisible changes', async () => { + const states = ['Alabama', 'Alaska'] + const list = states.map((item): ListItem => { + return { value: `value:${item}`, label: `label:${item}` } + }) + const options = ref([]) + const handleVisibleChange = vi.fn() + const remoteMethod = (query: string) => { + if (query !== '') { + options.value = list.filter((item) => { + return item.label.toLowerCase().includes(query.toLowerCase()) + }) + } else { + options.value = [] + } + } + const wrapper = createSelect({ + data() { + return { + filterable: true, + remote: true, + options, + value: [], + } + }, + methods: { + remoteMethod, + onVisibleChange: handleVisibleChange, + }, + }) + + const input = wrapper.find('input') + await input.trigger('click') + expect(handleVisibleChange).not.toHaveBeenCalled() + await input.setValue('label:Alabama') + expect(handleVisibleChange).toHaveBeenCalledTimes(1) + await input.trigger('blur') + expect(handleVisibleChange).toHaveBeenCalledTimes(2) + }) }) diff --git a/packages/components/select-v2/src/useSelect.ts b/packages/components/select-v2/src/useSelect.ts index 0886a3e808..2fc79599b0 100644 --- a/packages/components/select-v2/src/useSelect.ts +++ b/packages/components/select-v2/src/useSelect.ts @@ -893,7 +893,6 @@ const useSelect = (props: SelectV2Props, emit: SelectV2EmitFn) => { states.isBeforeHide = true createNewOption('') } - emit('visible-change', val) }) watch( @@ -990,6 +989,7 @@ const useSelect = (props: SelectV2Props, emit: SelectV2EmitFn) => { stop?.() stop = undefined } + emit('visible-change', newVal) } ) diff --git a/packages/components/select/__tests__/select.test.ts b/packages/components/select/__tests__/select.test.ts index 0b26aa324c..9873865992 100644 --- a/packages/components/select/__tests__/select.test.ts +++ b/packages/components/select/__tests__/select.test.ts @@ -4117,6 +4117,7 @@ describe('Select', () => { wrapper.unmount() }) + test('limitReached: hovering via DOM event should not update index nor add class', async () => { wrapper = _mount( ` @@ -4147,4 +4148,64 @@ describe('Select', () => { expect(selectVm.states.hoveringIndex).toBe(0) expect(Array.from(optionEls[1].classList)).not.toContain('is-hovering') }) + + test('should trigger visible-change when dropdownMenuVisible changes', async () => { + const handleVisibleChange = vi.fn() + wrapper = mount({ + template: ` + + + `, + components: { ElSelect: Select, ElOption: Option }, + data() { + return { + options: [], + value: [], + list: [], + loading: false, + states: ['Alabama', 'Alaska'], + handleVisibleChange, + } + }, + mounted() { + this.list = this.states.map((item) => { + return { value: `value:${item}`, label: `label:${item}` } + }) + }, + methods: { + remoteMethod(query) { + if (query !== '') { + this.loading = true + setTimeout(() => { + this.loading = false + this.options = this.list.filter((item) => { + return item.label.toLowerCase().includes(query.toLowerCase()) + }) + }, 200) + } else { + this.options = [] + } + }, + }, + }) + + const input = wrapper.find('input') + await input.trigger('click') + expect(handleVisibleChange).not.toHaveBeenCalled() + await input.setValue('label:Alabama') + expect(handleVisibleChange).toHaveBeenCalledTimes(1) + await input.trigger('blur') + expect(handleVisibleChange).toHaveBeenCalledTimes(2) + }) }) diff --git a/packages/components/select/src/useSelect.ts b/packages/components/select/src/useSelect.ts index 848162e09f..f951605475 100644 --- a/packages/components/select/src/useSelect.ts +++ b/packages/components/select/src/useSelect.ts @@ -309,7 +309,6 @@ export const useSelect = (props: SelectProps, emit: SelectEmits) => { states.previousQuery = null states.isBeforeHide = true } - emit('visible-change', val) } ) @@ -902,6 +901,7 @@ export const useSelect = (props: SelectProps, emit: SelectEmits) => { stop?.() stop = undefined } + emit('visible-change', newVal) } )