fix(components): date-picker add keydown events(#7506) (#7536)

* fix(components): date-picker add keyup events(#7506)

* Update picker.vue

feat(components): keyup变更为keydown

* Update picker.vue

fix(components): picker delete superfluous code

* Update picker.vue

fix(components): emit事件

* feat: date-picker & timer-picker add unit test

* feat: picker add unit test expected results

* Update time-picker.test.ts

feat: 去除lint error

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(
       `<el-date-picker
@@ -231,6 +232,7 @@ describe('DatePicker', () => {
         @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()

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(
       `<el-time-picker
         v-model="value"
         @change="onChange"
         @focus="onFocus"
         @blur="onBlur"
+        @keydown="onKeydown"
       />`,
       () => ({ 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()

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<HTMLInputElement[]>(() => {
       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)
       }