1740001 - [UK][asda.com] The autofilled Exp Month and Year dropdowns are no highlighted nor reset upon Clear Form option

Status: VERIFIED FIXED

(Toolkit :: Form Autofill, defect, P2)

Description

[Timea Cernea [:tbabos][inactive]]

Affected Versions:
Nightly 96.0a1, Beta 95, Release 94

Tested on:
MacOS 10.15

Prerequisites:
browser.search.region UK
extensions.formautofill.supportedCountries UK
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 global.direct.asda.com
3. Using the autofill feature, select 1 saved CC entry
4. Click on the Card Number field and select the Clear Form option from the dropdown

Expected Results:

1. The Expiration dates dropdowns should be highlighted.
2. The "Clear Form" option toggled from the CC number field should reset the year and month.

Actual Results:
The Expiration dates dropdowns are not highlighted.
The Expiration Dates dropdowns are not reset.

Notes:

Severity: S4
Reproducible on Chrome?: N/A - Chrome is missing the Clear Form option for this form and also doesn't highlight the dropdowns
Doesn't seem to be a regression, we have multiple long-standing issues where we don't reset the expiration date dropdowns nor highlight them

Comment 1

[Alin Ilea, Desktop QA]

Attachment: 2022-02-02_15h47_45.mp4

Hi,
I just re-tested the issue in the latest Nightly UK build 98.0a1 (2022-02-01) and both issues described are still there. The credit card number and expiry date fields are not highlighted and the expiry date dropdowns are not reset upon the "Clear Form" option.

Comment 2

[Tim Giles [:tgiles]]

Part of the issue is that there are no labels associated with the expiry date fields so we don't recognize these fields as being valid cc-exp-month and cc-exp-year fields. This can be fixed by adding "month" to the "cc-exp-month" heuristic and adding "year" to the "cc-exp-year" heuristic. After addressing this issue, the expiry month fills correctly but the expiry year attempts to fill the full expiry year which is invalid on this site.

The second issue of expiry year not filling correctly is due to the fact that we don't have a creditCardExpYearTransformer function in our FormAutofillHandler code. So what currently happens is that we check if the form has a "cc-exp" field and we see that doesn't exist so we don't do any kind of transformation yet. Next we check if the form has a "cc-exp-month" field and then transform based on the placeholder, say if our stored exp month was "1" but the field expects "01". We don't have a case that then checks for a "cc-exp-year" field and then transforms based on the placeholder. We essentially have the exp-year transform logic in the creditCardExpDateTransformer, so we could refactor the common steps into some helper functions so these credit card transformers can be a few LOC less.

Comment 3

[Tim Giles [:tgiles]]

So it looks like ASDA has a couple different sites used for payment processing. Comment #2 is about direct.asda.com and the expiry date issue there. I'm still trying to figure out how to hit the other site shown in Comment #1, global.direct.asda.com

Comment 4

[Tim Giles [:tgiles]]

Direct.asda.com is using background-image: none and background-color: #fff to hide the autofill styles. I'm assuming global.direct.asda.com is doing the same thing. So this bug is partly blocked by Bug 1755033 and partly can be resolved by implementing the missing logic noted in Comment #2.

Comment 5

[Tim Giles [:tgiles]]

Attachment: Bug 1740001 - Add cc exp year transformer, send input and change events when resetting select element via clear form. r=dimi,sgalich

Comment 6

[Tim Giles [:tgiles]]

(In reply to Tim Giles [:tgiles] from comment #3)

So it looks like ASDA has a couple different sites used for payment processing. Comment #2 is about direct.asda.com and the expiry date issue there. I'm still trying to figure out how to hit the other site shown in Comment #1, global.direct.asda.com

So to get the payment processor to be global.direct.asda.com, switch your location to Romania (I'm sure there's other countries that will trip this but matching the video in Comment #1 lands us in Romania) then check out.

Can confirm that global.direct.asda.com is also overwriting the autofill styles.

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/0a3e8683265e
Add cc exp year transformer, send input and change events when resetting select element via clear form. r=dimi,sgalich

Comment 8

[Atila Butkovits]

https://hg.mozilla.org/mozilla-central/rev/0a3e8683265e

Comment 9

[Ardelean Oana, Desktop QA [:oardelean]]

Reproducible on Firefoz 98.0(20220304153049) on macOS 11. Verified as fixed on Firefox 100.0(20220428192727) and Nightly 101.0a1(20220428214715) on macOS 11, Win10 64-bits and Ubuntu 20.04.