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

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

@@ -402,11 +402,11 @@ 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._previousValue !== value && document.activeElement === event.target) {
+    if (this._previousValue !== value) {
       this._previousValue = value;
       this._onChange(value);
 
-      if (this._canOpen()) {
+      if (this._canOpen() && document.activeElement === event.target) {
         this.openPanel();
       }
     }

src/lib/autocomplete/autocomplete.spec.ts

@@ -571,6 +571,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();