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', () => {
|