medipass/react-payment-inputs

Strange cursor behavior when changing value in card number and expiration date fields

Opened this issue · 1 comments

First of all, thank you so much for this library! We're integrating it with Formik and it helped us a lot.

I was comparing behavior of this library and Stripe forms and noticed 2 differences, which Stripe handles (arguably) better.

The first issue is that when you have an expiration month that starts with 0 (e.g. 02) and you put your cursor right after 0, you can delete 0 and replace it with any character, not just 0. Stripe does not allow to delete 0 in such case - if you press backspace, it will just move the cursor before 0.

The second issue is that when you have a card number like 4242 4242 4242 4242 and you put the cursor right after the first 4 digit in the last group (4242 4242 4242 4|242) and you press backspace, it will keep the cursor in place and shift digits on the right of the cursor to the left, e.g. 4242 4242 4242 2|42, 4242 4242 4242 4|2, 4242 4242 4242 2|. Stripe will simply delete the digit and put your cursor at the end of the previous group , e.g. 4242 4242 4242| 242.

I can try to come up with a PR, but I'm not sure if/when I'll have time to do it :/

jxom commented

Fair call! I'll label this as a bug and fix it when I find time!