search

mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
3.91k stars 1.19k forks source link

[pickers] add option to open calendar popover when text field is selected #13446

Open sodehl opened 2 weeks ago

sodehl commented 2 weeks ago

Summary

The DateRangePicker opens the calendar popover automatically when one of the text fields is selected. It would be great to have the same behavior for the DatePicker component.

Examples

No response

Motivation

In our user tests, we found that some users do not realize they need to click the icon in the text field to open the calendar popover. They expect the popover to open automatically when the text field is selected, similar to the behavior of the DateRangePicker.

Search keywords: Date Field, Calendar Popover Order ID: 68930

michelengelen commented 2 weeks ago

Hey @sodehl and thanks for raising this issue. I do agree that we should at least allow for this to be opt-in. Its a slight discrepancy between the products.

@LukasTy I could not find a very effective way of providing a workaround. Do you have something available from the top of your head?

LukasTy commented 2 weeks ago

Hello @sodehl, FWIW, the behavior on the DateRangePicker is somewhat of a discrepancy, if you compare it to the native date input. We were discussing aligning this behavior, but not in the suggested way, instead, the Date Range Picker (currently uses a tooltip behavior) would behave more like a regular Picker (dialog behavior).

One could say that opening the Picker view could also be triggered when pressing Space on the input/field, just like on the native date input. WDYT @sodehl, would it be a good middle-ground in your view? 🤔

sodehl commented 2 weeks ago

@LukasTy opening the picker view with the space key would be a great improvement, especially for more experienced users who know the shortcut. However, we discovered that our users expect the picker view to open when they select the text field. So, I think introducing a keyboard shortcut does not solve the problem. BTW: The native date input in Safari opens the calendar popover automatically when the input is selected. Here, the native date input tends to be more like the current behavior of the DateRangePicker.

LukasTy commented 2 weeks ago

@sodehl thank you for your comment and sharing the experience. 👍 We'll discuss this proposal among the team, but I'll say that Safari has the worst example of native date input in regards to a11y, they do not support the calendar/dialog behavior at all. 🙈 Given this fact, I would not like to treat this exception as a role model.