[fields] Can't press Backspace on Android

[flaviendelangle]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example:

Steps:

1. Take any Android device
2. Go to https://next.mui.com/x/react-date-pickers/date-field/#customize-the-date-format
3. Select the month section
4. Press the Backspace key

Current behavior 😯

It should clean the section without adding the placeholder back

Screen.Recording.2023-02-05.at.22.09.16.mov

Expected behavior 🤔

It should render MM

Context 🔦

The Backspace logic is applied by the onKeyDown event handler which does not work on Android.
We should move it on the onChange event handler.

But to support Android it will be harder.
Indeed, on Android, we usually have 2 calls to onChange : one removing the selecting value and then one applying the key pressed to the previously selected area (see the JSDoc of tempValueStrAndroid in our codebase for more details).
When pressing Backspace, this callback is only called once.

During the 1st call to onChange, we can't differentiate if the selected value is cleaned because Backspace has been pressed or just to prepare for the insertion of another value.
The only was I see is to put a setTimeout saying that if after Xms the onChange was not called again, then we apply the placeholder.
There will probably be a flickering but I don't have a better solution.

Your environment 🌎

No response

Order ID 💳 (optional)

No response