1428259 - On Costco.com, the dropdown is dismissed accidentally when hovering items within it

Status: NEW

(Toolkit :: Form Autofill, defect, P3)

Description

[Luke Chang [:lchang] (inactive)]

+++ This bug was initially created as a clone of Bug #1425252 +++

[Steps to reproduce]:

0. Make sure you have at least one saved credit card record.
 
1. Go to www.costco.com
2. Log in to your account -> My Account -> Payment Methods 
3. Click on the Expiration Date field twice to trigger the dropdown
4. Hover any item in the dropdown

[Expected result]:

The dropdown is still there.

[Actual result]:

The dropdown was dismissed.

Note: Please see the video for a better understanding. https://streamable.com/p0via

Comment 1

[Ray Lin[:ralin]]

NI myself, will look more to this.

Comment 2

[Ray Lin[:ralin]]

A quick note:
In total, two valid fields are found: cc-number and cc-exp. The identified cc-number is actually a display:none input, and the markdown looks like:
```
<input class="form-control gw-proxied" title="Card Number" id="card_number" value="" autocomplete="off" maxlength="19" style="display: none;" readonly="readonly" type="text">
```
Still have no clear picture of the root cause, however, so far I can tell is that Costco.com use a sort of API identical to MutationObserver and that API is able to monitor the style change. That means, our style for preview background is observable from content side, so that client script can interfere our popup in observer's callback, i.e. blur current activeElement.

Two possible approaches for this case:
1. find out what Costco really does in observer's callback, and prevent that from triggering our popup close (might be a nasty workaround)
2. change the way styling preview background. (technical difficulty to overcome)