Closed Bug 1688607 Opened 3 years ago Closed 2 years ago

[DE][lufthansa.com] Credit Card autofill does not work on 4 separate fields type format for CC number

Categories

(Toolkit :: Form Autofill, defect, P2)

Desktop
All
defect

Tracking

()

VERIFIED FIXED
95 Branch
Tracking Status
firefox84 --- disabled
firefox85 --- disabled
firefox86 --- disabled
firefox95 --- disabled
firefox96 --- verified

People

(Reporter: tbabos, Assigned: tgiles)

References

(Blocks 5 open bugs, )

Details

(Whiteboard: [fxcm-missing-cc-features] )

Attachments

(5 files, 5 obsolete files)

Attached video Lufthansa 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

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 lufthansa.com
  3. Click on each credit card number field (4 in total)
  4. From the last one, choose to fill in any saved CC entry

Expected Results:
See Edge Case 2 for 4 fields CC number case: https://mozilla.invisionapp.com/share/7ZA4WEK9W#/screens/218696480

Actual Results:

  1. Only the last field toggles the autofill dropdown
  2. Preview is not shown for the CC fields upon hovering over a CC entry
  3. Only the last field will be autofilled with the full CC number, Clear Form is not available
  4. Credit Card type is not selected by autofill
  5. Capture is also not working

Notes:

  • Severity: although it is really broken, S3-S4
  • Reproducible on Chrome?: Yes, on Chrome autofill is not toggled at all
  • Regression-range: reproducible on all latest versions, this site was never tested before, can look for regression-range if need be
Priority: -- → P2

Might be better to disable when detecting these types of fields

