`CalendarState` `selectDate` does not work with uncontrolled calendar and `isDateUnavailable`

[mzawka]

Provide a general summary of the issue here

I'm building a Calendar component using hooks and encountered an issue with implementing a custom "Select today" button. The button should return user to the page with current month and select today's date.

I'm using setFocusedDate and selectDate methods of CalendarState to achieve that. It mostly works well, however in one specific case selectDate doesn't work and I don't know why. It happens when I use an uncontrolled calendar with isDateUnavailable prop, go to the next month, select any date, then press "Select today" - the previous date stays selected. Interestingly, if I go to the past month and repeat the same - today's date gets selected. The problem appears only when selectDate is called when future month is displayed.

I've prepared a minimal example where you can observe both incorrect and correct behavior.

🤔 Expected Behavior?

Today's date is selected no matter which month is currently displayed.

😯 Current Behavior

Calendar returns to the current month (state.setFocusedDate works), but previous date is still selected (state.selectDate doesn't work).

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

1. Visit https://codesandbox.io/p/sandbox/jkckmm
2. Use the first Calendar (with isDateUnavailable)
3. Go to the next month
4. Select any date
5. Press "Select today"

Behavior observed: previous date stays selected (state.selectDate(todayDate) doesn't work).

You can repeat the same steps with the second calendar (without isDateUnavailable) where the behavior is correct.

Version

"react-aria": "3.37.0", "react-stately": "3.35.0", "@internationalized/date": "3.7.0"

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

macOS 15.3

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[librz]

I came across the same issue.

In my case, if calendar state is uncontrolled & there is isDateUnavailable setup, selectDate cannot select dates in past months. The solution is opt to controlled usage.

[snowystinger]

I see the same behaviour with our React Aria Components as well https://stackblitz.com/edit/mlsrncer?file=src%2FExample.tsx