adobe / adobe/react-spectrum

Display DatePicker calendar popover when the date segments gain focus

Open
#7,006 2 comments 10 reactions 0 assignees View on GitHub
DatePicker enhancement
Dominant language
TypeScript
Stars
15.9k
Forks
1.6k
Avg merge
3d 9m
Merged PRs (30d)
59

Description

### Provide a general summary of the feature here

When using the RAC `DatePicker`, it would be handy to display the calendar as soon as the input segments gain focus. Something akin to the `menuTrigger="focus"` option on the [ComboBox component](https://react-spectrum.adobe.com/react-aria/ComboBox.html#menu-trigger-behavior).

Thank you, and please let me know if you'd like any more information.

### 🤔 Expected Behavior?

Taking inspiration from the ComboBox, how about a `calendarTrigger` prop with the following values:

- `manual` (default): Calendar only opens when the user presses the trigger button or uses the arrow keys.
- `focus`: Calendar opens when the user focuses the DateInput input.

### 😯 Current Behavior

The `DatePicker` calendar can only be opened by using the `Button`.

### 💁 Possible Solution

_No response_

### 🔦 Context

Our UX team have found that people sometimes miss the button (no matter how prominent) to open the calendar. They have taken inspiration from IBM's Carbon which opens on focus:

https://carbondesignsystem.com/components/date-picker/usage/

### 💻 Examples

_No response_

### 🧢 Your Company/Team

RS/Website

### 🕷 Tracking Issue

_No response_

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.