adobe
Display DatePicker calendar popover when the date segments gain focus
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.
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
How would keyboard navigation work if this were implemented? I can see two options:
- Focus stays on the date segment. Pressing the up/down arrow keys adjusts that segment as it does when the calendar is closed. In this case, the calendar popover would need to be non-modal.
- Focus moves into the calendar. Pressing the arrow keys navigates the dates in the calendar.
I think both of these are kinda confusing. In ComboBox, focus stays on the input, but the arrow keys operate the attached listbox popover. But in a DatePicker, the arrow keys have different functions depending on whether the date segment or calendar cell is focused. So it would be confusing to make both appear focused at the same time.
Did you have a suggestion on how this would work?
As a suggestion that works for us and takes accessibility into account, I believe adopting an approach similar to Carbon’s would be best for users. In terms of keyboard interactions:
- Pressing Up/Down would move focus from the segment to the calendar.
- Pressing Left/Right would navigate across segments.
This change would remove the ability to increment or decrement numbers using the arrow keys. However, since the inputs already restrict entries to numeric values, supporting direct access to the calendar seems like a reasonable trade-off that would improve the overall user experience.
GOV.UK has an interesting discussion noting that “some users with dyscalculia may struggle to convert month names into numbers.” Enabling immediate access to the calendar would help accommodate those users and enhance accessibility.
