fix(Calendar): focus first day when no selected or today cell on initial focus (#2676)

nakagam3 · nakagam3 · claude · web-flow · commit 52aa59a080ae · 2026-06-10T23:22:32.000+08:00
The third fallback branch of handleCalendarInitialFocus queried for
`[data-reka-calendar-day]`, an attribute that no component renders (day cells
expose `data-reka-calendar-cell-trigger` and friends instead). As a result,
when neither a selected day nor today is present in the visible view (e.g. an
unselected calendar whose displayed month does not contain today), initial
focus landed nowhere.

Switch the fallback to `[data-value]:not([data-outside-view]):not([data-disabled])`.
`data-value` is shared by every calendar/picker cell trigger, so the fix covers
Calendar, RangeCalendar, DatePicker, DateRangePicker and the Month/Year (Range)
pickers alike, and it matches the selector reka-ui already uses internally for
cell navigation.

Co-authored-by: nakagam3 &lt;botch.10npo@gmail.com&gt;
Co-authored-by: Claude Opus 4.8 (1M context) &lt;noreply@anthropic.com&gt;
diff --git a/packages/core/src/Calendar/Calendar.test.ts b/packages/core/src/Calendar/Calendar.test.ts
@@ -6,6 +6,7 @@ import { render } from '@testing-library/vue'
 import { describe, expect, it } from 'vitest'
 import { axe } from 'vitest-axe'
 import { useTestKbd } from '@/shared'
+import { handleCalendarInitialFocus } from '@/shared/date'
 import Calendar from './story/_Calendar.vue'
 import CalendarMultiple from './story/_CalendarMultiple.vue'
 
@@ -899,6 +900,19 @@ describe('calendar - edge cases', () => {
     await user.keyboard(kbd.ARROW_LEFT)
     expect(getByTestId('date-0-1-31')).toHaveFocus()
   })
+
+  it('handles initial focus when no date is selected and today is out of view', async () => {
+    const { calendar, getByTestId } = setup({
+      calendarProps: { defaultPlaceholder: edgeCaseCalendarDate },
+    })
+
+    expect(calendar.querySelector('[data-selected]')).toBeNull()
+    expect(calendar.querySelector('[data-today]')).toBeNull()
+
+    handleCalendarInitialFocus(calendar)
+
+    expect(getByTestId('date-1-1')).toHaveFocus()
+  })
 })
 
 describe('calendar - tabindex states', () => {
diff --git a/packages/core/src/shared/date/utils.ts b/packages/core/src/shared/date/utils.ts
@@ -62,7 +62,7 @@ export function handleCalendarInitialFocus(calendar: HTMLElement) {
   if (today)
     return today.focus()
 
-  const firstDay = calendar.querySelector<HTMLElement>('[data-reka-calendar-day]')
+  const firstDay = calendar.querySelector<HTMLElement>('[data-value]:not([data-outside-view]):not([data-disabled])')
   if (firstDay)
     return firstDay.focus()
 }

Original file line number	Diff line number	Diff line change
`@@ -62,7 +62,7 @@ export function handleCalendarInitialFocus(calendar: HTMLElement) {`
`62`	`62`	`if (today)`
`63`	`63`	`return today.focus()`
`64`	`64`
`65`		`- const firstDay = calendar.querySelector<HTMLElement>('[data-reka-calendar-day]')`
	`65`	`+ const firstDay = calendar.querySelector<HTMLElement>('[data-value]:not([data-outside-view]):not([data-disabled])')`
`66`	`66`	`if (firstDay)`
`67`	`67`	`return firstDay.focus()`
`68`	`68`	`}`