Selecting a selected date for a calendar using DateTime has a different behaviour to a Date.

[FredsW47]

🐛 Bug Report

When selecting a date using useDatePicker, selecting the already selected date hides the calendar, however this behaviour is different for a DateTime. When selecting the selected date with DateTime this does not hide the calendar. Therefore no interaction is recorded.

The affect: When using a placeholder date in the calendar (for example highlighting todays date when the user first opens the calendar) means the user can not select that date and therefore the text field will not update.

Case One:

Screen.Recording.2023-07-06.at.10.38.15.mov

Case Two:

Screen.Recording.2023-07-06.at.10.35.38.mov

🤔 Expected Behavior

The behaviour when using a DateTime should be the same as when using a Date.

• The calendar closes if a user selects the selected date when using DateTime.

😯 Current Behavior

The behaviour can be seen on the React Aria documentation.

When selecting the selected date for the example date, the calendar closes (Example)
When selecting the selected date for Timezones, the calendar does not close. (Example)

🔦 Context

• Having two different behaviours for the user is not ideal.
• When using a placeholder date in the calendar (for example highlighting todays date when the user first opens the calendar) means the user can not select that date and therefore the text field will not update.

We have implemented both calendars within our environment and we see the same behaviour occur.

💻 Code Sample

The behaviour can be seen on the React Aria documentation.

Can use the code sandbox in the documentation: ((Date), (DateTime))

🌍 Your Environment

Issue occurs using your code sandbox,

Our Environment:

• React Vite - 4.0.4

[LFDanLu]

Did some digging, this seems to happen specifically for DatePickers that are using ZonedDateTimes. The code that closes the Popover on date selection relies on being called as the onChange from the setControlledValue here. For CalendarDates, the else part of the if statement is triggered and the newValue is always different from the current value even when the dates are the same since they are different objects and thus passes the check here. For CalendarDateTime, we trigger this part of the if statement, and .set() always returns a new CalendarDateTime due to this .copy call.

However, for a ZonedDateTime we actually return the same object via .set(), resulting in useControlledState deciding not to call onChange hence why the popover doesn't close. Perhaps this useCalendarState line can be changed to setControlledValue(value.copy().set(newValue)); or we could update ZonedDateTime's .set to actually always return a new object via .copy(). Haven't tested this thoroughly so not sure of the ramifications