fix(Calendar): properly calculate focus on paged navigation false

packages/radix-vue/src/Calendar/Calendar.test.ts

@@ -241,6 +241,46 @@ describe('calendar', async () => {
     expect(firstMonthDay).not.toBeInTheDocument()
   })
 
+  it('properly handles multiple months correctly', async () => {
+    const { getByTestId, calendar, user } = setup({
+      calendarProps: {
+        modelValue: calendarDateTime,
+        numberOfMonths: 2,
+      },
+    })
+
+    const selectedDay = getSelectedDay(calendar)
+    expect(selectedDay).toHaveTextContent(String(calendarDateTime.day))
+
+    const heading = getByTestId('heading')
+    expect(heading).toHaveTextContent('January - February 1980')
+
+    const firstMonthDayDateStr = calendarDateTime.set({ day: 12 }).toString()
+    const firstMonthDay = getByTestId('date-1-12')
+    expect(firstMonthDay).toHaveTextContent('12')
+    expect(firstMonthDay).toHaveAttribute('data-value', firstMonthDayDateStr)
+
+    const secondMonthDay = getByTestId('date-2-15')
+    const secondMonthDayDateStr = calendarDateTime.set({ day: 15, month: 2 }).toString()
+    expect(secondMonthDay).toHaveTextContent('15')
+    expect(secondMonthDay).toHaveAttribute('data-value', secondMonthDayDateStr)
+
+    const prevButton = getByTestId('prev-button')
+    const nextButton = getByTestId('next-button')
+
+    await user.click(nextButton)
+    expect(heading).toHaveTextContent('February - March 1980')
+    expect(firstMonthDay).not.toBeInTheDocument()
+
+    await user.click(prevButton)
+    expect(heading).toHaveTextContent('January - February 1980')
+    expect(firstMonthDay).not.toBeInTheDocument()
+
+    await user.click(prevButton)
+    expect(heading).toHaveTextContent('December 1979 - January 1980')
+    expect(firstMonthDay).not.toBeInTheDocument()
+  })
+
   it('properly handles `pagedNavigation` with multiple months', async () => {
     const { getByTestId, calendar, user } = setup({
       calendarProps: {

packages/radix-vue/src/Calendar/CalendarCellTrigger.vue

@@ -9,7 +9,7 @@ import {
 } from '@internationalized/date'
 import { computed, nextTick } from 'vue'
 import { useKbd } from '@/shared'
-import { toDate } from '@/date'
+import { getDaysInMonth, toDate } from '@/date'
 
 export interface CalendarCellTriggerProps extends PrimitiveProps {
   /** The date value provided to the cell trigger */
@@ -130,6 +130,14 @@ function handleArrowKey(e: KeyboardEvent) {
       const newCollectionItems: HTMLElement[] = parentElement
         ? Array.from(parentElement.querySelectorAll(SELECTOR))
         : []
+      if (!rootContext.pagedNavigation.value) {
+        // Placeholder is set to first month of the new page
+        const numberOfDays = getDaysInMonth(rootContext.placeholder.value)
+        newCollectionItems[
+          numberOfDays - Math.abs(newIndex)
+        ].focus()
+        return
+      }
       newCollectionItems[
         newCollectionItems.length - Math.abs(newIndex)
       ].focus()
@@ -145,6 +153,14 @@ function handleArrowKey(e: KeyboardEvent) {
       const newCollectionItems: HTMLElement[] = parentElement
         ? Array.from(parentElement.querySelectorAll(SELECTOR))
         : []
+
+      if (!rootContext.pagedNavigation.value) {
+        // 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()
+        return
+      }
+
       newCollectionItems[newIndex - allCollectionItems.length].focus()
     })
   }

packages/radix-vue/src/RangeCalendar/RangeCalendar.test.ts

@@ -426,4 +426,87 @@ describe('rangeCalendar', () => {
       expect(weekdayEl).toHaveTextContent(weekday)
     }
   })
+
+  it('properly handles multiple months correctly', async () => {
+    const { getByTestId, calendar, user } = setup({
+      calendarProps: {
+        modelValue: calendarDateRange,
+        numberOfMonths: 2,
+      },
+    })
+
+    const selectedDays = getSelectedDays(calendar)
+    expect(selectedDays.at(0)).toHaveTextContent(String(calendarDateRange.start.day))
+    expect(selectedDays.at(-1)).toHaveTextContent(String(calendarDateRange.end.day))
+
+    const heading = getByTestId('heading')
+    expect(heading).toHaveTextContent('January - February 1980')
+
+    const firstMonthDayDateStr = calendarDateRange.start.set({ day: 12 }).toString()
+    const firstMonthDay = getByTestId('date-1-12')
+    expect(firstMonthDay).toHaveTextContent('12')
+    expect(firstMonthDay).toHaveAttribute('data-value', firstMonthDayDateStr)
+
+    const secondMonthDay = getByTestId('date-2-15')
+    const secondMonthDayDateStr = calendarDateRange.start.set({ day: 15, month: 2 }).toString()
+    expect(secondMonthDay).toHaveTextContent('15')
+    expect(secondMonthDay).toHaveAttribute('data-value', secondMonthDayDateStr)
+
+    const prevButton = getByTestId('prev-button')
+    const nextButton = getByTestId('next-button')
+
+    await user.click(nextButton)
+    expect(heading).toHaveTextContent('February - March 1980')
+    expect(firstMonthDay).not.toBeInTheDocument()
+
+    await user.click(prevButton)
+    expect(heading).toHaveTextContent('January - February 1980')
+    expect(firstMonthDay).not.toBeInTheDocument()
+
+    await user.click(prevButton)
+    expect(heading).toHaveTextContent('December 1979 - January 1980')
+    expect(firstMonthDay).not.toBeInTheDocument()
+  })
+
+  it('properly handles `pagedNavigation` with multiple months', async () => {
+    const { getByTestId, calendar, user } = setup({
+      calendarProps: {
+        modelValue: calendarDateRange,
+        numberOfMonths: 2,
+        pagedNavigation: true,
+      },
+    })
+
+    const selectedDays = getSelectedDays(calendar)
+    expect(selectedDays.at(0)).toHaveTextContent(String(calendarDateRange.start.day))
+    expect(selectedDays.at(-1)).toHaveTextContent(String(calendarDateRange.end.day))
+
+    const heading = getByTestId('heading')
+    expect(heading).toHaveTextContent('January - February 1980')
+
+    const firstMonthDayDateStr = calendarDateRange.start.set({ day: 12 }).toString()
+    const firstMonthDay = getByTestId('date-1-12')
+    expect(firstMonthDay).toHaveTextContent('12')
+    expect(firstMonthDay).toHaveAttribute('data-value', firstMonthDayDateStr)
+
+    const secondMonthDay = getByTestId('date-2-15')
+    const secondMonthDayDateStr = calendarDateRange.start.set({ day: 15, month: 2 }).toString()
+    expect(secondMonthDay).toHaveTextContent('15')
+    expect(secondMonthDay).toHaveAttribute('data-value', secondMonthDayDateStr)
+
+    const prevButton = getByTestId('prev-button')
+    const nextButton = getByTestId('next-button')
+
+    await user.click(nextButton)
+    expect(heading).toHaveTextContent('March - April 1980')
+    expect(firstMonthDay).not.toBeInTheDocument()
+
+    await user.click(prevButton)
+    expect(heading).toHaveTextContent('January - February 1980')
+    expect(firstMonthDay).not.toBeInTheDocument()
+
+    await user.click(prevButton)
+    expect(heading).toHaveTextContent('November - December 1979')
+    expect(firstMonthDay).not.toBeInTheDocument()
+  })
 })

packages/radix-vue/src/RangeCalendar/RangeCalendarCellTrigger.vue

@@ -9,7 +9,7 @@ import {
 } from '@internationalized/date'
 import { computed, nextTick } from 'vue'
 import { useKbd } from '@/shared'
-import { isBetweenInclusive, toDate } from '@/date'
+import { getDaysInMonth, isBetweenInclusive, toDate } from '@/date'
 
 export interface RangeCalendarCellTriggerProps extends PrimitiveProps {
   day: DateValue
@@ -169,7 +169,17 @@ function handleArrowKey(e: KeyboardEvent) {
       const newCollectionItems: HTMLElement[] = parentElement
         ? Array.from(parentElement.querySelectorAll(SELECTOR))
         : []
-      newCollectionItems[newCollectionItems.length - Math.abs(newIndex)].focus()
+      if (!rootContext.pagedNavigation.value) {
+        // Placeholder is set to first month of the new page
+        const numberOfDays = getDaysInMonth(rootContext.placeholder.value)
+        newCollectionItems[
+          numberOfDays - Math.abs(newIndex)
+        ].focus()
+        return
+      }
+      newCollectionItems[
+        newCollectionItems.length - Math.abs(newIndex)
+      ].focus()
     })
     return
   }
@@ -182,6 +192,14 @@ function handleArrowKey(e: KeyboardEvent) {
       const newCollectionItems: HTMLElement[] = parentElement
         ? Array.from(parentElement.querySelectorAll(SELECTOR))
         : []
+
+      if (!rootContext.pagedNavigation.value) {
+        // 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()
+        return
+      }
+
       newCollectionItems[newIndex - allCollectionItems.length].focus()
     })
   }