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.

Urbai

Hi, is state from [(ngModel)]="state" equivalent of a state.abbreviation? I would also suggest to take an other variable name in your *ngFor to not duplicate your "state" variable (ex: *ngFor="let s of states"). – Retortion

Do you want to display value of autofill on load ? or you want to display autofill on click of mat-select option? can you please tell me – Thundery

@Retortion I've changed it to use s as the variable instead of state. While I understand it could be ambiguous, it doesn't solve the issue. – Urbai

@Thundery I do not want the autofill to display onload. I want the autofill to work as it does for any other website i.e. if I start to type in the Address 1 input field, address options are suggested by the browser. When I choose one of the options suggested, I'd like the rest of the address fields to auto populate. Currently all of the other address fields work as I've described except for the state drop down. – Urbai

@JosephPisano did you ever get this figured out? Seems like the two answers you got weren't even answering your question (autofill != autocomplete) – Raseda

@Raseda sorry for the late reply. No I was never able to get it to work but if anyone has figured it out, I'm all ears. – Urbai

I think it’s just not possible unfortunately. I had to switch to native select with some less than perfect css to get it to kind of blend in with material controls. – Raseda

Answer 1

The material/angular-material does not support browser autofill by default for the mat-select.

mat-select is not the standard type of input it will not work with autofill.

The issue has already opened https://github.com/angular/components/issues/19083 We' are waiting for the official solution.

Meanwhile, I customized and fixed the issue, please verify the below working example

1. Visually hidden input

    <input class="hide-text-for-autofill" type="text" name="country"  [formControl]="autoFillCountry">
   

.hide-text-for-autofill {
  position: absolute;
  z-index: -1;
  right: 1000%;
}

2. Update the hidden input value to mat select

     autoFillCountry = new FormControl();
     ................
     ................
     ................
   
    this.autoFillCountry.valueChanges.subscribe((selectedValue) => {
       this.formGroup.controls.country.setValue(selectedValue);
   
    });
   

stackblitz URL:

https://stackblitz.com/edit/mat-select-angular-material-autofill

I have tested in chrome and edge browsers, It's working as expected

Vesical

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.

Francium

Yea you could do something like this and just bind it to the same field. – Urbai

Answer 3

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

Rochdale

Yea I thought of this but was just hoping someone had an answer for the select. Thanks. – Urbai

I believe the OP is looking to use the native HTML autocomplete tag instead of an mat-autocomplete component. developers.google.com/web/updates/2015/06/… – Erect

@Erect that's also possible. It was just that the OP is looking for a solution using angular material – Rochdale

Thanks brijmcq, this is workable solution for Angular 13.x.x. But the DDL appears without dropdown arrow. Pls note importing 'MatAutocompleteModule' is required to work with this solution. – Lashawnda

Answer 4

Solved!!! Had to hack it like that:

// name ('state', 'country', etc..) is an input
<input class="clip or visually-hidden" type="text" name="{{name}}" [formControl]="control">

<mat-form-field>
  <mat-select [placeholder]="placeholder" [formControl]="control"
  [(value)]="control.value">
    <mat-option *ngFor="let option of options" [value]="option.value">
      {{ option.label }}
    </mat-option>
  </mat-select>
</mat-form-field>

Hope this helps!

Evenings

Yep this does work. Stinks that we have to hide a native control on the page and bind both to the same source but at least it works. 😎 – Urbai

Answer 5

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.

Coronal

I tried this prior to posting the question and it does not work. – Urbai