fix(autocomplete): autofill value changes not being propagated to the form control

Currently we skip any `input` events on an autocomplete trigger that have been dispatched while the element is blurre, in order to handle some IE-specific cases. This ends up preventing the autocomplete from picking up any changes to its value that have come as a result of the browser autofill. These changes move some logic around to handle both autofilling and the IE issues.

Fixes #9704.

Author: crisbeto

src/lib/autocomplete/autocomplete-trigger.ts

@@ -330,11 +330,15 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
     // filter out all of the extra events, we save the value on focus and between
     // `input` events, and we check whether it changed.
     // See: https://connect.microsoft.com/IE/feedback/details/885747/
-    if (this._canOpen() && this._previousValue !== value &&
-      document.activeElement === event.target) {
+    if (this._previousValue !== value) {
+      // We still want to propagate any value changes, otherwise we can miss
+      // out on cases like the browser autofilling the input value.
       this._previousValue = value;
       this._onChange(value);
-      this.openPanel();
+
+      if (this._canOpen() && document.activeElement === event.target) {
+        this.openPanel();
+      }
     }
   }
 

src/lib/autocomplete/autocomplete.spec.ts

@@ -455,6 +455,18 @@ describe('MatAutocomplete', () => {
           .toEqual('al', 'Expected control value to be updated as user types.');
     });
 
+    it('should update control value when autofilling', () => {
+      // Simulate the browser autofilling the input by setting a value and
+      // dispatching an `input` event while the input is out of focus.
+      expect(document.activeElement).not.toBe(input, 'Expected input not to have focus.');
+      input.value = 'Alabama';
+      dispatchFakeEvent(input, 'input');
+      fixture.detectChanges();
+
+      expect(fixture.componentInstance.stateCtrl.value)
+          .toBe('Alabama', 'Expected value to be propagated to the form control.');
+    });
+
     it('should update control value when option is selected with option value', fakeAsync(() => {
       fixture.componentInstance.trigger.openPanel();
       fixture.detectChanges();