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

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

* test: get test working

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,

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,

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