From 60015775166f05e807d4bdcd9f962d332fc6a9a6 Mon Sep 17 00:00:00 2001
From: Noblet Ouways <91417411+Dsaquel@users.noreply.github.com>
Date: Wed, 17 Sep 2025 12:06:47 +0200
Subject: [PATCH] fix(components): [date-picker] keyboard navigation (#22192)

* fix(components): [date-picker] keyboard navigation

* test: get test working
---
 .../src/composables/use-basic-date-table.ts      |  8 ++++++++
 .../src/date-picker-com/basic-date-table.vue     |  5 +++--
 .../date-picker/__tests__/date-picker.test.ts    | 16 ++++++++++++++++
 3 files changed, 27 insertions(+), 2 deletions(-)

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 @@
         <td
           v-for="(cell, columnKey) in row"
           :key="`${rowKey}.${columnKey}`"
-          :ref="(el) => !isUnmounting && cell.isSelected && (currentCellRef = el as HTMLElement)"
+          :ref="(el) => !isUnmounting && isSelectedCell(cell) && (currentCellRef = el as HTMLElement)"
           :class="getCellClasses(cell)"
           :aria-current="cell.isCurrent ? 'date' : undefined"
           :aria-selected="cell.isCurrent"
-          :tabindex="cell.isSelected ? 0 : -1"
+          :tabindex="isSelectedCell(cell) ? 0 : -1"
           @focus="handleFocus"
         >
           <el-date-picker-cell :cell="cell" />
@@ -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('<el-date-picker v-model="value" type="date" />', () => ({
+      value: '',
+    }))
+    await nextTick()
+    const input = document.querySelector<HTMLInputElement>('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', () => {