adobe / adobe/react-spectrum

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

Open
#7,645 0 comments 0 reactions 0 assignees View on GitHub
DatePicker needs investigation
Dominant language
TypeScript
Stars
15.9k
Forks
1.6k
Avg merge
3d 9m
Merged PRs (30d)
59

Description

### 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

```










```

Video:

https://github.com/user-attachments/assets/19682ac9-c4c7-4120-824d-fe305784a0f9

### 🤔 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_

Contributor guide

Open the contributing guide

Research direction

Start at the useRangeCalendarState configuration and the focusPreviousSection/focusNextSection entry points described in the issue. Reproduce with visibleDuration set to two months and pageBehavior set to single, then verify that changing the year leaves the focused month unchanged in both directions.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.