[pickers] When the IME is in hiragana, the input on the numeric keypad is wrong.

[kawa0102]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

I have a problem when using a Japanese keyboard.
And this defect was also confirmed by https://mui.com/x/react-date-pickers/date-picker/.
And this defect was also confirmed by https://mui.com/x/react-date-pickers/time-picker/.

I'm sorry,I explained it badly.

Steps:
1.Use the full/half-width key to set the IME to "ひらがな".

2.focus on the input field.(Make sure the IME is set to "あ.")

3.press "1" on the numeric keypad.(any number is fine.)

4."11" appears in the input field.

Current behavior 😯

I have a problem when using a Japanese keyboard.

When "1" is pressed on the numeric keypad, "1" should appear in the input field.
However, if you press "1" when the number is full-width, the input field will display "11".
After repeating the process many times, the input becomes incorrect.

When I pressed the numeric keypad in full-width characters, I confirmed that onChange was working three times.

React.Date.Picker.component.-.MUI.X.-.Google.Chrome.2023-06-26.14-13-50.mp4

Expected behavior 🤔

When I press a numeric keypad in full-width characters, I want the number I press to be displayed in the input field.

Example: Press "1" → "1" appears in the input field.

Context 🔦

In Japan, hiragana is often used, the display will frequently be incorrect if it is not changed.

Your environment 🌎

@mui/x-data-picker: v6.9.0

System:
OS: Windows 10 10.0.19042
Binaries:
Node: 16.17.1 - C:\Program Files\nodejs\node.EXE
Yarn: Not Found
npm: 8.15.0 - C:\Program Files\nodejs\npm.CMD
Browsers:
Chrome: 114.0.5735.134
Edge: Spartan (44.19041.1023.0), Chromium (114.0.1823.58)
npmPackages:
@emotion/react: ^11.11.1 => 11.11.1
@emotion/styled: ^11.11.0 => 11.11.0
@mui/base: 5.0.0-beta.4
@mui/core-downloads-tracker: 5.13.4
@mui/material: ^5.13.5 => 5.13.5
@mui/private-theming: 5.13.1
@mui/styled-engine: 5.13.2
@mui/system: 5.13.5
@mui/types: 7.2.4
@mui/utils: 5.13.1
@mui/x-date-pickers: ^6.9.0 => 6.9.0
@types/react: ^18.0.24 => 18.0.24
react: ^18.2.0 => 18.2.0
react-dom: ^18.2.0 => 18.2.0
typescript: ^4.8.4 => 4.8.4

Order ID or Support key 💳 (optional)

No response

[LukasTy]

@mui/explore Could anyone on Windows test this?
I'm having trouble installing a Japanese keyboard on a Windows emulator, and I couldn't reproduce the issue on MacOS. 🤷

[noraleonte]

I can't really reproduce the issue on Windows either 🤔

[kawa0102]

Windowsでも問題を実際に再現できません🤔

I'm sorry.
Some of the instructions on how to reproduce were incorrect and I have corrected them.

[kawa0102]

@mui/explore Could anyone on Windows test this? I'm having trouble installing a Japanese keyboard on a Windows emulator, and I couldn't reproduce the issue on MacOS. 🤷

I'm sorry.
Some of the instructions on how to reproduce were incorrect and I have corrected them.

[alexfauquette]

Maybe related to react having issues about IME facebook/react#3926

I'm not on windows, but maybe a way to reproduce it could be to look at the onChange triggered when you are pressing 1.

If you go there (a simple input field with an onChange) and with the problematic keyboard configuration could you select a section with your mouse (select 2 digits) and press 1.

Here is the result on my computer. Each time I press 1 the onChnage is called once with the selected section replaced by 1. In your case the onChange will probably be called twice or with extra character

Screencast.from.30-06-2023.13.22.47.mp4

[kawa0102]

Maybe related to react having issues about IME facebook/react#3926

I'm not on windows, but maybe a way to reproduce it could be to look at the onChange triggered when you are pressing 1.

If you go there (a simple input field with an onChange) and with the problematic keyboard configuration could you select a section with your mouse (select 2 digits) and press 1.

Here is the result on my computer. Each time I press 1 the onChnage is called once with the selected section replaced by 1. In your case the onChange will probably be called twice or with extra character

Screencast.from.30-06-2023.13.22.47.mp4

I checked and this is how it works.

festive-river-vmx7kc.-.CodeSandbox.-.Google.Chrome.2023-07-03.10-37-09.mp4

[alexfauquette]

Thanks for the recording. Sounds like pressing a key leads to 3 onChange. The first is correct, the second deletes everything after and the last add the digit at the end.

That sounds quite hard to handle 🤨

[kawa0102]

録音してくれてありがとう。キーを押すと 3 につながるように聞こえますonChange。1 つ目は正しく、2 つ目はそれ以降をすべて削除し、最後は最後に数字を追加します。

かなり扱いが難しそうですね🤨

When the IME is set to "Hiragana", the operation is strange even if I press anything other than the numeric keypad.
Even if onChange does not move, the value displayed will be wrong.
And the cursor position changes.

React.Date.Picker.component.-.MUI.X.-.Google.Chrome.2023-07-04.10-31-02.mp4

[alexfauquette]

@flaviendelangle From some investigation, it seems this behavior is named composition similar to what we do when we creating letters such as ë

It triggers a compositionStart and compositionEnd event. I wonder if it's similar issue that occurs on Android with windows keyboard. If yes it could be the opportunity to fix both with the same code base

The compositionend event is fired when a text composition system such as an input method editor completes or cancels the current composition session.
https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionend_event

A workaround found: facebook/react#3926 (comment)

[oliviertassinari]

It reminds me a bit of mui/material-ui#19499, but it's different here.