fix(Calendar): minValue and maxValue navigation issues (#1750)

hartbit · web-flow · commit 47276766a3cc · 2025-03-25T19:44:07.000+02:00
diff --git a/packages/core/src/Calendar/Calendar.test.ts b/packages/core/src/Calendar/Calendar.test.ts
@@ -632,6 +632,94 @@ describe('calendar', async () => {
       expect(weekdayEl).toHaveTextContent(weekday)
     }
   })
+
+  it('handles maxValue correctly using arrow keys', async () => {
+    const { getByTestId, user } = setup({
+      calendarProps: {
+        defaultPlaceholder: calendarDate,
+        maxValue: new CalendarDate(1980, 2, 15),
+      },
+    })
+
+    const lastDayOfMonth = getByTestId('date-1-31')
+    lastDayOfMonth.focus()
+    expect(lastDayOfMonth).toHaveFocus()
+
+    const heading = getByTestId('heading')
+    expect(heading).toHaveTextContent('January 1980')
+
+    await user.keyboard(kbd.ARROW_RIGHT)
+    expect(getByTestId('date-2-1')).toHaveFocus()
+    await user.keyboard(kbd.ARROW_LEFT)
+    expect(getByTestId('date-1-31')).toHaveFocus()
+  })
+
+  it('handles minValue correctly using arrow keys', async () => {
+    const { getByTestId, user } = setup({
+      calendarProps: {
+        defaultPlaceholder: calendarDate,
+        minValue: new CalendarDate(1979, 12, 15),
+      },
+    })
+
+    const firstDayOfMonth = getByTestId('date-1-1')
+    firstDayOfMonth.focus()
+    expect(firstDayOfMonth).toHaveFocus()
+
+    const heading = getByTestId('heading')
+    expect(heading).toHaveTextContent('January 1980')
+
+    await user.keyboard(kbd.ARROW_LEFT)
+    expect(getByTestId('date-12-31')).toHaveFocus()
+    await user.keyboard(kbd.ARROW_RIGHT)
+    expect(getByTestId('date-1-1')).toHaveFocus()
+  })
+})
+
+describe('numberOfMonths > 1', () => {
+  it('handles maxValue correctly using arrow keys', async () => {
+    const { getByTestId, user } = setup({
+      calendarProps: {
+        defaultPlaceholder: calendarDate,
+        numberOfMonths: 2,
+        maxValue: new CalendarDate(1980, 3, 15),
+      },
+    })
+
+    const lastDayOfMonth = getByTestId('date-1-2-29')
+    lastDayOfMonth.focus()
+    expect(lastDayOfMonth).toHaveFocus()
+
+    const heading = getByTestId('heading')
+    expect(heading).toHaveTextContent('January - February 1980')
+
+    await user.keyboard(kbd.ARROW_RIGHT)
+    expect(getByTestId('date-1-3-1')).toHaveFocus()
+    await user.keyboard(kbd.ARROW_LEFT)
+    expect(getByTestId('date-0-2-29')).toHaveFocus()
+  })
+
+  it('handles minValue correctly using arrow keys', async () => {
+    const { getByTestId, user } = setup({
+      calendarProps: {
+        defaultPlaceholder: calendarDate,
+        numberOfMonths: 2,
+        minValue: new CalendarDate(1979, 12, 15),
+      },
+    })
+
+    const firstDayOfMonth = getByTestId('date-0-1-1')
+    firstDayOfMonth.focus()
+    expect(firstDayOfMonth).toHaveFocus()
+
+    const heading = getByTestId('heading')
+    expect(heading).toHaveTextContent('January - February 1980')
+
+    await user.keyboard(kbd.ARROW_LEFT)
+    expect(getByTestId('date-0-12-31')).toHaveFocus()
+    await user.keyboard(kbd.ARROW_RIGHT)
+    expect(getByTestId('date-1-1-1')).toHaveFocus()
+  })
 })
 
 describe('calendar - `multiple`', () => {
diff --git a/packages/core/src/Calendar/CalendarCellTrigger.vue b/packages/core/src/Calendar/CalendarCellTrigger.vue
@@ -84,7 +84,7 @@ const isFocusedDate = computed(() => {
 const isSelectedDate = computed(() => rootContext.isDateSelected(props.day))
 
 const SELECTOR
-  = '[data-reka-calendar-cell-trigger]:not([data-disabled]):not([data-outside-view]):not([data-outside-visible-view])'
+  = '[data-reka-calendar-cell-trigger]:not([data-outside-view]):not([data-outside-visible-view])'
 
 function changeDate(date: DateValue) {
   if (rootContext.readonly.value)
@@ -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.add({ months: rootContext.numberOfMonths.value }))
+        const numberOfDays = getDaysInMonth(rootContext.placeholder.value)
         newCollectionItems[
           numberOfDays - Math.abs(newIndex)
         ].focus()
diff --git a/packages/core/src/RangeCalendar/RangeCalendar.test.ts b/packages/core/src/RangeCalendar/RangeCalendar.test.ts
@@ -497,6 +497,50 @@ describe('rangeCalendar', () => {
     }
   })
 
+  it('handles maxValue correctly using arrow keys', async () => {
+    const { getByTestId, user } = setup({
+      calendarProps: {
+        modelValue: calendarDateRange,
+        maxValue: new CalendarDate(1980, 2, 15),
+      },
+    })
+
+    const lastDayOfMonth = getByTestId('date-1-31')
+    lastDayOfMonth.focus()
+    expect(lastDayOfMonth).toHaveFocus()
+
+    const heading = getByTestId('heading')
+    expect(heading).toHaveTextContent('January 1980')
+
+    await user.keyboard(kbd.ARROW_RIGHT)
+    expect(getByTestId('date-2-1')).toHaveFocus()
+    await user.keyboard(kbd.ARROW_LEFT)
+    expect(getByTestId('date-1-31')).toHaveFocus()
+  })
+
+  it('handles minValue correctly using arrow keys', async () => {
+    const { getByTestId, user } = setup({
+      calendarProps: {
+        modelValue: calendarDateRange,
+        minValue: new CalendarDate(1979, 12, 15),
+      },
+    })
+
+    const firstDayOfMonth = getByTestId('date-1-1')
+    firstDayOfMonth.focus()
+    expect(firstDayOfMonth).toHaveFocus()
+
+    const heading = getByTestId('heading')
+    expect(heading).toHaveTextContent('January 1980')
+
+    await user.keyboard(kbd.ARROW_LEFT)
+    expect(getByTestId('date-12-31')).toHaveFocus()
+    await user.keyboard(kbd.ARROW_RIGHT)
+    expect(getByTestId('date-1-1')).toHaveFocus()
+  })
+})
+
+describe('numberOfMonths > 1', () => {
   it('properly handles multiple months correctly', async () => {
     const { getByTestId, calendar, user } = setup({
       calendarProps: {
@@ -513,11 +557,11 @@ describe('rangeCalendar', () => {
     expect(heading).toHaveTextContent('January - February 1980')
 
     const firstMonthDayDateStr = calendarDateRange.start.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 = calendarDateRange.start.set({ day: 15, month: 2 }).toString()
     expect(secondMonthDay).toHaveTextContent('15')
     expect(secondMonthDay).toHaveAttribute('data-value', secondMonthDayDateStr)
@@ -538,7 +582,7 @@ describe('rangeCalendar', () => {
     expect(firstMonthDay).not.toBeInTheDocument()
   })
 
-  it('properly handles `pagedNavigation` with multiple months', async () => {
+  it('properly handles `pagedNavigation`', async () => {
     const { getByTestId, calendar, user } = setup({
       calendarProps: {
         modelValue: calendarDateRange,
@@ -555,11 +599,11 @@ describe('rangeCalendar', () => {
     expect(heading).toHaveTextContent('January - February 1980')
 
     const firstMonthDayDateStr = calendarDateRange.start.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 = calendarDateRange.start.set({ day: 15, month: 2 }).toString()
     expect(secondMonthDay).toHaveTextContent('15')
     expect(secondMonthDay).toHaveAttribute('data-value', secondMonthDayDateStr)
@@ -579,4 +623,48 @@ describe('rangeCalendar', () => {
     expect(heading).toHaveTextContent('November - December 1979')
     expect(firstMonthDay).not.toBeInTheDocument()
   })
+
+  it('handles maxValue correctly using arrow keys', async () => {
+    const { getByTestId, user } = setup({
+      calendarProps: {
+        modelValue: calendarDateRange,
+        numberOfMonths: 2,
+        maxValue: new CalendarDate(1980, 3, 15),
+      },
+    })
+
+    const lastDayOfMonth = getByTestId('date-1-2-29')
+    lastDayOfMonth.focus()
+    expect(lastDayOfMonth).toHaveFocus()
+
+    const heading = getByTestId('heading')
+    expect(heading).toHaveTextContent('January - February 1980')
+
+    await user.keyboard(kbd.ARROW_RIGHT)
+    expect(getByTestId('date-1-3-1')).toHaveFocus()
+    await user.keyboard(kbd.ARROW_LEFT)
+    expect(getByTestId('date-0-2-29')).toHaveFocus()
+  })
+
+  it('handles minValue correctly using arrow keys', async () => {
+    const { getByTestId, user } = setup({
+      calendarProps: {
+        modelValue: calendarDateRange,
+        numberOfMonths: 2,
+        minValue: new CalendarDate(1979, 12, 15),
+      },
+    })
+
+    const firstDayOfMonth = getByTestId('date-0-1-1')
+    firstDayOfMonth.focus()
+    expect(firstDayOfMonth).toHaveFocus()
+
+    const heading = getByTestId('heading')
+    expect(heading).toHaveTextContent('January - February 1980')
+
+    await user.keyboard(kbd.ARROW_LEFT)
+    expect(getByTestId('date-0-12-31')).toHaveFocus()
+    await user.keyboard(kbd.ARROW_RIGHT)
+    expect(getByTestId('date-1-1-1')).toHaveFocus()
+  })
 })
diff --git a/packages/core/src/RangeCalendar/RangeCalendarCellTrigger.vue b/packages/core/src/RangeCalendar/RangeCalendarCellTrigger.vue
@@ -79,7 +79,7 @@ const isHighlighted = computed(() => rootContext.highlightedRange.value
   : false)
 
 const SELECTOR
-  = '[data-reka-calendar-cell-trigger]:not([data-disabled]):not([data-outside-view]):not([data-outside-visible-view])'
+  = '[data-reka-calendar-cell-trigger]:not([data-outside-view]):not([data-outside-visible-view])'
 
 const isDateToday = computed(() => {
   return isToday(props.day, getLocalTimeZone())
diff --git a/packages/core/src/RangeCalendar/story/_RangeCalendar.vue b/packages/core/src/RangeCalendar/story/_RangeCalendar.vue
@@ -41,7 +41,7 @@ function pagingFunc(date: DateValue, sign: -1 | 1) {
     </RangeCalendarHeader>
 
     <RangeCalendarGrid
-      v-for="month in grid"
+      v-for="(month, gridIndex) in grid"
       :key="month.value.toString()"
       :data-testid="`grid-${month.value.month}`"
     >
@@ -72,7 +72,7 @@ function pagingFunc(date: DateValue, sign: -1 | 1) {
             <RangeCalendarCellTrigger
               :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}`"
             />
           </RangeCalendarCell>
         </RangeCalendarGridRow>