Apparently we are not determining that an element was selected on this checkout page, minus the last input.
(Ignore the FormAutofill.jsm:54 line, that's just the debug log call)

FormAutofillContent: updateActiveElement: no element selected FormAutofill.jsm:54
FormAutofillContent: identifyAutofillFields: https://book.lufthansa.com/lh/dyn/air-lh/revenue/savePasseng…I8C1MuYgUlWf7ugoeXodEhuU!-1921793269!757086731!1626384250713 FormAutofill.jsm:54
FormAutofillContent: No control is removed or inserted since last collection. FormAutofill.jsm:54
FormAutofillContent: updateActiveElement: no element selected FormAutofill.jsm:54

Seems like our instance of the formFillController is not registering focused inputs until the last field, this might be a satchel bug, not entirely sure.

When first selecting one of the credit card fields that should work on page load, we get this log

FormAutofillContent: updateActiveElement: no element selected FormAutofill.jsm:54
FormAutofillContent: identifyAutofillFields: file:///C:/Users/Tim%20Giles/Downloads/Lufthansa%20-%20Payment%20Details.htm FormAutofill.jsm:54
FormAutofillHandler: Ignoring FormAutofillCreditCardSection related fields since it is an invalid section FormAutofillHandler.jsm:90
FormAutofillHandler: Creating new credit card section with flowId = {af0b08e4-d501-4fd3-ba23-0edb5143f6dc} FormAutofillHandler.jsm:925
FormAutofillHandler: Ignoring FormAutofillCreditCardSection related fields since it is an invalid section FormAutofillHandler.jsm:90
FormAutofillHandler: Creating new credit card section with flowId = {bf356ec2-82e7-43ac-9680-d23852312b66} FormAutofillHandler.jsm:925
FormAutofillHandler: Ignoring FormAutofillCreditCardSection related fields since it is an invalid section FormAutofillHandler.jsm:90
FormAutofillHandler: Creating new credit card section with flowId = {93a02464-cf1c-465d-ba88-898fae88beb0} FormAutofillHandler.jsm:925
FormAutofillHandler: Creating new credit card section with flowId = {9a109960-e765-4287-bebb-401157947b9e} FormAutofillHandler.jsm:925
FormAutofillHandler: Ignoring FormAutofillCreditCardSection related fields since it is an invalid section FormAutofillHandler.jsm:90
FormAutofillHandler: Creating new credit card section with flowId = {df68f815-0e90-41a7-a162-2dedf6b94479} FormAutofillHandler.jsm:925
FormAutofillHandler: Ignoring FormAutofillCreditCardSection related fields since it is an invalid section FormAutofillHandler.jsm:90
FormAutofillHandler: Creating new credit card section with flowId = {4116ba12-946e-401a-a7c3-c532a743d462} FormAutofillHandler.jsm:925
FormAutofillHandler: Ignoring FormAutofillCreditCardSection related fields since it is an invalid section FormAutofillHandler.jsm:90
FormAutofillHandler: Creating new credit card section with flowId = {f9b0af72-4115-43be-850b-21b8e1418d32} FormAutofillHandler.jsm:925
FormAutofillHandler: Creating new credit card section with flowId = {aec3ef02-e751-429f-8ee7-7c7a33e5b608} FormAutofillHandler.jsm:925
FormAutofillContent: Adding form handler to _formsDetails: 
Object { form: {…}, fieldDetails: (18) […], sections: (11) […], _sectionCache: WeakMap(0), window: Window, winUtils: XPCWrappedNative_NoHelper, timeStartedFillingMS: null, onFormSubmitted: onFormSubmitted() }
FormAutofill.jsm:54
FormAutofillContent: updateActiveElement: no element selected FormAutofill.jsm:54

looks like we don't consider this cc-number as a valid section, so maybe it's not a satchel issue after all.

Attachment #9231440 - Attachment is obsolete: true
Attachment #9237771 - Attachment is obsolete: true

Okay so I'm going to summarize my investigation into this issue, but fixing this may be tricky since it breaks some key assumptions of our autofill logic (as I understand it).

Currently, each cc-number field, other than the fourth cc-number field, is treated as a separate section since each of these cc-number fields do not have an autocomplete "reason" (i.e. an autocomplete attribute of autocomplete="cc-number" or other cc attribute) and there are no expiration date fields or card holder name fields next to these cc-number fields in the markup. The previously mentioned logic is contained here, in isValidSection for credit card field sections. So, since all but the last cc-number field are not valid sections, we will not show the autocomplete dropdown for these credit card number fields. This does not completely explain why each cc-number section is treated as separate sections however.

The reason why each of these cc-number fields are treated as separate sections, is due to the "_classifySections()" logic in FormAutofillHeuristics. We use a Set to keep track of the various types of fields we've seen in a "section", and once we see a type that has already been added to the Set, then we increment and create a new "section". Since cc-number is not a field that can appear multiple times in a row (according to current implementation), we will always create a new section when dealing with multiple cc-number fields. Okay, so what happens if we allowed cc-number to be a multi-field candidate?

If we allow multiple cc-number fields to be in a row, then we can create a credit card "section" that contains all the necessary fields for an accurate autofill experience. However, the current logic has no idea that it should be splitting the cc-number into four subsections of equal length...so we will just autofill the full credit card number in each of four cc-number fields in this case. Not an ideal solution by any stretch of the imagination. I also wonder what the implications of making cc-number a multi-field candidate are for other sites. My hunch is that there should only be one "place" to input credit card number on a given site, where "place" is either one input or four inputs for cc-number input. If this assumption is correct, then I don't think we need to worry about false positives when we build credit card sections out...i.e. two unrelated cc-number fields are marked as related and thus are part of one credit card section. Since the four inputs cc-number input pattern should be the only deviation (I don't believe it makes sense to have two or three input fields for credit card number input since cards are not physically formatted that way), then we could make a branch in our logic for that case. I'm not sure how difficult that branch will be though, i.e. does that solution easily fit into the existing codebase...probably not.

I also don't know how implementing Bug 1681985 will affect bugs like this, since I have no idea how many sites implement a cc number input pattern like lufthansa.

Interestingly enough, the credit card number is autofilled correctly with Safari, though not the expiry date but that is expected to me. So we don't autofill as expected and neither does Chrome.

All of this is to say, I'm not sure how we prioritize this bug. I'm not sure if this bug is blocking for rolling out credit card autofill to France, Germany, and the United Kingdom.

Blocks: 1730016
Assignee: nobody → tgiles
Status: NEW → ASSIGNED

Add functionality for previewing and autofilling into multiple cc-number fields.

Fix test_Lush.js case.

Add logic to handle credit card saving/update when multiple cc-number fields are present.

Add heuristic test for Lufthansa site.

Add test for filling cc-number when there are multiple cc-number fields in a form.

Add test for collecting multiple cc-number fields via collectFormFields.

