useCalendarState: setFocusedDate on month not in current range strange behavior
- 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
Assessment
This issue has not been assessed yet.