1645735 - [Staples.com] Exp date format is incorrectly auto-filled and highlighter overlaps CC logo placeholder

Status: VERIFIED FIXED

(Toolkit :: Form Autofill, defect, P2)

Description

[Timea Cernea [:tbabos][inactive]]

Attachment: Recording of the issue

Affected version:
All - if CC specific prefs are enabled

Tested on:
Windows 10
MacOS 10.13
Ubuntu 16.04

Steps to reproduce:

1. Reach the payment form on staples.com
2. Click on the Exp Date field and select any entry from the atuofill dropdown (notice preview and date format in dropdown)

Expected results:

1. The expiry date is correctly formatted to ensure field validation pass.
2. Card number autofill highlight does not overlap the card logo placeholder for the field.

Actual results:

1. The expiry date is incorrectly formatted (also cut off) and does not pass field validation
2. Card number autofill highlight overlaps the card logo placeholder for the field.

Note:
Exp Date field:
<input type="tel" class="fs-block" maxlength="5" placeholder="Exp Date*" id="expDate" name="ExpirationDate" onkeyup="$cc.expiry.call(this,event)" onfocusout="$cc.expiryErrMsg.call(this,event)" autocomplete="off">

Comment 1

[Marco Mucci [:MarcoM]]

Updating whiteboard tag for team triage.

Comment 2

[BugBot [:suhaib / :marco/ :calixte]]

The severity field is not set for this bug.
:MattN, could you have a look please?

For more information, please visit auto_nag documentation.

Comment 3

[Adam Roach [:abr]]

Attachment: Bug 1645735: Fix expiration date truncation for maxLength=5 r?zbraniecki!

Depends on D81630

Comment 4

[Adam Roach [:abr]]

The issue comes from how the truncation code interacts with expiration date information. The attached proof-of-concept patch (layered on top of the POC patch from Bug 1428269) demonstrates a fix based on the user's own locale (which is likely to match the website in use).

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/203a686a3d4d
Fix expiration date truncation for maxLength=5 r=zbraniecki

Comment 7

[Natalia Csoregi [:nataliaCs]]

https://hg.mozilla.org/mozilla-central/rev/203a686a3d4d

Comment 8

[Alin Ilea, Desktop Test Engineering]

Reproduced the initial issue in Beta version 79 using Windows 10.
Verified - Fixed in latest Nightly 80.0a1 (2020-07-07) (build id: 20200707094747), the expiry date is correctly formatted but the card logo is not displayed after autofill the Card Number field. Note that if I paste the same credit card number manually (copy-paste) the logo is displayed accordingly (see the video attachment below).

Comment 9

[Alin Ilea, Desktop Test Engineering]

Attachment: 2020-07-07_17h59_15.mp4

Comment 10

[Adam Roach [:abr]]

(In reply to Alin Ilea from comment #8)

the expiry date is correctly formatted but the card logo is not displayed after autofill the Card Number field. Note that if I paste the same credit card number manually (copy-paste) the logo is displayed accordingly (see the video attachment below).

Thanks! I've filed that issue as Bug 1651123.