12

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?

  • Have you found a solution for this issue? With automatic label print for shipping we only catch 20% of these errors and sometimes the carrier dont deliver since "the address is wrong"... – Casper O Mar 7 '16 at 14:36
  • I have not found a true, complete solution. For us the only real concern was fixing it on the display side on checkout, so I added some JS that fires on change of line 2 and, if it exactly matches line 1, I clear it. This doesn't handle customer account pages when creating new addresses, but I wasn't as worried about that. – BrianVPS Mar 8 '16 at 19:13
  • This is partially in relation to "How to trigger Chrome Autofill" stackoverflow.com/questions/7223168/… The short answer is by meeting the Regex requirements for name or label in code.google.com/p/chromium/codesearch#chromium/src/components/… – Ray Foss Mar 10 '16 at 13:03
3

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

<input x-autocompletetype="address-line1" />
<input x-autocompletetype="address-line2" />
| improve this answer | |
2

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.

| improve this answer | |
  • 1
    ,welcome to magento SE. I don't thought that readonly good is not idea to stop auto field – Amit Bera Jun 20 '16 at 17:58
  • From experience people tend to just overlook it... which is not good at all and can cost a lot of money, the main difficulty in fixing it is the dynamic nature of the fields. – Ray Foss Aug 26 '16 at 17:21
2

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

| improve this answer | |
2

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

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.