fr([MatSelect]): [Support Browser autocomplete]

[telb99]

Feature Description

It would be great if mat-select supported browser field auto completion in the same way a native select does.

Example markup:

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

Example based on Bug #8894 - Browser autofill for mat-select

This example from Stack Overflow suggests using a visually hidden input with the autocomplete attribute that has the same NgModel: Angular Material 2 browser autofill for mat-select not working

I would like mat-select to support the autocomplete attribute, and, if set, add a visually hidden input that removes the need for the work around.

Use Case

User is filling out a form that contains mat-select fields that should be filled via browser auto complete.

For example an address form with mat-select for country and state/postcode.

User selects from previously used addresses in their browser and address fields auto complete but country and state do not.

With this change country and state would also auto complete.

[Akxe]

This is duplicate, @material team plans to include this feature in a rework of mat-select. Sorry cannot find details.

[rajaramtt]

Country and state mat-select not working for the browser autofill data, It's a basic and necessary feature!.

[angular-robot[bot]]

Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.

Find more details about Angular's feature request process in our documentation.

[Akxe]

This is sort of fixed... typing will focus on the element that begins with the correct text. Hitting enter will then select the option highlited.

[anojJCDC]

For me it looks like not fixed for the version angular 13.1. If it is fixed, can you pls provide an example how to implement autofill feature. Thank you Might be specific to Chrome browser, I'm using Chrome Version 99.0.4844.51 (Official Build) (64-bit)

[anojJCDC]

There's one workable solution given here. But the DDL shown without down arrow. https://stackblitz.com/edit/angular-tuy3hc?file=app%2Fautocomplete-simple-example.html

[angular-robot[bot]]

Thank you for submitting your feature request! Looks like during the polling process it didn't collect a sufficient number of votes to move to the next stage.

We want to keep Angular rich and ergonomic and at the same time be mindful about its scope and learning journey. If you think your request could live outside Angular's scope, we'd encourage you to collaborate with the community on publishing it as an open source package.

You can find more details about the feature request process in our documentation.