mat-autocomplete value not updating with browser autofill

[leveyh]

Bug, feature request, or proposal:

Bug.

What is the expected behavior?

FormControl value should change when using browser autofill to complete the address.

What is the current behavior?

FormControl value does not change. Validation fails on the field.

What are the steps to reproduce?

https://stackblitz.com/edit/angular-material2-issue-autocomplete-with-autofill

Start typing in the Name field. Use browser autofill to automatically fill out the rest of the form.

It seems as though the "Address line 1" field, which is controlled by a mat-autocomplete, fails to update after autofill, causing validation to fail.

What is the use-case or motivation for changing an existing behavior?

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular: 5.2.1
Material: 5.1.0
Browser: Chrome 64.0.3282.119

[mmalerba]

@crisbeto assigning to you since this seems specific to the autocomplete

[Rawr421]

I also have this problem with:
Angular 6.0.0
Material: 6.0.1

Form control validation is failing on address_line1 when autofill is used.

Also, autofill is not updating the filtered values, because the control value is not updated.

[ReallyNotARussianSpy]

I also have this problem. My form control's value is not updating after a browser autofill and it is causing my validation to not work for autocomplete with control's set to updateOn: 'blur'

document.getElementById('input-email')['value']; // "email@example.com"
this.loginForm.get('email').value; // ""

Angular 6.1.3
Angular Material 6.4.5

Thanks!

[daniel-nagy]

For anyone else, I'm using the following workaround

import { Component, Inject, ViewChild } from '@angular/core';
import { DOCUMENT } from '@angular/common';
import { MatAutocompleteTrigger } from '@angular/material';

@Component({
  ...
  template: `
    <input
      autocomplete="address-level1"
      (input)="onInput($event)"
      [matAutocomplete]="myAutocomplete"
      matInput
      #myAutocompleteTrigger="matAutocompleteTrigger">
      <mat-autocomplete #myAutocomplete="matAutocomplete">
        ...
      </mat-autocomplete>
  `
})
export class MyComponent {
  @ViewChild('myAutocompleteTrigger') private _myAutocompleteTrigger: MatAutocompleteTrigger;

  constructor(@Inject(DOCUMENT) private _document: Document) {

  }

  onInput = (event: KeyboardEvent) => {
    const target = event.currentTarget as HTMLInputElement;

    if (this._document.activeElement !== target) {
      this._myAutocompleteTrigger._onChange(target.value);
    }
  }
}

[angular-automatic-lock-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.}