fix(Calendar): handle number of months > 2 (#1744)

epr3 · web-flow · commit 71023c878144 · 2025-03-22T15:27:14.000+08:00
diff --git a/packages/core/src/Calendar/Calendar.test.ts b/packages/core/src/Calendar/Calendar.test.ts
@@ -5,7 +5,7 @@ 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, screen } from '@testing-library/vue'
+import { render } from '@testing-library/vue'
 import { useTestKbd } from '@/shared'
 
 const calendarDate = new CalendarDate(1980, 1, 20)
@@ -742,9 +742,34 @@ describe('calendar - edge cases', () => {
     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()
   })
+
+  it('handles multiple number of months properly', async () => {
+    const { getByTestId, user } = setup({
+      calendarProps: {
+        defaultPlaceholder: edgeCaseCalendarDate,
+        numberOfMonths: 4,
+      },
+    })
+
+    const lastDayOfMonth = getByTestId('date-3-4-30')
+    lastDayOfMonth.focus()
+    expect(lastDayOfMonth).toHaveFocus()
+
+    const heading = getByTestId('heading')
+    expect(heading).toHaveTextContent('January - April 2025')
+
+    await user.keyboard(kbd.ARROW_RIGHT)
+    expect(getByTestId('date-3-5-1')).toHaveFocus()
+
+    const firstDayOfMonth = getByTestId('date-0-2-1')
+    firstDayOfMonth.focus()
+    expect(firstDayOfMonth).toHaveFocus()
+
+    await user.keyboard(kbd.ARROW_LEFT)
+    expect(getByTestId('date-0-1-31')).toHaveFocus()
+  })
 })
diff --git a/packages/core/src/Calendar/CalendarCellTrigger.vue b/packages/core/src/Calendar/CalendarCellTrigger.vue
@@ -146,7 +146,7 @@ function handleArrowKey(e: KeyboardEvent) {
         : []
       if (!rootContext.pagedNavigation.value && rootContext.numberOfMonths.value > 1) {
         // Placeholder is set to first month of the new page
-        const numberOfDays = getDaysInMonth(rootContext.placeholder.value)
+        const numberOfDays = getDaysInMonth(rootContext.placeholder.value.add({ months: rootContext.numberOfMonths.value }))
         newCollectionItems[
           numberOfDays - Math.abs(newIndex)
         ].focus()
@@ -170,8 +170,10 @@ function handleArrowKey(e: KeyboardEvent) {
 
       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[newIndex - allCollectionItems.length + numberOfDays].focus()
+        const numberOfDays = getDaysInMonth(
+          rootContext.placeholder.value.add({ months: rootContext.numberOfMonths.value - 1 }),
+        )
+        newCollectionItems[newIndex - allCollectionItems.length + (newCollectionItems.length - numberOfDays)].focus()
         return
       }
 
diff --git a/packages/core/src/RangeCalendar/RangeCalendarCellTrigger.vue b/packages/core/src/RangeCalendar/RangeCalendarCellTrigger.vue
@@ -220,8 +220,10 @@ function handleArrowKey(e: KeyboardEvent) {
 
       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[newIndex - allCollectionItems.length + numberOfDays].focus()
+        const numberOfDays = getDaysInMonth(
+          rootContext.placeholder.value.add({ months: rootContext.numberOfMonths.value - 1 }),
+        )
+        newCollectionItems[newIndex - allCollectionItems.length + (newCollectionItems.length - numberOfDays)].focus()
         return
       }
 
