diff --git a/packages/components/date-picker-panel/src/composables/use-basic-date-table.ts b/packages/components/date-picker-panel/src/composables/use-basic-date-table.ts index 9e8a620ca4..0ccd9bcd34 100644 --- a/packages/components/date-picker-panel/src/composables/use-basic-date-table.ts +++ b/packages/components/date-picker-panel/src/composables/use-basic-date-table.ts @@ -257,6 +257,13 @@ export const useBasicDateTable = ( } } + const isSelectedCell = (cell: DateCell) => { + return ( + (!unref(hasCurrent) && cell?.text === 1 && cell.type === 'normal') || + cell.isCurrent + ) + } + const handleFocus = (event: FocusEvent) => { if (focusWithClick || unref(hasCurrent) || props.selectionMode !== 'date') return @@ -382,6 +389,7 @@ export const useBasicDateTable = ( focus, isCurrent, isWeekActive, + isSelectedCell, handlePickDate, handleMouseUp, diff --git a/packages/components/date-picker-panel/src/date-picker-com/basic-date-table.vue b/packages/components/date-picker-panel/src/date-picker-com/basic-date-table.vue index cb61ec9dc0..e9198c466f 100644 --- a/packages/components/date-picker-panel/src/date-picker-com/basic-date-table.vue +++ b/packages/components/date-picker-panel/src/date-picker-com/basic-date-table.vue @@ -30,11 +30,11 @@ @@ -68,6 +68,7 @@ const { focus, isCurrent, isWeekActive, + isSelectedCell, handlePickDate, handleMouseUp, diff --git a/packages/components/date-picker/__tests__/date-picker.test.ts b/packages/components/date-picker/__tests__/date-picker.test.ts index fe05d05d4d..b4f43673db 100644 --- a/packages/components/date-picker/__tests__/date-picker.test.ts +++ b/packages/components/date-picker/__tests__/date-picker.test.ts @@ -10,6 +10,7 @@ import { CommonPicker, PICKER_POPPER_OPTIONS_INJECTION_KEY, } from '@element-plus/components/time-picker' +import triggerEvent from '@element-plus/test-utils/trigger-event' import Input from '@element-plus/components/input' import zhCn from '@element-plus/locale/lang/zh-cn' import enUs from '@element-plus/locale/lang/en' @@ -1785,6 +1786,21 @@ describe('DatePicker keyboard events', () => { const attr2 = popperEl2.getAttribute('aria-hidden') expect(attr2).toEqual('true') }) + + it('should be able to enter in date picker table through keyboard navigation', async () => { + _mount('', () => ({ + value: '', + })) + await nextTick() + const input = document.querySelector('input') + input.blur() + await nextTick() + input.focus() + await nextTick() + triggerEvent(input, 'keydown', EVENT_CODE.down) + await nextTick() + expect(document.querySelector('.current')?.textContent).toBe('1') + }) }) describe('DateRangePicker', () => {