Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

meta.isTouched should omit zip field when not provided #43

Open
ddluc opened this issue Jul 27, 2020 · 1 comment
Open

meta.isTouched should omit zip field when not provided #43

ddluc opened this issue Jul 27, 2020 · 1 comment

Comments

@ddluc
Copy link

ddluc commented Jul 27, 2020

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.

@ddluc ddluc changed the title isTouched meta isTouched should omit zip field when not provided Jul 27, 2020
@ddluc ddluc changed the title meta isTouched should omit zip field when not provided meta.isTouched should omit zip field when not provided Jul 27, 2020
@chris-maheu
Copy link

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)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants