fix(Calendar): properly calculate focus for next month when pagedNavigation is false (#1742)

epr3 · web-flow · commit 7b91bc087297 · 2025-03-22T12:01:07.000+08:00
* fix(Calendar): adjust calculation for calendar with no paged navigation

* chore(Calendar): add edge case test
diff --git a/packages/core/src/Calendar/Calendar.test.ts b/packages/core/src/Calendar/Calendar.test.ts
@@ -5,10 +5,11 @@ import CalendarMultiple from './story/_CalendarMultiple.vue'
 import userEvent from '@testing-library/user-event'
 import { CalendarDate, CalendarDateTime, type DateValue, toZoned } from '@internationalized/date'
 import type { CalendarRootProps } from './CalendarRoot.vue'
-import { render } from '@testing-library/vue'
+import { render, screen } from '@testing-library/vue'
 import { useTestKbd } from '@/shared'
 
 const calendarDate = new CalendarDate(1980, 1, 20)
+const edgeCaseCalendarDate = new CalendarDate(2025, 1, 1)
 const calendarDateTime = new CalendarDateTime(1980, 1, 20, 12, 30, 0, 0)
 const zonedDateTime = toZoned(calendarDateTime, 'America/New_York')
 
@@ -216,11 +217,11 @@ describe('calendar', async () => {
     expect(heading).toHaveTextContent('January - February 1980')
 
     const firstMonthDayDateStr = calendarDateTime.set({ day: 12 }).toString()
-    const firstMonthDay = getByTestId('date-1-12')
+    const firstMonthDay = getByTestId('date-0-1-12')
     expect(firstMonthDay).toHaveTextContent('12')
     expect(firstMonthDay).toHaveAttribute('data-value', firstMonthDayDateStr)
 
-    const secondMonthDay = getByTestId('date-2-15')
+    const secondMonthDay = getByTestId('date-1-2-15')
     const secondMonthDayDateStr = calendarDateTime.set({ day: 15, month: 2 }).toString()
     expect(secondMonthDay).toHaveTextContent('15')
     expect(secondMonthDay).toHaveAttribute('data-value', secondMonthDayDateStr)
@@ -256,11 +257,11 @@ describe('calendar', async () => {
     expect(heading).toHaveTextContent('January - February 1980')
 
     const firstMonthDayDateStr = calendarDateTime.set({ day: 12 }).toString()
-    const firstMonthDay = getByTestId('date-1-12')
+    const firstMonthDay = getByTestId('date-0-1-12')
     expect(firstMonthDay).toHaveTextContent('12')
     expect(firstMonthDay).toHaveAttribute('data-value', firstMonthDayDateStr)
 
-    const secondMonthDay = getByTestId('date-2-15')
+    const secondMonthDay = getByTestId('date-1-2-15')
     const secondMonthDayDateStr = calendarDateTime.set({ day: 15, month: 2 }).toString()
     expect(secondMonthDay).toHaveTextContent('15')
     expect(secondMonthDay).toHaveAttribute('data-value', secondMonthDayDateStr)
@@ -297,11 +298,11 @@ describe('calendar', async () => {
     expect(heading).toHaveTextContent('January - February 1980')
 
     const firstMonthDayDateStr = calendarDateTime.set({ day: 12 }).toString()
-    const firstMonthDay = getByTestId('date-1-12')
+    const firstMonthDay = getByTestId('date-0-1-12')
     expect(firstMonthDay).toHaveTextContent('12')
     expect(firstMonthDay).toHaveAttribute('data-value', firstMonthDayDateStr)
 
-    const secondMonthDay = getByTestId('date-2-15')
+    const secondMonthDay = getByTestId('date-1-2-15')
     const secondMonthDayDateStr = calendarDateTime.set({ day: 15, month: 2 }).toString()
     expect(secondMonthDay).toHaveTextContent('15')
     expect(secondMonthDay).toHaveAttribute('data-value', secondMonthDayDateStr)
@@ -723,3 +724,27 @@ describe('calendar - `multiple`', () => {
     expect(getSelectedDays(calendar).length).toBe(1)
   })
 })
+
+describe('calendar - edge cases', () => {
+  it('handles february correctly using arrow keys', async () => {
+    const { getByTestId, user } = setup({
+      calendarProps: {
+        defaultPlaceholder: edgeCaseCalendarDate,
+        numberOfMonths: 2,
+      },
+    })
+
+    const lastDayOfMonth = getByTestId('date-1-2-28')
+    lastDayOfMonth.focus()
+    expect(lastDayOfMonth).toHaveFocus()
+
+    const heading = getByTestId('heading')
+    expect(heading).toHaveTextContent('January - February 2025')
+
+    await user.keyboard(kbd.ARROW_RIGHT)
+    screen.debug()
+    expect(getByTestId('date-1-3-1')).toHaveFocus()
+    await user.keyboard(kbd.ARROW_LEFT)
+    expect(getByTestId('date-0-2-28')).toHaveFocus()
+  })
+})
diff --git a/packages/core/src/Calendar/CalendarCellTrigger.vue b/packages/core/src/Calendar/CalendarCellTrigger.vue
@@ -144,7 +144,7 @@ function handleArrowKey(e: KeyboardEvent) {
       const newCollectionItems: HTMLElement[] = parentElement
         ? Array.from(parentElement.querySelectorAll(SELECTOR))
         : []
-      if (!rootContext.pagedNavigation.value) {
+      if (!rootContext.pagedNavigation.value && rootContext.numberOfMonths.value > 1) {
         // Placeholder is set to first month of the new page
         const numberOfDays = getDaysInMonth(rootContext.placeholder.value)
         newCollectionItems[
@@ -168,10 +168,10 @@ function handleArrowKey(e: KeyboardEvent) {
         ? Array.from(parentElement.querySelectorAll(SELECTOR))
         : []
 
-      if (!rootContext.pagedNavigation.value) {
+      if (!rootContext.pagedNavigation.value && rootContext.numberOfMonths.value > 1) {
         // Placeholder is set to first month of the new page
-        const numberOfDays = getDaysInMonth(rootContext.placeholder.value.add({ months: rootContext.numberOfMonths.value - 1 }))
-        newCollectionItems[newCollectionItems.length - numberOfDays + newIndex - allCollectionItems.length].focus()
+        const numberOfDays = getDaysInMonth(rootContext.placeholder.value)
+        newCollectionItems[newIndex - allCollectionItems.length + numberOfDays].focus()
         return
       }
 
diff --git a/packages/core/src/Calendar/story/_Calendar.vue b/packages/core/src/Calendar/story/_Calendar.vue
@@ -38,7 +38,7 @@ function pagingFunc(date: DateValue, sign: -1 | 1) {
     </CalendarHeader>
 
     <CalendarGrid
-      v-for="month in grid"
+      v-for="(month, gridIndex) in grid"
       :key="month.value.toString()"
       :data-testid="`grid-${month.value.month}`"
     >
@@ -69,7 +69,7 @@ function pagingFunc(date: DateValue, sign: -1 | 1) {
             <CalendarCellTrigger
               :day="weekDate"
               :month="month.value"
-              :data-testid="`date-${weekDate.month}-${weekDate.day}`"
+              :data-testid="`date-${props.calendarProps?.numberOfMonths ?? 1 > 1 ? `${gridIndex}-` : ''}${weekDate.month}-${weekDate.day}`"
             />
           </CalendarCell>
         </CalendarGridRow>
diff --git a/packages/core/src/RangeCalendar/RangeCalendarCellTrigger.vue b/packages/core/src/RangeCalendar/RangeCalendarCellTrigger.vue
@@ -194,7 +194,7 @@ function handleArrowKey(e: KeyboardEvent) {
       const newCollectionItems: HTMLElement[] = parentElement
         ? Array.from(parentElement.querySelectorAll(SELECTOR))
         : []
-      if (!rootContext.pagedNavigation.value) {
+      if (!rootContext.pagedNavigation.value && rootContext.numberOfMonths.value > 1) {
         // Placeholder is set to first month of the new page
         const numberOfDays = getDaysInMonth(rootContext.placeholder.value)
         newCollectionItems[
@@ -218,10 +218,10 @@ function handleArrowKey(e: KeyboardEvent) {
         ? Array.from(parentElement.querySelectorAll(SELECTOR))
         : []
 
-      if (!rootContext.pagedNavigation.value) {
+      if (!rootContext.pagedNavigation.value && rootContext.numberOfMonths.value > 1) {
         // Placeholder is set to first month of the new page
-        const numberOfDays = getDaysInMonth(rootContext.placeholder.value.add({ months: rootContext.numberOfMonths.value - 1 }))
-        newCollectionItems[newCollectionItems.length - numberOfDays + newIndex - allCollectionItems.length].focus()
+        const numberOfDays = getDaysInMonth(rootContext.placeholder.value)
+        newCollectionItems[newIndex - allCollectionItems.length + numberOfDays].focus()
         return
       }
 
