mui-x icon indicating copy to clipboard operation
mui-x copied to clipboard

Published 20 hours ago • verified publisher icon mui

[pickers] Use inputmode="tel"?

Open oliviertassinari opened this issue 3 years ago • 2 comments

Duplicates

  • [X] I have searched the existing issues

Latest version

  • [X] I have tested the latest version

Summary 💡

It seems that we could improve the UX on the DateField on mobile. Per https://css-tricks.com/everything-you-ever-wanted-to-know-about-inputmode/, I propose that we use inputmode="tel", which would look like this:

Screenshot 2022-09-19 at 15 11 14

Examples 🌈

https://mui.com/x/react-date-pickers/date-field/

Motivation 🔦

Better UX

Order ID 💳 (optional)

No response

oliviertassinari avatar Sep 19 '22 13:09 oliviertassinari

I wonder if we can switch this value dynamically without having weird behaviors. To get type="tel" for all sections except the full letter months.

EDIT: Seems to work great !

flaviendelangle avatar Sep 19 '22 16:09 flaviendelangle

https://user-images.githubusercontent.com/3309670/191065368-ae5b5279-47b2-4a83-bfec-ab11c35e5904.mp4

The full letter month editing does not work at all for now but the keyboard is coherent :laughing:

flaviendelangle avatar Sep 19 '22 16:09 flaviendelangle