1687224 - Credit card autofill doesn't work on gap.com

Status: RESOLVED DUPLICATE of bug 1657657

(Toolkit :: Form Autofill, defect)

Description

[Chris Peterson [:cpeterson]]

Attachment: Screenshot_2021-01-17 Checkout.png

Steps to reproduce

1. On https://www.gap.com/, place some clothes in your shopping cart and check out.

Actual result

When checking out, the Checkout page's Credit Card Number field did not show my saved credit card when I left or right click in the field. See the attached screenshot.

Inspecting the checkout page HTML:

<div class="ch-payment-total-text ui-component sds-cb_color-background--wh sds_relative" id="paymentMethodContainer">
    <div>
        <div>
            <span class="shippingAddress__titleBlock"><h2 id="payment__header--title">PAYMENT METHOD</h2></span>
            <form id="payment__form--submit" method="post">
                <div>
                    <div class="utils__flexEnd">
                        <span id="payment__form--ccIcon" class="payment__ccIcon payment__iconColumn card_image_default"></span>
                        <span class="utils__flexWholeColumn">
                            <label>
                                <span class="sds_form__label" id="payment__field--cc-aria" for="payment__field--cc"></span>
                                <input
                                    aria-labelledby=""
                                    aria-describedby=""
                                    aria-invalid="false"
                                    maxlength="19"
                                    id="payment__field--cc"
                                    type="tel"
                                    name="creditCardNumber"
                                    placeholder="Credit Card Number"
                                    autocomplete="off"
                                    class="sds_form__input"
                                    value=""
                                />
                            </label>
                        </span>
                    </div>
                </div>
            </form>
            <div class="sds_sp_top">
                <span>
                    <div class="component__addBonus">
                        <div class="sds_relative sds_cursor-pointer" tabindex="0" id="toggleForm">
                            <span class="bonus__header">ADD REWARDS CODE</span><img id="addReward__plus" src="./static/media/icon-plus.f18d077c.svg" class="icon__accordianPlus" alt="plus sign" />
                        </div>
                    </div>
                </span>
                <div class="component__addBonus">
                    <div class="sds_relative sds_cursor-pointer" tabindex="0" id="addGiftCard__toggleForm">
                        <span class="bonus__header">ADD GIFT CARD</span><img id="addGiftCard__plus" src="./static/media/icon-plus.f18d077c.svg" class="icon__accordianPlus" alt="plus sign" />
                    </div>
                </div>
            </div>
            <div class="sds_pd_top_xl sds_tx_right">
                <div class="sds_button-group"><button type="button" class="sds-cb_button-secondary sds_button_inline button__payment__mobile--width" id="payment__savePayment--button">Review Order</button></div>
            </div>
        </div>
    </div>
</div>

Expected result

Firefox should autofill my saved credit card information or show the credit card autofill popup when I click in the credit card form.

Comment 1

[Chris Peterson [:cpeterson]]

After I manually entered my credit card number in the credit card field, the "PAYMENT METHOD" section expanded and showed MM/YY expiration date and Security Code fields. Firefox recognized the MM/YY field as a credit card expiration date field and could fill it if I clicked in the field.