1688618 - [FR][manomano.fr] Multiple issue for CC autofill

Status: NEW

(Toolkit :: Form Autofill, defect, P3)

Description

[Timea Cernea [:tbabos][inactive]]

Attachment: manomano.fr.mov

Affected Versions:

• All latest Firefox versions using force enable (Nightly 86, Beta RC 85.0, Release 84.0.2)

Tested on:

• MacOS 10.15
• Windows 10 x64

Prerequisites:

• browser.search.region FR
• extensions.formautofill.supportedCountries FR
• download latest Firefox Nightly with region locale (switch extensions.formautofill.available to "on" for testing non-Nightly builds)

Steps to Reproduce:

1. Launch Firefox
2. Go to and reach the payment form for manomano.fr
3. Choose to fill in any CC entry from any field, check out for preview
4. Click on the autofilled fields
5. Clear the expiry date field and use again autofill for it

Expected Results:

1. Autofill preview should be correctly displayed for each field.
2. All the autofilled fields should have the "Clear Form" option
3. Expiry date should be properly autofilled with the valid format

Actual Results:

1. Autofill preview appears only for the focused field
2. Clear Form appears only for the field from which the user auotiflled
3. Using autofill from the expiry date field will incorrectly autofill the format

Notes:

• Severity: S3 - given Chrome has worse behavior
• Reproducible on Chrome?: Yes - several other issues on Chrome
• Regression-range: reproducible on all latest versions, this site was never tested before, can look for regression-range if need be

Comment 1

[Tim Giles [:tgiles]]

This is another case of multiple duplicate hidden fields and syncing logic between the visible fields and the hidden field as well as multiple form elements on the page. If selecting a credit card option from the card number section, we end up filling the cc expiry month and year into hidden fields and then the website takes these values and places them in the visible cc expiry field. When the site itself copies the values from the hidden fields, it applies an :autofill highlight (which is slightly different than our autofill highlight). Due to these duplicate hidden fields and separate form elements, we won't clear the visible form as expected since there's no relationship between the card number field and the expiration date field. So whichever input you use to autocomplete your cc information is the same one you'll have to use to clear the form, but the clear will only work on that particular input field.

We autocomplete the expiry date incorrectly if you choose to autocomplete from the expiration field. This is because there is no placeholder associated with the expiry date input. There is a label that visually appears in the field "Expiration MM/AA" but the actual expiry input is located inside of an iframe that doesn't have access to the previously mentioned label. Since we have no hints to guide our credit card expiry format, we use the default which is YYYY-MM and this value is incorrectly truncated and then fails the cc expiry validation. I'm guessing the site itself has some internal syncing logic that deals with this case when you autocomplete from the card number field.

The lingering highlight remains due to an inline style that is applied by the site on certain forms of interaction. Their source is minified so it's pretty hard to follow but something is going on with these divs that have a class that contains "StripeElement--webkit-autofill". Maybe there's a corner case where if an element is unfocused and receives a "change" event, the highlight doesn't react, not 100% sure.

Not an exact dupe of Bug 1682161, but a lot of the same issues. This ends up blocking Bug 1730016 as well because of how we're searching for related elements.