medipass / react-payment-inputs

A React Hook & Container to help with payment card input fields.
https://medipass.github.io/react-payment-inputs
342 stars 62 forks source link

Errors not shown when tabbing to inputs outside this library #25

Open cipater opened 4 years ago

cipater commented 4 years ago

What's the rational for this check? https://github.com/medipass/react-payment-inputs/blob/687df514f2ed406b8d24ec2f9537c110f1db694c/src/usePaymentInputs.js#L57-L61

Because the net effect is that validation errors aren't displayed when tabbing to other fields within the form that aren't part of this library. Is that intentional?

Since cardNumber isn't valid or invalid based on the validity of the other fields, why not show errors (if any) as soon as it looses focus?

Or, at a minimum to maintain a similar behavior, how about just checking to see if library fields are active?

if (
  document.activeElement !== cardNumberField.current &&
  document.activeElement !== expiryDateField.current &&
  document.activeElement !== cvcField.current &&
  document.activeElement !== zipField.current
) {
  setIsTouched(true);
} else if (value === false) {
  setIsTouched(false);
}