fix change detection

Author: mmalerba

src/lib/autocomplete/autocomplete.spec.ts

@@ -102,11 +102,11 @@ describe('MatAutocomplete', () => {
     let fixture: ComponentFixture<SimpleAutocomplete>;
     let input: HTMLInputElement;
 
-    beforeEach(fakeAsync(() => {
+    beforeEach(() => {
       fixture = createComponent(SimpleAutocomplete);
       fixture.detectChanges();
       input = fixture.debugElement.query(By.css('input')).nativeElement;
-    }));
+    });
 
     it('should open the panel when the input is focused', () => {
       expect(fixture.componentInstance.trigger.panelOpen)
@@ -412,7 +412,7 @@ describe('MatAutocomplete', () => {
     }));
   });
 
-  it('should have the correct text direction in RTL', fakeAsync(() => {
+  it('should have the correct text direction in RTL', () => {
     const rtlFixture = createComponent(SimpleAutocomplete, [
       {provide: Directionality, useFactory: () => ({value: 'rtl'})},
     ]);
@@ -424,18 +424,18 @@ describe('MatAutocomplete', () => {
     const overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane')!;
     expect(overlayPane.getAttribute('dir')).toEqual('rtl');
 
-  }));
+  });
 
   describe('forms integration', () => {
     let fixture: ComponentFixture<SimpleAutocomplete>;
     let input: HTMLInputElement;
 
-    beforeEach(fakeAsync(() => {
+    beforeEach(() => {
       fixture = createComponent(SimpleAutocomplete);
       fixture.detectChanges();
 
       input = fixture.debugElement.query(By.css('input')).nativeElement;
-    }));
+    });
 
     it('should update control value as user types with input value', () => {
       fixture.componentInstance.trigger.openPanel();
@@ -616,23 +616,22 @@ describe('MatAutocomplete', () => {
           .toBe(true, `Expected control to become touched on blur.`);
     });
 
-    it('should disable the input when used with a value accessor and without `matInput`',
-        fakeAsync(() => {
-          overlayContainer.ngOnDestroy();
-          fixture.destroy();
-          TestBed.resetTestingModule();
+    it('should disable the input when used with a value accessor and without `matInput`', () => {
+      overlayContainer.ngOnDestroy();
+      fixture.destroy();
+      TestBed.resetTestingModule();
 
-          const plainFixture = createComponent(PlainAutocompleteInputWithFormControl);
-          plainFixture.detectChanges();
-          input = plainFixture.nativeElement.querySelector('input');
+      const plainFixture = createComponent(PlainAutocompleteInputWithFormControl);
+      plainFixture.detectChanges();
+      input = plainFixture.nativeElement.querySelector('input');
 
-          expect(input.disabled).toBe(false);
+      expect(input.disabled).toBe(false);
 
-          plainFixture.componentInstance.formControl.disable();
-          plainFixture.detectChanges();
+      plainFixture.componentInstance.formControl.disable();
+      plainFixture.detectChanges();
 
-          expect(input.disabled).toBe(true);
-        }));
+      expect(input.disabled).toBe(true);
+    });
 
   });
 
@@ -1116,12 +1115,12 @@ describe('MatAutocomplete', () => {
     let fixture: ComponentFixture<SimpleAutocomplete>;
     let input: HTMLInputElement;
 
-    beforeEach(fakeAsync(() => {
+    beforeEach(() => {
       fixture = createComponent(SimpleAutocomplete);
       fixture.detectChanges();
 
       input = fixture.debugElement.query(By.css('input')).nativeElement;
-    }));
+    });
 
     it('should set role of input to combobox', () => {
       expect(input.getAttribute('role'))
@@ -1233,13 +1232,13 @@ describe('MatAutocomplete', () => {
     let input: HTMLInputElement;
     let inputReference: HTMLInputElement;
 
-    beforeEach(fakeAsync(() => {
+    beforeEach(() => {
       fixture = createComponent(SimpleAutocomplete);
       fixture.detectChanges();
 
       input = fixture.debugElement.query(By.css('input')).nativeElement;
       inputReference = fixture.debugElement.query(By.css('.mat-input-flex')).nativeElement;
-    }));
+    });
 
     it('should use below positioning by default', fakeAsync(() => {
       fixture.componentInstance.trigger.openPanel();
@@ -1320,10 +1319,10 @@ describe('MatAutocomplete', () => {
   describe('Option selection', () => {
     let fixture: ComponentFixture<SimpleAutocomplete>;
 
-    beforeEach(fakeAsync(() => {
+    beforeEach(() => {
       fixture = createComponent(SimpleAutocomplete);
       fixture.detectChanges();
-    }));
+    });
 
     it('should deselect any other selected option', fakeAsync(() => {
       fixture.componentInstance.trigger.openPanel();
@@ -1513,10 +1512,10 @@ describe('MatAutocomplete', () => {
   describe('without matInput', () => {
     let fixture: ComponentFixture<AutocompleteWithNativeInput>;
 
-    beforeEach(fakeAsync(() => {
+    beforeEach(() => {
       fixture = createComponent(AutocompleteWithNativeInput);
       fixture.detectChanges();
-    }));
+    });
 
     it('should not throw when clicking outside', fakeAsync(() => {
       dispatchFakeEvent(fixture.debugElement.query(By.css('input')).nativeElement, 'focus');
@@ -1529,28 +1528,27 @@ describe('MatAutocomplete', () => {
 
   describe('misc', () => {
 
-    it('should allow basic use without any forms directives', fakeAsync(() => {
+    it('should allow basic use without any forms directives', () => {
       expect(() => {
         const fixture = createComponent(AutocompleteWithoutForms);
         fixture.detectChanges();
 
         const input = fixture.debugElement.query(By.css('input')).nativeElement;
         typeInElement('d', input);
         fixture.detectChanges();
-        tick();
 
         const options =
             overlayContainerElement.querySelectorAll('mat-option') as NodeListOf<HTMLElement>;
         expect(options.length).toBe(1);
       }).not.toThrowError();
-    }));
+    });
 
-    it('should display an empty input when the value is undefined with ngModel', fakeAsync(() => {
+    it('should display an empty input when the value is undefined with ngModel', () => {
       const fixture = createComponent(AutocompleteWithNgModel);
       fixture.detectChanges();
 
       expect(fixture.debugElement.query(By.css('input')).nativeElement.value).toBe('');
-    }));
+    });
 
     it('should display the number when the selected option is the number zero', fakeAsync(() => {
       const fixture = createComponent(AutocompleteWithNumbers);
@@ -1562,7 +1560,7 @@ describe('MatAutocomplete', () => {
       expect(fixture.debugElement.query(By.css('input')).nativeElement.value).toBe('0');
     }));
 
-    it('should work when input is wrapped in ngIf', fakeAsync(() => {
+    it('should work when input is wrapped in ngIf', () => {
       const fixture = createComponent(NgIfAutocomplete);
       fixture.detectChanges();
 
@@ -1575,9 +1573,9 @@ describe('MatAutocomplete', () => {
           .toContain('One', `Expected panel to display when input is focused.`);
       expect(overlayContainerElement.textContent)
           .toContain('Two', `Expected panel to display when input is focused.`);
-    }));
+    });
 
-    it('should filter properly with ngIf after setting the active item', fakeAsync(() => {
+    it('should filter properly with ngIf after setting the active item', () => {
       const fixture = createComponent(NgIfAutocomplete);
       fixture.detectChanges();
 
@@ -1591,19 +1589,18 @@ describe('MatAutocomplete', () => {
       const input = fixture.debugElement.query(By.css('input')).nativeElement;
       typeInElement('o', input);
       fixture.detectChanges();
-      tick();
 
       expect(fixture.componentInstance.matOptions.length).toBe(2);
-    }));
+    });
 
-    it('should throw if the user attempts to open the panel too early', fakeAsync(() => {
+    it('should throw if the user attempts to open the panel too early', () => {
       const fixture = createComponent(AutocompleteWithoutPanel);
       fixture.detectChanges();
 
       expect(() => {
         fixture.componentInstance.trigger.openPanel();
       }).toThrow(getMatAutocompleteMissingPanelError());
-    }));
+    });
 
     it('should not throw on init, even if the panel is not defined', fakeAsync(() => {
       expect(() => {
@@ -1682,7 +1679,7 @@ describe('MatAutocomplete', () => {
 
   });
 
-  it('should have correct width when opened', fakeAsync(() => {
+  it('should have correct width when opened', () => {
     const widthFixture = createComponent(SimpleAutocomplete);
     widthFixture.componentInstance.width = 300;
     widthFixture.detectChanges();
@@ -1705,9 +1702,9 @@ describe('MatAutocomplete', () => {
 
     // Firefox, edge return a decimal value for width, so we need to parse and round it to verify
     expect(Math.ceil(parseFloat(overlayPane.style.width as string))).toBe(500);
-  }));
+  });
 
-  it('should update the width while the panel is open', fakeAsync(() => {
+  it('should update the width while the panel is open', () => {
     const widthFixture = createComponent(SimpleAutocomplete);
 
     widthFixture.componentInstance.width = 300;
@@ -1729,7 +1726,7 @@ describe('MatAutocomplete', () => {
     widthFixture.detectChanges();
 
     expect(Math.ceil(parseFloat(overlayPane.style.width as string))).toBe(500);
-  }));
+  });
 
   it('should show the panel when the options are initialized later within a component with ' +
     'OnPush change detection', fakeAsync(() => {

src/lib/form-field/form-field.ts

@@ -268,7 +268,7 @@ export class MatFormField extends _MatFormFieldMixinBase
 
     Promise.resolve().then(() => {
       this.updateOutlineGap();
-      this._changeDetectorRef.detectChanges();
+      this._changeDetectorRef.markForCheck();
     });
   }