[pickers] Auto-closing strategy on Digital Clock

[joserodolfofreitas]

Summary

The auto-closing strategy on the Digital Clock is an interesting piece of usability.

Currently, the time picker component closes as soon as the meridian (AM/PM) is selected, regardless of whether the rest of the time has been chosen or not. This can lead to confusion for users who might still be in the process of setting the hour or minute.

I believe a more intuitive behavior would be for the time picker to remain open until the user has had a chance to select all parts/sections of the time (hour, minute, (seconds) and meridian). This would ensure that users have fully specified their intended time before the picker closes.

Here's an example of the current behavior:

Open the time picker
Select the meridian (AM/PM)
The time picker closes, even if the hour or minute has not been picked

And here's the proposed behavior:

Open the time picker
Select the hour
Select the minute
Select the meridian (AM/PM)
The time picker closes after all sections have been chosen.

I believe the proposed strategy also works fine with having an extra OK button to early closes the time picker, in case the user doesn't wish to select all sections of a time.

[oliviertassinari]

So this connects to points 2 and 3 in #8964.

Personally, I would remove this auto-close behavior anywhere there is more than one widget. So only keep it for the date picker. It feels borderline there, but since end-users click on the day with a given year and month in context, it's probably OK.

[dmaindolaivp]

Is there any way to disable the auto closing behavior on click of AM/PM for now?

[LukasTy]

Is there any way to disable the auto closing behavior on click of AM/PM for now?

Have you tried specifying closeOnSelect={false}? 🤔 https://mui.com/x/api/date-pickers/time-picker/#TimePicker-prop-closeOnSelect

[dmaindolaivp]

That helped! Thanks a lot!

[LukasTy]

@joserodolfofreitas I gave this one a bit more though and I'm not sure if we should be creating any additional view behavior "magic" as opposed to just going with a simple approach suggested by Olivier: https://github.com/mui/mui-x/issues/9310#issuecomment-1687115621 and also done by most other Time Pickers:

• native time input: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time
• AntD: https://ant.design/components/date-picker#components-date-picker-demo-switchable
• Element: https://element-plus.org/en-US/component/time-picker.html

[joserodolfofreitas]

That makes sense, @LukasTy. Let's simplify the flow and remove the "magic" behavior.