Inconsistency between an element's input value and Input Method Editor (IME) editor when using full-width to half-width character mapping on desktop Safari. This feature works fine on latest Chrome and Firefox.
3- Begin typing digits in any of the fields restricted to numeric input.
4- Notice how the IME value is different from the target's input value (i.e. 5338 vs 5535 3353 38)
Small GIF demonstrating the inconsistency between the input field and the value in IME:
Discussion
The following table showcases all event types raised when typing 4242 across all major browsers (see W3C's offical key event viewer):
From top to bottom: Firefox, Opera, Safari, and Chrome
After debugging and inspecting events, Safari handles keyboard events differently while typing with Japanese IME. While the browser surfaces insertCompositionTextinputType, we notice that the input field value changes despite the fact that isComposing's value is false.
What is the issue?
Inconsistency between an element's input value and Input Method Editor (IME) editor when using full-width to half-width character mapping on desktop Safari. This feature works fine on latest Chrome and Firefox.
How to reproduce the issue?
1- Go on Payform's demo page on desktop Safari
2- Select Hiragana as your input source name.
3- Begin typing digits in any of the fields restricted to numeric input.
4- Notice how the IME value is different from the target's input value (i.e. 5338 vs 5535 3353 38)
Small GIF demonstrating the inconsistency between the input field and the value in IME:![Japanese IME bug](https://cl.ly/3v0H3A3w2I14/Screen%20Recording%202018-07-11%20at%2001.22%20PM.gif)
Discussion
The following table showcases all event types raised when typing
4242
across all major browsers (see W3C's offical key event viewer):From top to bottom: Firefox, Opera, Safari, and Chrome![ui-keyboard-events-jpn-ime](https://user-images.githubusercontent.com/6437556/42597589-3d6d7a08-8527-11e8-8870-60875033c334.png)
After debugging and inspecting events, Safari handles keyboard events differently while typing with Japanese IME. While the browser surfaces
insertCompositionText
inputType, we notice that the input field value changes despite the fact that isComposing's value is false.