Google Autofill Credit Card Not Being Validated Properly

[danhiel]

Please verify the version of auro-input you have installed

2.15.0

Please describe the bug

1. Go to any auro-input payment forms with Credit Card in it. In this case, I used https://mow-qa.alaskaair.com/preorderfood
2. Click on the auro-input
3. Use the autofill payment as suggested by Google
4. Voila -- The credit card auro input is not formatted and is being told the number is invalid

Reproducing the error on the docsite

This issue cannot be reproduced on the Auro docsite

Expected behavior

Once autofilled, the credit card number should format and it should be valid.

What browsers are you seeing the problem on?

Chrome Also tested on Safari, iPhone, Android

Additional context

GIF:

Code:

<auro-input
        key="edit"
        name="cardNumber"
        validateOnInput
        bordered
        required
        icon
        type="credit-card"
        value={props.state.cardNumber}
        onInput={(e: ChangeEvent<HTMLInputElement>) => props.onChange({ cardNumber: e.target.value })}
      >
        <slot slot="label">Card number</slot>
        <slot slot="helptext">Valid credit card numbers must include 16 digits (15 for Amex).</slot>
</auro-input>

Story under Inflight team: AB#948160

[danhiel]

Upon further investigation with @jason-capsule42,

We discovered that there are actually two bugs.

• validateoninput is not working properly with type="card"
• cleavejs is not formatting the autofill value properly

Let me know if you want me to break this up into two different issues or if we can just track under this issue.

[blackfalcon]

@danhiel I believe that @jason-capsule42 is digging into this one but I believe that it makes sense as it stands to keep this as the one issue to move forward on. Keep eyes on this issue, as things change we will make updates here.

[blackfalcon]

I added @Patrick-Daly-AA back to this issue to keep him aware of any changes to this issue until it has been officially prepared for work within a sprint.

[Patrick-Daly-AA]

Best guess on a root cause from the team is that Autofill does not trigger a change event which would run validation and cleavejs. Will need to investigate options to address this.