diff --git a/packages/components/select/__tests__/select.test.ts b/packages/components/select/__tests__/select.test.ts index 3f9fe7c7c3..a43b077e80 100644 --- a/packages/components/select/__tests__/select.test.ts +++ b/packages/components/select/__tests__/select.test.ts @@ -2975,6 +2975,70 @@ describe('Select', () => { vi.useRealTimers() }) + + // fix: 11930 + it('should work when options changed', async () => { + vi.useFakeTimers() + + const wrapper = _mount( + ` + + + + `, + () => ({ + value: '', + options: [ + { + value: 'a', + label: 'a', + }, + ], + }), + { + methods: { + remoteMethod() { + setTimeout(() => { + this.options = [ + { + value: 0, + label: 0, + }, + ] + }, 200) + }, + }, + } + ) + + const select = wrapper.findComponent({ name: 'ElSelect' }) + const selectVm = select.vm as any + const input = wrapper.find('input') + input.element.focus() + + vi.runAllTimers() + await nextTick() + let options = getOptions() + expect(hasClass(options[0], 'is-hovering')).toBeTruthy() + + selectVm.onInput({ + target: { + value: '0', + }, + }) + + vi.runAllTimers() + await nextTick() + options = getOptions() + expect(hasClass(options[0], 'is-hovering')).toBeTruthy() + + vi.useRealTimers() + }) }) it('should keep the selected label after filtering options', async () => { diff --git a/packages/components/select/src/useSelect.ts b/packages/components/select/src/useSelect.ts index b0b74bf393..328445d795 100644 --- a/packages/components/select/src/useSelect.ts +++ b/packages/components/select/src/useSelect.ts @@ -406,19 +406,16 @@ export const useSelect: useSelectType = (props: ISelectProps, emit) => { } ) - watch( - () => states.hoveringIndex, - (val) => { - if (isNumber(val) && val > -1) { - hoverOption.value = optionsArray.value[val] || {} - } else { - hoverOption.value = {} - } - optionsArray.value.forEach((option) => { - option.hover = hoverOption.value === option - }) + watch([() => states.hoveringIndex, optionsArray], ([val]) => { + if (isNumber(val) && val > -1) { + hoverOption.value = optionsArray.value[val] || {} + } else { + hoverOption.value = {} } - ) + optionsArray.value.forEach((option) => { + option.hover = hoverOption.value === option + }) + }) watchEffect(() => { // Anything could cause options changed, then update options