[pickers] Improve and simplify the auto-closing strategy of pickers with a value selected in several steps

[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: #9310 (comment) 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.

[arthurbalduini]

I discussed this with @LukasTy, and it was agreed that this issue would be better addressed in the next major release, since the solution involves changing the default value of the closeOnSelect prop, as well as modifying the default behavior of some components. Although it might be safe to include this in a minor version, since we're nearing the next major release, we can ensure even greater safety by postponing it and avoiding any unexpected regressions in the final days of v7.
The PR linked to the issue remains open for additional changes and reviews.
@joserodolfofreitas let us know if you have any more inputs ! 🙂