[pickers] Support keyboard entry on mobile

[aleksey-lav]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/s/silly-mirzakhani-dhigkw?file=/demo.tsx:1142-1158&resolutionWidth=320&resolutionHeight=675

Nothing happens if we add the prop disableOpenPicker to the component

Current behavior 😯

MobileTimePicker is opening with standard Clock view for choosing the time even disableOpenPicker is present as true

Expected behavior 🤔

The expectation to have a possibility to set the time without Clock, by typing as in DesktopTimePicker

Context 🔦

No response

Your environment 🌎

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

[LukasTy]

Thank you for opening this issue!
Please refer to the API documentation or JSDoc in IDE for a prop description.
The current v5 release, has the following description for this prop:

Do not render open picker button (renders only text field with validation).

If you need to disable the component altogether, please refer to the disabled or readOnly props.

As for your mentioned "Expected behavior": we've had discussions about it, but I can't find any issue mentioning it, so I'll rename this one to better reflect the intent unless @flaviendelangle knows the issue we are talking about.

[LukasTy]

Also correctly handle the clearable behavior with the removal of readonly mobile Pickers.
#10842 (comment)

[LukasTy]

We agreed to unify the field/input behavior on Mobile Pickers allowing editing in them just like React Spectrum does.
This would be a behavioral breaking change, thus, we are keeping it for the next major.

Once that is done, having the disableOpenPicker prop no longer makes sense as similar modifications can be done through the field slot, thus, we should deprecate it.

[flaviendelangle]

as similar modifications can be done through the field slo

Or by just rendering the field component.
Something like:

<DateField InputProps={{ endAdorment: "I don't remember the name of the icon" }} />