jondavidjohn / payform

:credit_card: A library for building credit card forms, validating inputs, and formatting numbers.
https://jondavidjohn.github.io/payform/
Other
427 stars 81 forks source link

Inconsistent full-width to half-width mapping in Safari #38

Closed ddayguerrero closed 6 years ago

ddayguerrero commented 6 years ago

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

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

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.

jondavidjohn commented 6 years ago

Fixed @ 1.2.5