Open danielppereira opened 4 years ago
try this one
<MaskedTextInput
type="text"
autocomplete="cc-exp"
placeholder="MM/YY"
beforeMaskedStateChange={({ currentState, nextState }) => {
if (currentState && currentState.value.length === 7) {
const [mm, year] = currentState.value.split('/');
return {
...currentState,
value: `${mm}/${year.substr(2)}`,
};
}
return nextState;
}}
maskPlaceholder="MM/YY"
mask={[/[0-1]/, /[0-9]/, '/', /[2-3]/, /[0-9]/]}
/>
I'm using
react-input-mask
in a payment form. The 'expiration date' input has the maskMM/YY
.Chrome saves credit card expiration year info in 4 digits format on it's wallet. When the user tries to use the Chrome autofill in any credit card field, choosing one card on his wallet, it set the first two digits of the year in the field.
ie: for the expiration date
31/2021
, Chrome sets31/20
in the field.To solve this problem, I have to set
maxlength="5"
attribute in the 'expiration date' field. With that, I can get the last 2 digits of the year, and not the first 2 digits. (ie.: from the example above, I get31/21
)It's all going well with the field validation and autocomplete funcionality, but when I run my tests with Jest,
react-input-mask
displays a warning:Warning: react-input-mask: maxLength property shouldn't be passed to the masked input. It breaks masking and unnecessary because length is limited by the mask length.
How can I handle this credit card expiration date autofill problem without having this warning?