Magento Checkout Street Line Autofill Bug

Question

I've noticed recently that a number of orders in our Magento store have street line 1 copied into street line 2.

I did some digging and it appears to be related to Chrome's autofill. If you look at the form fields, Magento uses billing[street][] and shipping[street][] as the field names for both street lines. So Chrome can't figure out which one is which and autofills address line 1 into both fields.

There's some info floating around that you can use the autocomplete attribute on the form input field to indicate which field it should link to, but this isn't supported and doesn't work. In fact, if you try to do that, it disables autocomplete on the entire form. I also tried changing the field name, but that breaks checkout. It seems I'd need to dig deep into the code and change the field name on the form and anywhere it is referenced, submitted to PayPal, saved in the DB, etc. This seems like a nightmare.

Has anyone dealt with this and/or have a suggestion?

Answer 1

Using x-autocompletetype="address-line2" does not appear to work with the latest Chrome (65.0.3325.106), it will still duplicate the first street address into both inputs. However, autocomplete="address-line1" and autocomplete="address-line2" seems to work as expected.

More details here: https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill#address

Answer 2

You could also try the x-autocompletetype-attribute, although this is an experimental feature:

<input x-autocompletetype="address-line1" />
<input x-autocompletetype="address-line2" />

Answer 3

Autocomplete attributes are a way for you, the developer, to control how the browser should populate a given form field. For example, if you are expecting a street address you can hint to the browser that you are expecting it by using autocomplete="address-line1". This prevents the browser from incorrectly guessing form fields on your website which can result in a poor user experience.

https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill

Answer 4

Quick little fix, add a 'readonly' attribute to the input, and an onfocus attribute with the following JS snippet:

onfocus="this.removeAttribute('readonly');"

So the whole thing should look like:

<input type="text" title="Street Address 2" name="billing[street][]" id="billing:street2" value="" class="input-text " readonly onfocus="this.removeAttribute('readonly');">

Chrome will be unable to auto-fill the field, but the user can type into it manually as the JS will be triggered when they click in the field.

Do this for the fax input as well, Chrome likes to copy the phone number into that one.