meta.isTouched should omit zip field when not provided
Opened this issue · 1 comments
ddluc commented
Expected Behavior:
If no zip input is provided, it should be omitted from meta.touched
and meta.isTouched
.
Actual Behavior:
I setup react-payment-inputs
as follows:
const {
getCardNumberProps,
getExpiryDateProps,
getCVCProps,
wrapperProps,
getCardImageProps,
meta
} = usePaymentInputs();
return (
<>
<PaymentInputsWrapper {...wrapperProps} styles={style}>
<svg {...getCardImageProps({ images })} />
<input {...getCardNumberProps()} />
<input {...getExpiryDateProps()} />
<input {...getCVCProps()} />
</PaymentInputsWrapper>
{ meta.isTouched && meta.error && <span>Error: {meta.error}</span> }
</>
);
For the life of me, I couldn't understand why the error was not rendering. However, upon further inspection I found the following:
meta.isTouched
==> {cardNumber: true, expiryDate: true, cvc: true, zip: false}
Since I'm not providing a zip field, it's never touched and meta.touched
is always false
, making it impossible to render the error message. It seems likely that I could be doing something wrong, but I couldn't find a solution to this in the docs or by searching through closed issues.
chris-maheu commented
If it helps anyone out, a workaround would be to replace meta.isTouched
with the following:
(meta.touchedInputs.cardNumber && meta.erroredInputs.cardNumber) ||
(meta.touchedInputs.expiryDate && meta.erroredInputs.expiryDate) ||
(meta.touchedInputs.cvc && meta.erroredInputs.cvc)