braintree / restricted-input

Restrict <input>s to certain valid characters (e.g. formatting phone or card numbers)
https://braintree.github.io/restricted-input/
MIT License
68 stars 25 forks source link

fix: correct input formatting in Desktop Safari with custom input source #90

Closed crookedneighbor closed 3 years ago

crookedneighbor commented 3 years ago

To reproduce the issue: On Mac OS, change the keyboard settings to add Japanese. From the options, choose Romaji. When entering keystrokes into a restricted input, the keydown, input and keyup events fire, but keypress is missing.

According to MDN, keypress is deprecated: https://developer.mozilla.org/en-US/docs/Web/API/Document/keypress_event

So we can simply move the keypress logic to the beginning of the input event. (putting it at the end of keydown adds some funky visual behavior as things are unformatted and reformatted quickly)