adobe / adobe/react-spectrum

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

Open
#4,750 1 comment 0 reactions 0 assignees View on GitHub
bug
Dominant language
TypeScript
Stars
15.9k
Forks
1.6k
Avg merge
3d 9m
Merged PRs (30d)
59

Description

# 🐛 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:**

https://github.com/adobe/react-spectrum/assets/117086272/eec404fa-39b5-4e86-aef8-fd7f574772df

**Case Two:**

https://github.com/adobe/react-spectrum/assets/117086272/011a12b0-8bed-4abf-be75-79c471aeff29

## 🤔 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](https://react-spectrum.adobe.com/react-aria/useDatePicker.html).

When selecting the selected date for the example date, the calendar closes [(Example)](https://react-spectrum.adobe.com/react-aria/useDatePicker.html#example)
When selecting the selected date for Timezones, the calendar does not close. [(Example)](https://react-spectrum.adobe.com/react-aria/useDatePicker.html#time-zones)

## 🔦 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](https://react-spectrum.adobe.com/react-aria/useDatePicker.html).

Can use the code sandbox in the documentation: ([(Date)](https://react-spectrum.adobe.com/react-aria/useDatePicker.html#example), [(DateTime)](https://react-spectrum.adobe.com/react-aria/useDatePicker.html#time-zones))

## 🌍 Your Environment

Issue occurs using your code sandbox,

**Our Environment:**
- React Vite - 4.0.4

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.