DateRangePicker: Focusing Next/Previous year with visibleDuration 2 jumps one month back/forward

[jdolinski1]

Provide a general summary of the issue here

I am implementing DateRangePicker using useRangeCalendar hook. I have two double-arrow buttons , which should control the current focused year. Upon clicking the buttons, i am calling state.focusPreviousSection(true), which works almost correctly. I expect it to always just change the year but sometimes (see video) it changes the focused month by one back/forward.

My other settings:

    const state = useRangeCalendarState({
        ...props,
        locale: locale,
        createCalendar: createCalendar,
        firstDayOfWeek: "mon",
        visibleDuration: { months: 2 },
        pageBehavior: "single", // When clicking prev/next month buttons, the calendar will move by 1 month
    })

Functions called when clicking arrow buttons.

    const setMonthBack = () => {
        state.focusPreviousPage()
    }

    const setMonthForward = () => {
        state.focusNextPage()
    }

    const setYearBack = () => {
        state.focusPreviousSection(true)
    }

    const setYearForward = () => {
        state.focusNextSection(true)
    }

Buttons for focusing the next/previous month/year

    <button type="button" onClick={setYearBack}>
        <ChevronDoubleLeft className="h-6 w-6" />
    </button>
    <button type="button" onClick={setMonthBack}>
        <ChevronLeftIcon className="h-6 w-6" />
    </button>

    <button type="button" onClick={setMonthForward}>
        <ChevronRightIcon className="h-6 w-6" />
    </button>
    <button type="button" onClick={setYearForward}>
        <ChevronDoubleRight className="h-6 w-6" />
    </button>

Video:

Screen.Recording.2025-01-21.at.11.55.36.mov

🤔 Expected Behavior?

I expect to just change the year and not focused month.

😯 Current Behavior

Sometimes it changes also focused month.

💁 Possible Solution

There might be some bug in this settings combination:

        visibleDuration: { months: 2 },
        pageBehavior: "single",

🔦 Context

No response

🖥️ Steps to Reproduce

Use useRangeCalendarState with this properties:

    const state = useRangeCalendarState({
        ...props,
        locale: locale,
        createCalendar: createCalendar,
        firstDayOfWeek: "mon",
        visibleDuration: { months: 2 },
        pageBehavior: "single", // When clicking prev/next month buttons, the calendar will move by 1 month
    })

and call state.focusPreviousSection(true) or state.focusNextSection(true)

(i tried to change the year also with state.setFocusedDate(state.focusedDate.add({ years: -1 })) with same results).

Version

react-aria: "3.37.0"

What browsers are you seeing the problem on?

Firefox

If other, please specify.

No response

What operating system are you using?

MacOS 14.4.1 (23E224)

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response