CC autofill dropdown should appear once the user clicks in the field

Steps to reproduce:

• Visit BestBuy.com
• In the checkout form, click credit card/ debit card field

Expected result:
See the cc drop down menu

Actual result:
Don't see the cc dropdown menu until the 2nd click

You can use showPopup() to open the popup at the appropriate time like the password manager does.

XPCOMUtils.defineLazyServiceGetter(
  this,
  "gFormFillService",
  "@mozilla.org/satchel/form-fill-controller;1",
  "nsIFormFillController"
);
gFormFillService.QueryInterface(Ci.nsIAutoCompleteInput).showPopup()

Is the intention here that all form autofill fields will behave in this way? Or is this only for the credit card number itself? Or should we do this for all credit card fields, but not address fields?

Need UX decision

This patch has an issue with some forms on first load. Thanks to Zibi for the STR:

1. Start a browser with a credit card saved
2. Open https://luke-chang.github.io/autofill-demo/basic_cc.html
3. Click once on the text input for CC
4. Click away on the document
5. Click on the text input for CC to bring focus back to it.

Actual result:
On the second focus, the autocomplete shows up.

Expected result:
It should show up on both first and second

Investigating, and will upload a new patch when fixed.

Depends on D77951

UX recommendation (responding to Cindy's original bug):
If the user has one or more saved credit cards, and the field is empty, display the credit card autofill dropdown (with list of applicable data suggestions for that field, with appropriate piece highlighted) on the first click. This behavior should happen whether or not the cursor appears in that field on page load and regardless which field is clicked.
This includes the case when a user clears a previously filled field (dropdown appears as soon as field is empty).

Rec made after observing other browsers' handling when displaying the credit card & address autofill dropdowns in various states (Safari, Chrome, both on MacOS using macys.com, wayfair.com, bestbuy.com & https://luke-chang.github.io/autofill-demo/basic_cc.html).

*While this isn't what we do in terms of clicks for address now in terms of discoverabililty, it IS what password does (and since it seems like the right direction to be going in terms of helpfulness for forms, once we get address into a better place), I think we're ok in terms of consistency. MattN & I agree that we should monitor whether we have too many false-positives as a result of the change.

Okay, the current patch works in about 75% - 80% of the cases. Under Windows, though, it intermittently will pop open the Form Fill Controller popup immediately after the user enters their PIN. I've tried catching this in the debugger, but I'm not seeing a breakpoint on nsFormFillController::SetPopupOpen() being hit.

STR, with D78968 applied (with CC autofill enabled and at least one card stored):

1. Open https://luke-chang.github.io/autofill-demo/basic_cc.html
2. Click on "Expiration Year" (note: other fields will show the problem also; however, it seems to become progressively more likely the further down in the form the field is)
3. Select a card from the popup
4. Windows should open a PIN prompt window. Enter your pin.

After this, there is a chance that the credit card popup will open again, containing the "Clear Autofill Form" and "More Options" items. If it doesn't, click "Reset" on the form and retry the STR from step 2.

(In reply to Adam Roach [:abr] from comment #9)

Okay, the current patch works in about 75% - 80% of the cases. Under Windows, though, it intermittently will pop open the Form Fill Controller popup immediately after the user enters their PIN. I've tried catching this in the debugger, but I'm not seeing a breakpoint on nsFormFillController::SetPopupOpen() being hit.

STR, with D78968 applied (with CC autofill enabled and at least one card stored):

1. Open https://luke-chang.github.io/autofill-demo/basic_cc.html
2. Click on "Expiration Year" (note: other fields will show the problem also; however, it seems to become progressively more likely the further down in the form the field is)
3. Select a card from the popup
4. Windows should open a PIN prompt window. Enter your pin.

After this, there is a chance that the credit card popup will open again, containing the "Clear Autofill Form" and "More Options" items. If it doesn't, click "Reset" on the form and retry the STR from step 2.

After further experimentation, I've determined that this flaw exists without my patch. I'm not going to block landing this patch on fixing this apparently unrelated issue.

https://hg.mozilla.org/mozilla-central/rev/951d20ec6ec9

(In reply to hcollier@mozilla.com from comment #7)

This includes the case when a user clears a previously filled field (dropdown appears as soon as field is empty).

Adam, did you handle this in your patch? Try backspacing a field until it's empty, I believe the popup will incorrectly close. I didn't see this in the patch from a quick skim and I know for password manager we had to do extra work to have this behaviour.

(In reply to Matthew N. [:MattN] from comment #13)

(In reply to hcollier@mozilla.com from comment #7)

This includes the case when a user clears a previously filled field (dropdown appears as soon as field is empty).

Adam, did you handle this in your patch? Try backspacing a field until it's empty, I believe the popup will incorrectly close. I didn't see this in the patch from a quick skim and I know for password manager we had to do extra work to have this behaviour.

Ah, no -- I missed this part of the description. I'll open a new bug to handle this.

Hi Adam,
The case when we load the form and click on the fields is indeed fixed by this patch. However, there are the following cases which are not covered, aside from the one mentioned by Matt in Comment 13:

• after the fields are auto-filled, the user has to double-click on the field to toggle the dropdown in case they want to use Clear Form function
• after clearing the form and all the fields are blank, we need a double-click once again to toggle the autofill dropdown (even after page refresh)

Attaching the recording for reference, I can submit new issues for the above if needed, let me know.

Although it works on simple test pages, it seems like on live pages we might not get the same result. Deathwish.com as an example.

(In reply to Timea Cernea [:tbabos] from comment #15)

The case when we load the form and click on the fields is indeed fixed by this patch. However, there are the following cases which are not covered, aside from the one mentioned by Matt in Comment 13:

• after the fields are auto-filled, the user has to double-click on the field to toggle the dropdown in case they want to use Clear Form function

Thanks! After the fields are auto-filled, it is intended that bringing up the dropdown will take two clicks: the behavior described above is: "f the user has one or more saved credit cards, and the field is empty, display the credit card autofill dropdown (with list of applicable data suggestions for that field, with appropriate piece highlighted) on the first click."

• after clearing the form and all the fields are blank, we need a double-click once again to toggle the autofill dropdown (even after page refresh)

Thanks! This is the same bug as you show on deathwishcoffee.com -- I've tracked down the cause and will have a patch uploaded momentarily.

https://hg.mozilla.org/mozilla-central/rev/52457f5a652b

Verified - Fixed in latest Nightly 79.0a1 (2020-06-28) (Build id: 20200628212804) on deathwishcoffee.com using windows 10. After just one click the autofill dropdown is toggled.