fix(autocomplete): don't override native autocomplete attribute

Setting the native `autocomplete` attribute to random can sometimes be used to work around the browser not disabling the native autocompletion, however we always override it to `off`. These changes allow the consumer to opt-in to a different value.

Fixes angular#11818.

src/lib/autocomplete/autocomplete-trigger.ts

@@ -98,7 +98,7 @@ export function getMatAutocompleteMissingPanelError(): Error {
 @Directive({
   selector: `input[matAutocomplete], textarea[matAutocomplete]`,
   host: {
-    'autocomplete': 'off',
+    '[attr.autocomplete]': 'autocompleteAttribute',
     '[attr.role]': 'autocompleteDisabled ? null : "combobox"',
     '[attr.aria-autocomplete]': 'autocompleteDisabled ? null : "list"',
     '[attr.aria-activedescendant]': 'activeOption?.id',
@@ -153,6 +153,12 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
    */
   @Input('matAutocompleteConnectedTo') connectedTo: MatAutocompleteOrigin;
 
+  /**
+   * `autocomplete` attribute to be set on the input element.
+   * @docs-private
+   */
+  @Input('autocomplete') autocompleteAttribute: string = 'off';
+
   /**
    * Whether the autocomplete is disabled. When disabled, the element will
    * act as a regular input and the user won't be able to open the panel.

src/lib/autocomplete/autocomplete.spec.ts

@@ -522,6 +522,15 @@ describe('MatAutocomplete', () => {
     expect(boundingBox.getAttribute('dir')).toEqual('ltr');
   });
 
+  it('should be able to set a custom value for the `autocomplete` attribute', () => {
+    const fixture = createComponent(AutocompleteWithNativeAutocompleteAttribute);
+    const input = fixture.nativeElement.querySelector('input');
+
+    fixture.detectChanges();
+
+    expect(input.getAttribute('autocomplete')).toBe('changed');
+  });
+
   describe('forms integration', () => {
     let fixture: ComponentFixture<SimpleAutocomplete>;
     let input: HTMLInputElement;
@@ -2377,3 +2386,14 @@ class AutocompleteWithDifferentOrigin {
   selectedValue: string;
   values = ['one', 'two', 'three'];
 }
+
+
+@Component({
+  template: `
+    <input autocomplete="changed" [(ngModel)]="value" [matAutocomplete]="auto"/>
+    <mat-autocomplete #auto="matAutocomplete"></mat-autocomplete>
+  `
+})
+class AutocompleteWithNativeAutocompleteAttribute {
+  value: string;
+}