What does trigger Chrome Address Autofill Popup using Angular Material

Issue

In Chrome if we navigate to "Settings" and choose "Address and More"
enter image description here

then we are able to set up Addresses, that can be suggested by the browser on some forms.
enter image description here

I would like to understand, what exactly triggers the showing up of the Address Suggestion Pop-Up using Angular Material.

In my fist approach I tried following code:

<mat-form-field>
  <mat-label [attr.aria-label]="'First Name'">First Name</mat-label>
  <input matInput type="text" />
</mat-form-field>
<mat-form-field>
  <mat-label [attr.aria-label]="'Last Name'">Last Name</mat-label>
  <input matInput type="text" />
</mat-form-field>
<mat-form-field>
  <mat-label [attr.aria-label]="'City'">City</mat-label>
  <input matInput type="text" />
</mat-form-field>
<mat-form-field>
  <mat-label [attr.aria-label]="'Street'">Street</mat-label>
  <input matInput type="text" />
</mat-form-field>
<mat-form-field>
  <mat-label [attr.aria-label]="'Postal Code'">Postal Code</mat-label>
  <input matInput type="text" />
</mat-form-field>

StackBlitz: https://stackblitz.com/edit/angularmaterialautofill?file=src%2Fapp%2Fapp.component.html

Note, that I’m NOT looking for the autocomplete, which looks like this:

enter image description here

The question is regarding this popup:

enter image description here

What exatly triggers this popup from the DOM? What can trigger it using Angular Material?

—EDIT—

In a Google Developer Post I found following:

"In the past, many developers would add autocomplete="off" to their form fields to prevent the browser from performing any kind of autocomplete functionality. While Chrome will still respect this tag for autocomplete data, it will not respect it for autofill data."

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

So there must be something else, than autocomplete attribute, that triggers the Address Autofill.

For example this Form does trigger the Address Autofill if we click on City:
https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform

And if we check out the City element in the DOM, its form has autocomplete="off" and the City element itself does not have autocomplete attribute.
enter image description here

Solution

You can add the ‘name’ attribute to your inputs. See this link for usable values. The browser basically guesses at what values to provide for the autocomplete based on the ‘name’ attribute you add.

Answered By – steve

Answer Checked By – David Marino (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.