diff --git a/packages/components/date-picker/__tests__/date-picker.spec.ts b/packages/components/date-picker/__tests__/date-picker.spec.ts
index 6ed88607fa..24f637734e 100644
--- a/packages/components/date-picker/__tests__/date-picker.spec.ts
+++ b/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(
+ ``,
+ () => ({ 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(
+ ``,
+ () => ({ 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
diff --git a/packages/components/time-picker/src/common/picker.vue b/packages/components/time-picker/src/common/picker.vue
index 41c88e4e64..798c2f15eb 100644
--- a/packages/components/time-picker/src/common/picker.vue
+++ b/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))
) {
diff --git a/packages/utils/aria.ts b/packages/utils/aria.ts
index f0ffecea66..8cf6b099a5 100644
--- a/packages/utils/aria.ts
+++ b/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])`