Angular Material 2 browser autofill for mat-select not working

Question

I have a form that represents an address and I'm using mat-select for the state/province. Unfortunately it's not autofilling the state/province (I'm assuming because it's not a native select). Here is my markup:

<mat-form-field>
    <mat-select placeholder="State" 
        [(ngModel)]="state" 
        autocomplete="billing address-level1">
        <mat-option *ngFor="let s of states" [value]="s.abbreviation">{{ s.name }}</mat-option>
    </mat-select>
</mat-form-field>

I'm not sure if I'm missing something or if the browsers autofill isn't working because mat-select isn't a native control. Anyone have any idea how to make autofill work in this scenario? The only thing I can think of is creating a native select, binding it to the same model field and setting it's style to display: none.

Answer 1

If you want auto-complete use mat-autocomplete and not mat-select Here's a sample

<mat-form-field>
  <input type="text" placeholder="Address" matInput [(ngModel)]="state"
  [matAutocomplete]="auto">
    <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let s of states" [value]="s"> {{s}} </mat-option>
    </mat-autocomplete>
</mat-form-field>

Here's a stackblitz demo

Answer 2

Because mat-select doesn't use a real select under the hood.

The only workaround is creating an input with the same name property to catch autofill value from the browser and feed it to mat-select.

This input can't be hidden or display:none. Use postition: absolute with z-index: -1 or right: 1000% to "hide" it.

Answer 3

Please add following attribute in your input tag like

autocomplete="name"
autocomplete="email"
autocomplete="tel" 

etc.... in your html code.

Please refer this document for more details:

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

This document will help you to fix the issue.