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

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.

[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.