AutoFill do Google Chrome sobreescrevendo AutoComplete

O Google Chrome possúi um recurso de autofill nativo que tem como objetivo preencher campos em que o usuario geralmente preenche com o mesmo valor. Por exemplo campos de usuário ou endereço, bairro, cidade, etc. Este recurso é nativo do navegador, e depende das configuracões do usuário.

Enquanto este recurso facilita a vida dos usuários, pode ser um pesadelo para devenvolvedores.

Para validar que o endereço digitado pelo usuário realmente existe, muitos desenvolvedores usam a API de autocomplete do Google Maps, que seria algo assim:

    var autocomplete = new google.maps.places.Autocomplete(document.getElementById('address'), options);

    google.maps.event.addDomListener(document.getElementById('address'), 'keydown', function(e) {
        if (e.keyCode == 13) {
            e.preventDefault();
        }
    });

    google.maps.event.addListener(autocomplete, 'place_changed', function () {
        var place = autocomplete.getPlace();
        if (place.geometry && place.geometry.location) {

            $("#latitude").val(place.geometry.location.lat());
            $("#longitude").val(place.geometry.location.lng());

        }
     });
    });

Com isso podemos tambem ir além e criar scripts para autopopular demais campos, como CEP, cidade e bairro.

Com esta introduçāo, o leitor já sabe se deve continuar a ler o artigo.

Problema:

O que acontece é que o AutoFill do Google Chrome sobreescreve API do AutoComplete, causando o usuário a realizer uma açāo em dobro quando preenchendo o formulario. Um primeiro click para selecionar o AutoFill, que entao engatilha o script para buscar o endereço no Google Maps, e mostra um segundo dropdown com as opções de endereços encontrados, e o usuário tem que fazer um segundo click. Muito confuso.

Um work-arround para este caso é mudar o nome do input, que nāo deve conter nada relacionado com username, address, suburb, city e state e também o mesmo para a label que faz referencia como campo.

Por exemplo, o que antes era:

<label for="address">Address:</label>
<input type="text" value="" name="addres" id="address" placeholder="Enter a location">

Agora deve ser

<label for="address_input">Ad<span style="display:none"> </span>dress:</label>
<input type="text" value="" name="address_input" id="address" autocomplete="off" placeholder="Enter a location">

Referencias

https://stackoverflow.com/questions/18531437/stop-google-chrome-auto-fill-the-input

https://stackoverflow.com/questions/29931712/chrome-autofill-covers-autocomplete-for-google-maps-api-v3