adobe / adobe/react-spectrum

useCalendarState: setFocusedDate on month not in current range strange behavior

Open
#8,223 1 comment 0 reactions 0 assignees View on GitHub
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 creating custom month picker in calendar.
the problem is that i try to use single `pageBehavior` with not single month `visibleDuration`
When i set focused date month that is less than start in visible range, it becomes end one in range (timeframe moves to left)
When i set focused date month that is bigger than end in visible range, it becomes start one in range (timeframe moves to right)

the code i use is
```
const state = useCalendarState({
visibleDuration: { months: 2 },
pageBehavior: "single",
createCalendar,
});

const setMonth = useCallback((month) => {
state.setFocusedDate(state.focusedDate.set({ month }));
}, []);
```
demo video:

https://github.com/user-attachments/assets/010f4a63-6ef2-44fa-8712-7dce71c99153

### 🤔 Expected Behavior?

state.focusedDate.set({month: month}) always set start month of focused range

### 😯 Current Behavior

state.focusedDate.set({month: month}) behavior depends on the current focus range

### 💁 Possible Solution

There might be some bug in this settings combination:
`visibleMonths: 2` conflicts with `pageBehavior: "single"`

#7005 implementation would be a nice solution by the way

### 🔦 Context

_No response_

### 🖥️ Steps to Reproduce

https://codesandbox.io/p/sandbox/winter-dawn-k4phr9

try to change month first on 1 and then on 2 and back and forth
next try to change month first on 2 and then on 1 and back and forth
or try to change form 10 to 2 , and from 10 to 1

### Version

@react-stately/calendar 3.8.0, @internationalized/date: 3.8.0

### What browsers are you seeing the problem on?

Chrome

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

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.