diff --git a/packages/components/date-picker/__tests__/date-picker.test.ts b/packages/components/date-picker/__tests__/date-picker.test.ts index 5100595224..f0d1553b9a 100644 --- a/packages/components/date-picker/__tests__/date-picker.test.ts +++ b/packages/components/date-picker/__tests__/date-picker.test.ts @@ -220,10 +220,11 @@ describe('DatePicker', () => { expect(vm.value.getDate()).toBe(1) }) - it('event change, focus, blur', async () => { + it('event change, focus, blur, keydown', async () => { const changeHandler = vi.fn() const focusHandler = vi.fn() const blurHandler = vi.fn() + const keydownHandler = vi.fn() let onChangeValue: Date | undefined const wrapper = _mount( ` { @change="onChange" @focus="onFocus" @blur="onBlur" + @keydown="onKeydown" />`, () => ({ value: new Date(2016, 9, 10, 18, 40) }), { @@ -245,6 +247,9 @@ describe('DatePicker', () => { onBlur(e) { return blurHandler(e) }, + onKeydown(e) { + return keydownHandler(e) + }, }, } ) @@ -252,10 +257,12 @@ describe('DatePicker', () => { const input = wrapper.find('input') input.trigger('focus') input.trigger('blur') + input.trigger('keydown') await nextTick() await rAF() expect(focusHandler).toHaveBeenCalledTimes(1) expect(blurHandler).toHaveBeenCalledTimes(1) + expect(keydownHandler).toHaveBeenCalledTimes(1) input.trigger('focus') await nextTick() ;(document.querySelector('td.available') as HTMLElement).click() diff --git a/packages/components/time-picker/__tests__/time-picker.test.ts b/packages/components/time-picker/__tests__/time-picker.test.ts index d94e6b285f..a683c303b9 100644 --- a/packages/components/time-picker/__tests__/time-picker.test.ts +++ b/packages/components/time-picker/__tests__/time-picker.test.ts @@ -220,16 +220,18 @@ describe('TimePicker', () => { expect(secondsDom).toBeUndefined() }) - it('event change, focus, blur', async () => { + it('event change, focus, blur, keydown', async () => { const changeHandler = vi.fn() const focusHandler = vi.fn() const blurHandler = vi.fn() + const keydownHandler = vi.fn() const wrapper = _mount( ``, () => ({ value: new Date(2016, 9, 10, 18, 40) }), { @@ -243,6 +245,9 @@ describe('TimePicker', () => { onBlur(e) { return blurHandler(e) }, + onKeydown(e) { + return keydownHandler(e) + }, }, } ) @@ -255,8 +260,12 @@ describe('TimePicker', () => { input.trigger('blur') await nextTick() await rAF() // Blur is delayed to ensure focus was not moved to popper + input.trigger('keydown') + await nextTick() + await rAF() expect(focusHandler).toHaveBeenCalledTimes(1) expect(blurHandler).toHaveBeenCalledTimes(1) + expect(keydownHandler).toHaveBeenCalledTimes(1) input.trigger('focus') await nextTick() diff --git a/packages/components/time-picker/src/common/picker.vue b/packages/components/time-picker/src/common/picker.vue index c0c9a674a9..f8e817f57f 100644 --- a/packages/components/time-picker/src/common/picker.vue +++ b/packages/components/time-picker/src/common/picker.vue @@ -269,6 +269,7 @@ export default defineComponent({ 'calendar-change', 'panel-change', 'visible-change', + 'keydown', ], setup(props, ctx) { const { lang } = useLocale() @@ -321,6 +322,9 @@ export default defineComponent({ ctx.emit('update:modelValue', val ? formatValue : val, lang.value) } } + const emitKeydown = (e) => { + ctx.emit('keydown', e) + } const refInput = computed(() => { if (inputRef.value) { const _r = isRangeInput.value @@ -348,6 +352,7 @@ export default defineComponent({ _inputs[1].focus() } } + const onPick = (date: any = '', visible = false) => { if (!visible) { focus(true, true) @@ -618,7 +623,7 @@ export default defineComponent({ const handleKeydownInput = async (event) => { const code = event.code - + emitKeydown(event) if (code === EVENT_CODE.esc) { if (pickerVisible.value === true) { pickerVisible.value = false @@ -666,7 +671,6 @@ export default defineComponent({ event.stopPropagation() return } - if (pickerOptions.value.handleKeydownInput) { pickerOptions.value.handleKeydownInput(event) }