Fix caret position for full-width characters

ddayguerrero commented 6 years ago

Fixes #20 and #35

Changes

Update card position only after formatting full-width to half-width characters in order to preserve its rightmost position.
Refactor credit card number and expiry number format unit tests as they were false-positive.

Walkthrough

Before

Credit Card Number Input Given that the user has selected a full-width character source input (e.g. Hiragana), the caret will eventually trail by 1 position as soon as the formatter is triggered.

Typing 4510 1523...:

Step	Key	Input Value (Formatted)	Caret Position
1			0
2	`４`	`4`	1
3	`５`	`45`	2
4	`１`	`451`	3
5	`０`	`4510`	4
6	`１`	`4510 1`	5 instead of 6
7	`５`	`4510 51` instead of `4510 15`	6 instead of 7

Expiry Number Input Similar behaviour for Expiration Input

Typing 222 to obtain 02 / 22:

After

Credit Card Number Input Typing 4510 1523... caret is now at the correct position

Expiry Number Input Typing 62018 to obtain 06 / 2018

Additional Information

Covers any input sources with full-width numbers
Tested with latest Chrome, Firefox, and Safari

jondavidjohn commented 6 years ago

@ddayguerrero This looks awesome, thank you!

Do you mind resetting the diff to only the changes to src/payform.coffee?

ddayguerrero commented 6 years ago

My pleasure, will do! 😄

jondavidjohn commented 6 years ago

Could you also reset package-lock.json?

ddayguerrero commented 6 years ago

Seems like there's an issue between Node 6 and CoffeeScript:

$ npm install 
npm WARN deprecated coffee-script@1.9.3: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
npm ERR! registry error parsing json

jondavidjohn / payform