Chrome credit card autocomplete cuts off 3 last digits

[deflexor]

Hi, i have input field for credit card autoComplete="cc-number" and the mask for it mask={'9999 9999 9999 9999'}. Typing in number or pasting it works very well, but chrome has feature to autocomplete stored card information. And in this case 3 last digits of card number got missing. It looks like this (console.log in beforeMaskedStateChange):

currentstate.value -> nextstate.value
1234123412341234 -> 1234 1234 1234 1234
1234 1234 1234 1234 -> 1234 1234 1234 1234
1234 1234 1234 1234 -> 1234 1234 1234 1234
1234123412341234 -> 1234 1234 1234 1
1234 1234 1234 1 -> 1234 1234 1234 1
1234 1234 1234 1 -> 1234 1234 1234 1

So it looks like last digits got missing because of 3 spaces added, but why beforeMaskedStateChange is called so many times, and while pasting 1234123412341234 from clipboard it works just well.

[Marbos21]

+1

[Omarjcp]

i have same problem. Do you have any solution?

[wlannistamps]

I am running into TypeError: Cannot read properties of undefined (reading 'value') on the beforeMaskedStateChange() function, @deflexor would you mind pasting in what your console looks like? Might help me to understand how this is supposed to work more.