1496472 - The Expiration date of the card is not being cleared by clicking the clear button (Amazon.com, Amazon.ca, Amazon.de, BestBuy.ca, Etsy.ca)

Status: RESOLVED WORKSFORME

(Toolkit :: Form Autofill, defect, P3)

Description

[David Olah]

[Affected versions]: 
Nightly 64.0a1 (2018-10-02)

[Affected platforms]:
Platforms: Windows 10, Mac OS X, Ubuntu 16.04.

[Preconditions]:

Modify the following prefs via about:config:

- extensions.formautofill.available: on
- extensions.formautofill.creditCards.available: true
- have some saved credit cards

[Steps to reproduce]:
1. Go to: https://www.amazon.com
2. Login with a valid account
3. Go to your account
4. Select Payment options
5. Double click on the "name on card" textbox and select a card from the dropdown
6. All the fields will be completed including the Expiration Date
7. Click on the "Name on card" again
8. From the popup that appears, click Clear Autofill Form

[Expected result]:
All the fields are deleted and the expiration date turns back to the default values

[Actual result]:
The Expiration date remains the one that was set to the card that was selected at step 5

Comment 1

[Alin Ilea, Desktop QA]

Hi,
This issue is also reproducible in latest Nightly 85.0a1 (build id: 20201117215529) on amazon.ca. Updating the flags and summary accordingly.
Note that the issue is not reproducible on Chrome.

Comment 2

[Timea Cernea [:tbabos][inactive]]

Updating this with BestBuy.ca since it can also be reproduced there on the latest Nightly. Also, the autofilled exp date from the dropdowns are not highlighted (they are on Chrome).
Please note that on Chrome the Clear Form option is not even displayed for the autofilled CC Card, so this functionality can't be checked there.

Comment 3

[Timea Cernea [:tbabos][inactive]]

Reproducible on Amazon.co.uk, Amazon.de, Amazon.fr as well on the latest Firefox Nightly 96.0a1.

Comment 4

[Simona Badau, Desktop QA]

Tested on Amazon using the latest Nightly 98.0a1 on mac 11.6 and the issue is still reproducible - the Expiration date of the card is not being cleared by clicking the clear button nor highlighted.

Comment 5

[Tim Giles [:tgiles]]

Attachment: amazon-add-credit-card-form.png

So here's the issue for Amazon.com, haven't investigated the other sites yet.

• There are hidden native <select> elements and visible <span> elements that appear as <select> elements
• There appears to be some data binding between these hidden <select> elements and the visible <span> elements as changing the value of the <span> elements updates the hidden <select> elements
  • However, you cannot interact with the <select> elements as trying to make the <select> dropdown appear will instead move your focus over to the visible <span> element instead.
• This means there is one way data binding between the visible <span> element and the invisible <select> element such that any changes to <span> will update <select> but not the other way around.
• Since our code determines that the hidden <select> element is the autofill element, we reset this on clear.
• As previously established, there is a one-way data binding with this hidden <select> so the visible <span> element does not update its value.

Additionally, since we believe that the <select> element is the autofill element and not the <span> element, we don't show any highlighting on the visible <span> element.

Comment 6

[Tim Giles [:tgiles]]

Attachment: 1496472-best-buy-expiry-date.gif

Issue for Best Buy, they don't render the expiry date elements until you start filling the credit card number field, either manually or via autofill. This is a tricky situation and I don't have a good solution for this off the top of my head.

If you're lucky, you can get autofill to work again after initially filling in the credit card number which will successfully highlight and fill the expiry date fields but obviously this is not a good user experience or something we would want users to have to do to get autofill to work as expected.

Comment 7

[Tim Giles [:tgiles]]

Attachment: esty-overwriting-autofill-styling.png

Out of all the cases on this bug, the Esty case is the most straightforward one. They have styling on their input elements that overwrites the background-image rule and causes our autofill styling to disappear. This is a side-effect of allowing websites to overwrite our autofill styling compared to other browsers.

Comment 8

[Alin Ilea, Desktop QA]

I cannot reproduce this issue anymore on Amazon.com, Amazon.ca, Amazon.de, BestBuy.ca, Etsy.ca, using Windows 10 and macOS 11, with Beta 102. I'll close this as WFM but feel free to reopen it if the issue will occur again.