Chrome Autofill covers Autocomplete for Google Maps API v3

Question

I am using Google Maps Javascript v3 to setup autocomplete on an HTML input field like so:

http://imgur.com/Rm6X2FI.png - (w/out autofill)

The issue I\'m having

Answer 1

This is driving me crazy, after testing lot of stuff, what I had to do to prevent this behavior is not giving a hint to chrome that's an address.

Not an easy challenge to make it user friendly without mentioning the words "address", "street", etc

I end up using the word "Location" in the placeholder. I didn't use any other attribute like autocomplete. Simply never mention anywhere it's an address, and Chrome will stop doing this.

I hope this can help others.

Answer 2

via Google Maps Event w/ES6...

new google.maps.places.Autocomplete(input);
google.maps.event.addDomListener(input, 'focus', e => e.target.setAttribute('autocomplete', 'new-password'));

Answer 3

Workaround:

$('#Name').on('mouseup keyup', function () {
        var val = $('#Name').val();
        val = val.length;
        if (val === 0) {
            $('#Name').attr('autocomplete', 'on');
        }
        else {
            $('#Name').attr('autocomplete', 'new-password');
        }
    }).on('mousedown keydown', function () {
        var val = $('#Name').val();
        var length = val.length;
        if (!length) {
            $('#Name').attr('autocomplete', 'new-password');
        }
    })