Components: Why is there interference between mat-autocomplete and browser autocomplete?

[tiancovici]

Bug:

Clicking on autocomplete opens browser autocomplete on top of material2 autocomplete
Note: sometimes it takes a double click to re open the browser's autocomplete.

Expected behavior:

Browser autocomplete should be disabled

Current implementation

<mat-form-field id="recipe-form__nations" >
    <input type="text" matInput ngModel name="nation" placeholder="Nation" autocomplete="off" [matAutocomplete]="auto">
    <mat-autocomplete  #auto="matAutocomplete">
        <mat-option *ngFor="let nation of nationalities" [value]="">
            {{ nation }}
        </mat-option>
    </mat-autocomplete>
</mat-form-field>

Version in use?

    "@angular/animations": "6.0.5",
    "@angular/cdk": "^6.2.1",
    "@angular/common": "6.0.5",
    "@angular/compiler": "6.0.5",
    "@angular/core": "6.0.5",
    "@angular/forms": "6.0.5",
    "@angular/http": "6.0.5",
    "@angular/material": "^6.2.1",

[crisbeto]

Material does set autocomplete="off", but it seems like browsers can ignore it in some cases (see https://stackoverflow.com/questions/12374442/chrome-browser-ignoring-autocomplete-off). I could work around it by setting it to a random value instead of off (e.g. autocomplete="something"), but I'm not sure what the accessibility implications might be if we rolled this into Material.

[tiancovici]

Doesn't work =/
Tried on mat-form-field, input, mat-autocomplete, and all together, then tried on from. Didn't work.

[crisbeto]

You're supposed to set some random value for the autocomplete attribute on the input element. That being said, that currently isn't possible, because Material overrides it to off. I've submitted #11926 to allow for an alternate value to be set.

[thw0rted]

I came here to complain that it's still broken, but it turns out that you need a non-standard autocomplete attribute and a name attribute, or you wind up with browser autofill.

I don't suppose a Googler on the Material team could talk to a Googler on the Chrome team about making this Just Work without us devs having to override the autocomplete attribute all the time? To be clear, with the way Chrome respects autocomplete=off (i.e., it doesn't, at all), it never makes sense to allow autocomplete=off in a matAutocompleteTrigger; it should be a compile-time error, or ideally, Material should just magically fix it for you.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}