[DateField] LL format allows for removing MMMM placeholder resulting in issues when filling in a date.

[mhollink]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example:
Issue also exists on docs page https://mui.com/x/react-date-pickers/date-field/#customize-the-date-format in the LL format.

Steps:

1. Open https://mui.com/x/react-date-pickers/date-field/#customize-the-date-format on a mobile android device
2. Focus on input with labelled with 'full letter month'
3. Hit backspace to remove 'April' from the input
4. Hit backspace again.
5. Click elsewhere on the page
6. Put focus back in input labelled with 'full letter month'
7. Fill the input value with a month

Current behavior 😯

In the current behaviour (on mobile) the pre-filed MMMM value gets removed when hitting the hitting the backspace key on the keyboard when there is no value.

Expected behavior 🤔

The initial value of MMMM should stay in place when hitting the delete or backspace key when there is no other value.

Context 🔦

In our application we are using the DateField component as part of a registration form. We switched away from the browser native DatePicker as this was confusing to use and required a lot of scrolling for elderly users.

We are using the DateField in combination with the LocalizationProvider (using AdapterDayjs). We went for the LL format to stay as close to the date format our foreign users are familiar with. We opted for a full letter month as this reduces more confusion about date format.

When we were testing the DateField in our application we noticed in date formats where month is in the middle (nl, de, fr, es, etc.) removing the Month part completely results in a problem where you cannot fill it back in. This would require a page refresh the state for the rest of the form.

Your environment 🌎

npx @mui/envinfo

  System:
    OS: Linux 5.15 Ubuntu 22.04.3 LTS 22.04.3 LTS (Jammy Jellyfish)
  Binaries:
    Node: 20.5.1 - ~/.nvm/versions/node/v20.5.1/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v20.5.1/bin/yarn
    npm: 9.8.0 - ~/.nvm/versions/node/v20.5.1/bin/npm
  Browsers:
    Chrome on Android: v117.0.5938.60 (Android 13)
  npmPackages:
    @emotion/react: ^11.11.1 => 11.11.1 
    @emotion/styled: ^11.11.0 => 11.11.0 
    @mui/base:  5.0.0-beta.16 
    @mui/core-downloads-tracker:  5.14.10 
    @mui/material: ^5.14.10 => 5.14.10 
    @mui/private-theming:  5.14.10 
    @mui/styled-engine:  5.14.10 
    @mui/system:  5.14.10 
    @mui/types:  7.2.4 
    @mui/utils:  5.14.10 
    @mui/x-date-pickers: ^6.14.0 => 6.14.0 
    @types/react: ^18.0.33 => 18.0.33 
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0 
    typescript: ^4.9.5 => 4.9.5 

Order ID or Support key 💳 (optional)

No response

[alexfauquette]

This one is a surprising issue. The only way I found to reproduce the issue is to do remote debuggung with my android phone

For a reason I ignore, in your specific case, android dispatch an event with event.key: "Unidentified" and it's the only section in which it's done. For day and years, or for the other field, we correctly receive an event.key: "Backspace"

undefinedevenet.mp4

@flaviendelangle Do you see a reason why it could differ from a section to another?

[flaviendelangle]

For a reason I ignore, in your specific case, android dispatch an event with event.key: "Unidentified" and it's the only section in which it's done. For day and years, or for the other field, we correctly receive an event.key: "Backspace"

That's weird!
event.key: "Unidentified" should occur when pressing a letter or a digit, not when pressing Backspace...