Angular Material 2 browser autofill for mat-select not working

Related searches

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.

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.

Angular Material 2 browser autofill for mat-select not working, 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� Unfortunately the underlying issue of not having an appropriate event related to autofill must be addressed by browser vendors. However in the meantime, we can use a custom directive to ensure AngularJS knows about form changes made by autofill at time of form submit.

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

fr([MatSelect]): [Support Browser autocomplete] � Issue #19083 , Feature Description It would be great if mat-select supported browser field auto Angular Material 2 browser autofill for mat-select not working. @devversion The codepen.io you linked specifically indicates how md-select does not work with required attribute. You only need to input name and e-mail in your codepen for the form to pass, md-select is not needed.

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!

Browser autofill for mat-select � Issue #8894 � angular/components , Please keep GitHub issues for bug reports / feature requests. Better avenues for troubleshooting / questions are stack overflow, gitter, mailing list,� fix(autocomplete): fix md-not-found bug with multiple autocompletes If a developer used more than one autocomplete on the page, all autocompletes after the first which included a md-not-found template would incorrectly assume that they also had one even if they did not.

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%;
}
  1. 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

fr([MatSelect]): [Support Browser autocomplete], This example from Stack Overflow suggests using a visually hidden input with the autocomplete attribute that has the same NgModel: Angular Material 2 browser� Bug: If the autocomplete input field already has a value and this is changed by deleting the previous value and selecting a new option from the list, then the autocomplete's onSelectionChange fires twice.

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.

Autocomplete, <mat-autocomplete #auto="matAutocomplete"> <mat-option *ngFor="let option of We use reactive forms in this example because it makes subscribing to� Angular Material Select provides selectionChange event that emits when the selected value has been changed by the user. The event selectionChange is used with <mat-select> element as following.

<mat-autocomplete> can be used to provide search results from local or remote data sources. In this chapter, we will showcase the configuration required to draw a autocomplete control using Angular Material. Create Angular Application. Follow the following steps to update the Angular application we created in Angular 6 - Project Setup chapter −

Actual Behavior: What is the issue? * Clicking the mdAutocomplete x in Mobile Safari has no effect. What is the expected behavior? Input contents should be cleared. CodePen (or steps to reproduce t

This strategy allows you to continue to build your web application to support multiple browsers, but only load the necessary code that the browser needs. For more information about how this works, see Differential Loading in the Deployment guide .

Comments
  • 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").
  • 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
  • @GeoAstronaute 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.
  • @Rutvij07 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.
  • 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.
  • Yea you could do something like this and just bind it to the same field.
  • Yea I thought of this but was just hoping someone had an answer for the select. Thanks.
  • 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/…
  • @DanilF that's also possible. It was just that the OP is looking for a solution using angular material
  • 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. 😎
  • I tried this prior to posting the question and it does not work.