Add multiple cc-number fields case to onFormSubmitted test.

Add multiple cc-number fields with maxlength=4 case to markAsAutofillField.

Add implementation of the preview and fill test cases for multiple cc-number fields.

Blocks: 1735562
Pushed by tgiles@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/68f5bca6b432
Enable autofill and capturing when there are multiple credit card number fields. r=sgalich
Status: ASSIGNED → RESOLVED
Closed: 2 years ago
Resolution: --- → FIXED
Target Milestone: --- → 95 Branch

Hey Tim,
Unfortunately, this is not fixed for me on the latest Nightly 95.0a1 (2021-11-01). I did also check the attached testcase which indeed works fine, but this issue still stand on Lufhtansa.de.
Re-opening this issue would be the next step for me, but please let me know what could work better for you.
Thanks!

Flags: needinfo?(tgiles)

Hey Timea, thanks for the verification. I'll go ahead and reopen it and take a look.

Status: RESOLVED → REOPENED
Flags: needinfo?(tgiles)
Resolution: FIXED → ---
Attachment #9248774 - Attachment description: WIP: Bug 1688607 - Fix autofill and capture behavior on Lufthansa due to multiple cc-number fields. r=sgalich → Bug 1688607 - Fix autofill and capture behavior on Lufthansa due to multiple cc-number fields. r=sgalich

The current patch in review will solve the following issues:

  • Only the last field toggles the autofill dropdown
  • Preview is not shown for the CC fields upon hovering over a CC entry
  • Only the last field will be autofilled with the full CC number, Clear Form is not available
  • Credit Card type is not selected by autofill

It will not solve the cc capture issue. This capture issue is also present on Chrome and Safari and is most likely due to the following:
When some payment is submitted on Lufthansa, the details are stored on a redirect to a new page with a hidden form. This hidden form has all the valid payment details from the previous page, but since there has been no user interaction with this hidden form, there's no signal that we should show the CC capture doorhanger/panel and so we don't capture these credit card details for saving/editing.

The capture issue should be filed as a follow up bug and significant time should be considered for a good design that fixes this scenario of a hidden form is used to post payment details without incurring a huge performance overhead.

Blocks: 1739709
Attachment #9248774 - Attachment description: Bug 1688607 - Fix autofill and capture behavior on Lufthansa due to multiple cc-number fields. r=sgalich → WIP: Bug 1688607 - Fix autofill and capture behavior on Lufthansa due to multiple cc-number fields. r=sgalich
Attachment #9250359 - Attachment is obsolete: true
Attachment #9248774 - Attachment description: WIP: Bug 1688607 - Fix autofill and capture behavior on Lufthansa due to multiple cc-number fields. r=sgalich → Bug 1688607 - Fix autofill and capture behavior on Lufthansa due to multiple cc-number fields. r=sgalich,dimi
Pushed by tgiles@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/a8752c711fc9
Fix amex cards not being selected correctly if option value is 'American Express'. r=dimi
Status: REOPENED → RESOLVED
Closed: 2 years ago2 years ago
Resolution: --- → FIXED

ah shoot, I should have added keep-open since this bug shouldn't be verified until the other in-review patch lands. Sorry about that!

Status: RESOLVED → REOPENED
Keywords: leave-open
Resolution: FIXED → ---
Pushed by tgiles@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/59497f674bb3
Fix autofill and capture behavior on Lufthansa due to multiple cc-number fields. r=sgalich,dimi
Keywords: leave-open
Flags: qe-verify+

Verified-fixed on the latest Firefox Nightly 96.0a1 (2021-12-03) on MacOS 10.15 and Windows 10.
The credit card number is now filled in (along with all the other eligible fields) correctly and the dropdown can be toggled from any of the 4 CC number fields.

Thanks Tim! Also, could you please check out the flags for this bug? Nightly 96 is indeed fixed but Beta is not yet (leftover flag from when the first fix landed in 95 Nightly).

Flags: qe-verify+ → needinfo?(tgiles)
Flags: needinfo?(tgiles)
Status: REOPENED → RESOLVED
Closed: 2 years ago2 years ago
Resolution: --- → FIXED
Status: RESOLVED → VERIFIED
Blocks: 1752218
Whiteboard: [fxcm-missing-cc-features]
You need to log in before you can comment on or make changes to this bug.