fix(components): [el-date-picker] can't use numpadEnter (#4563)

* fix(components): [el-date-picker] can't use numpadEnter

* fix(components): [el-date-picker]enter to close when input.value is null

* fix(components): [el-date-picker] add test

packages/components/date-picker/__tests__/date-picker.spec.ts

@@ -7,6 +7,7 @@ import Input from '@element-plus/components/input'
 import zhCn from '@element-plus/locale/lang/zh-cn'
 import enUs from '@element-plus/locale/lang/en'
 import 'dayjs/locale/zh-cn'
+import { EVENT_CODE } from '@element-plus/utils/aria'
 import DatePicker from '../src/date-picker'
 
 const _mount = (template: string, data = () => ({}), otherObj?) =>
@@ -677,6 +678,58 @@ describe('DatePicker dates', () => {
   })
 })
 
+describe('DatePicker keyboard events', () => {
+  it('enter', async () => {
+    const wrapper = _mount(
+      `<el-date-picker
+    type='date'
+    v-model="value"
+  />`,
+      () => ({ value: '' })
+    )
+    const input = wrapper.find('.el-input__inner')
+    await input.trigger('focus')
+    await input.trigger('click')
+    await nextTick()
+
+    const popperEl = document.querySelectorAll('.el-picker__popper')[0]
+    const attr = popperEl.getAttribute('aria-hidden')
+    expect(attr).toEqual('false')
+
+    await input.trigger('keydown', {
+      code: EVENT_CODE.enter,
+    })
+    const popperEl2 = document.querySelectorAll('.el-picker__popper')[0]
+    const attr2 = popperEl2.getAttribute('aria-hidden')
+    expect(attr2).toEqual('true')
+  })
+
+  it('numpadEnter', async () => {
+    const wrapper = _mount(
+      `<el-date-picker
+    type='date'
+    v-model="value"
+  />`,
+      () => ({ value: '' })
+    )
+    const input = wrapper.find('.el-input__inner')
+    await input.trigger('focus')
+    await input.trigger('click')
+    await nextTick()
+
+    const popperEl = document.querySelectorAll('.el-picker__popper')[0]
+    const attr = popperEl.getAttribute('aria-hidden')
+    expect(attr).toEqual('false')
+
+    await input.trigger('keydown', {
+      code: EVENT_CODE.numpadEnter,
+    })
+    const popperEl2 = document.querySelectorAll('.el-picker__popper')[0]
+    const attr2 = popperEl2.getAttribute('aria-hidden')
+    expect(attr2).toEqual('true')
+  })
+})
+
 describe('DateRangePicker', () => {
   it('create', async () => {
     let calendarChangeValue = null

packages/components/time-picker/src/common/picker.vue

@@ -495,8 +495,9 @@ export default defineComponent({
         return
       }
 
-      if (code === EVENT_CODE.enter) {
+      if (code === EVENT_CODE.enter || code === EVENT_CODE.numpadEnter) {
         if (
+          userInput.value === null ||
           userInput.value === '' ||
           isValidValue(parseUserInputToDayjs(displayValue.value))
         ) {

packages/utils/aria.ts

@@ -10,6 +10,7 @@ export const EVENT_CODE = {
   esc: 'Escape',
   delete: 'Delete',
   backspace: 'Backspace',
+  numpadEnter: 'NumpadEnter',
 }
 
 const FOCUSABLE_ELEMENT_SELECTORS = `a[href],button:not([disabled]),button:not([hidden]),:not([tabindex="-1"]),input:not([disabled]),input:not([type="hidden"]),select:not([disabled]),textarea:not([disabled])`