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])`