1688206 - [DE][lidl.de] Credit Card Autofill dropdown is not toggled for Name and Expiry date fields

Status: NEW

(Toolkit :: Form Autofill, defect, P3)

Description

[Timea Cernea [:tbabos][inactive]]

Attachment: Lidl.issue.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 DE
• extensions.formautofill.supportedCountries DE
• 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 lidl.de
3. Click on the each field and check id the credit card autofill dropdown is displayed

Expected Results:
Autofill dropdown should be displayed for each eligible field.

Actual Results:
Autofill dropdown is not displayed for Cardholder Name nor Expiry Date.
This also affects capture, only the CC number is captured.

Notes:

• Severity: S3 since this may be a site issue, Chrome also does not detect the Cardholder Name.
• Reproducible on Chrome?: Partially (does not detect cardholder name, does not offer clear functionality for Exp Month)
• 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]]

There are a few issues on this site:

This is another case of nested forms/iframes causing our field searching logic to fail. When we attempt to get the form handler for the cardholder name, we try to find the root element that encapsulates the cardholder name (via findRootForField). In this instance, aField has a form associated with it and so we return this form element. If I hover over this form in the inspector, visually it shows the entire payment form implying that all the cc input fields are part of this form. However, this isn't the case...and the cardholder name input ends up being its own root element. Because this field is associated by itself, it will fail the isValidSection() check when trying to create a credit card section and thus prevent future popups from appearing on that element.

As for why the credit card number field works, this is because there are hidden expiry date and cardholder name fields in this section. Since this section includes a cc number and a name or expiry date, this makes it a valid section and so it's eligible for autofill and allows the autocomplete popup to appear. We end up filling into these hidden fields which is why an incorrect expiry date will always appear, due to some site syncing logic with those hidden fields. Not sure why the card holder name field doesn't get synced up, because the hidden name field is filled with the correct value.

As for why the expiry date field doesn't work, it's the same case as the cardholder name field. When we try to make a form handler for the expiry date, we end up using a form that contains the expiry date field and this "shiftTabField" which doesn't have an autocomplete attribute that we need in this case. Since the form only contains the expiry date field, we fail to create a valid credit card section since we don't have a cc-number associated in this form handler.

I wonder why we aren't correctly constructing the form attribute for these elements...I suppose it has something to do with the iframes on the page, but I'm not 100% sure. When I try to find all the inputs of the form, the only thing the querySelectorAll is returning is the first input, the cardholder name.

At any rate, this appears to be a site specific issue and will require reaching out to Lidl to see if they will fix it. I'm not sure if these issues are because of Lidl's implementation or because of Adyen's (the payment platform) implementation. Since the bug involves searching fields and nested iframes and what not, I'm going to block Bug 1730016.