Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CalendarState selectDate does not work with uncontrolled calendar and isDateUnavailable #7779

Open
mzawka opened this issue Feb 17, 2025 · 0 comments

Comments

@mzawka
Copy link

mzawka commented Feb 17, 2025

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant