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

None of the above answers worked for me (Chrome 64.0.3282.186, x64 windows).

TL;DR: The Google Maps code is changing the autocomplete attribute to off, so even if you set it to new-password, you'll still get autofill. The hack I'm using is to listen for mutations on that attribute and then override it. Note: simply changing the attribute after calling into Google Maps does not work.

Set up a MutationObserver before initializing Google Maps Autocomplete that immediately stops listening for mutations and then sets the attribute to new-password.

    var autocompleteInput = document.getElementById("id-of-element");

    var observerHack = new MutationObserver(function() {
        observerHack.disconnect();
        $("#id-of-element").attr("autocomplete", "new-password");
    });

    observerHack.observe(autocompleteInput, {
        attributes: true,
        attributeFilter: ['autocomplete']
    });

Answer 2

Thanks to GSTAR. Instead of Jquery, I used the below code & this worked for me

<input type="text" value="" id="address" class="form-control" placeholder="Enter a location" autocomplete="new-password" onfocus="this.setAttribute('autocomplete', 'new-password');">

Answer 3

You can try changing the type attribute of your input field to search instead of text.

This will not allow the autofill suggestions to open up on that particular input field.

change this <input type="text" .... /> to <input type="search" ... />

Have tested on chrome 83 and safari 13.0.1. Works fine for me.

Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/search

Answer 4

You can avoid the Chrome autofill overlay by placing the places autocomplete <input> field outside of the <form> element (tested in Chrome 80.0.3987.149).

That does of course introduce new issues in terms of structuring and styling your HTML.

I recommend to have input fields such as <input name="street" type="hidden" /> or <input name="city" type="hidden" /> inside your <form> element that you then fill after the user selected an address from the places autocomplete widget outside of the <form> element.

Answer 5

I had username and password fields on the same page.

Put a simple unused <form></form> around those and this cleared up the Autocomplete problem.

Answer 6

For those that are using Angularjs, I created a directive based on @Rimmel answer that is working for me in Chrome 66.0.3359.139. Below is the code:

(function(){
  'use strict'; 
  angular.module('app.directive')
    .directive('stopAutofill', stopAutofillDirective);

  function stopAutofillDirective() {
      return {
        restrict: 'A',
        link: function (scope, element) {
            var observerHack = new MutationObserver(function () {
                observerHack.disconnect();
                element.attr("autocomplete", "new-password");
            });

            observerHack.observe(element[0], {
                attributes: true,
                attributeFilter: ['autocomplete']
            });
        }
      };
    };
})();