fix(focus-origin): focus origin sometimes invalid in firefox 57

* Sometimes the focus origin is not valid because Firefox seems to focus a tick after the keyboard/interaction event fired a tick before. To ensure the focus origin is always correct, the focus origin will be added to the next tick event loop

Fixes #6984

Author: devversion

src/cdk/a11y/focus-monitor/focus-monitor.spec.ts

@@ -6,7 +6,7 @@ import {
   patchElementFocus,
 } from '@angular/cdk/testing';
 import {Component} from '@angular/core';
-import {ComponentFixture, fakeAsync, inject, TestBed, tick} from '@angular/core/testing';
+import {ComponentFixture, fakeAsync, flush, inject, TestBed, tick} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
 import {FocusMonitor, FocusOrigin, TOUCH_BUFFER_MS} from './focus-monitor';
 import {A11yModule} from '../index';
@@ -54,7 +54,7 @@ describe('FocusMonitor', () => {
     dispatchKeyboardEvent(document, 'keydown', TAB);
     buttonElement.focus();
     fixture.detectChanges();
-    tick();
+    flush();
 
     expect(buttonElement.classList.length)
         .toBe(2, 'button should have exactly 2 focus classes');
@@ -70,7 +70,7 @@ describe('FocusMonitor', () => {
     dispatchMouseEvent(buttonElement, 'mousedown');
     buttonElement.focus();
     fixture.detectChanges();
-    tick();
+    flush();
 
     expect(buttonElement.classList.length)
         .toBe(2, 'button should have exactly 2 focus classes');
@@ -114,7 +114,7 @@ describe('FocusMonitor', () => {
 
   it('focusVia keyboard should simulate keyboard focus', fakeAsync(() => {
     focusMonitor.focusVia(buttonElement, 'keyboard');
-    tick();
+    flush();
 
     expect(buttonElement.classList.length)
         .toBe(2, 'button should have exactly 2 focus classes');
@@ -128,7 +128,7 @@ describe('FocusMonitor', () => {
   it('focusVia mouse should simulate mouse focus', fakeAsync(() => {
     focusMonitor.focusVia(buttonElement, 'mouse');
     fixture.detectChanges();
-    tick();
+    flush();
 
     expect(buttonElement.classList.length)
         .toBe(2, 'button should have exactly 2 focus classes');
@@ -142,7 +142,7 @@ describe('FocusMonitor', () => {
   it('focusVia mouse should simulate mouse focus', fakeAsync(() => {
     focusMonitor.focusVia(buttonElement, 'touch');
     fixture.detectChanges();
-    tick();
+    flush();
 
     expect(buttonElement.classList.length)
         .toBe(2, 'button should have exactly 2 focus classes');
@@ -156,7 +156,7 @@ describe('FocusMonitor', () => {
   it('focusVia program should simulate programmatic focus', fakeAsync(() => {
     focusMonitor.focusVia(buttonElement, 'program');
     fixture.detectChanges();
-    tick();
+    flush();
 
     expect(buttonElement.classList.length)
         .toBe(2, 'button should have exactly 2 focus classes');
@@ -213,6 +213,20 @@ describe('FocusMonitor', () => {
     expect(buttonElement.classList.length).toBe(0, 'button should not have any focus classes');
   }));
 
+  it('should not clear the focus origin too early in the current event loop', fakeAsync(() => {
+    dispatchKeyboardEvent(document, 'keydown', TAB);
+
+    // Simulate the behavior of Firefox 57 where the focus event sometimes happens a tick later.
+    tick();
+
+    buttonElement.focus();
+
+    // Since the timeout doesn't clear the focus origin too early as with the `0ms` timeout, the
+    // focus origin should be reported properly.
+    expect(changeHandler).toHaveBeenCalledWith('keyboard');
+
+    flush();
+  }));
 });
 
 
@@ -250,7 +264,7 @@ describe('cdkMonitorFocus', () => {
       dispatchKeyboardEvent(document, 'keydown', TAB);
       buttonElement.focus();
       fixture.detectChanges();
-      tick();
+      flush();
 
       expect(buttonElement.classList.length)
           .toBe(2, 'button should have exactly 2 focus classes');
@@ -266,7 +280,7 @@ describe('cdkMonitorFocus', () => {
       dispatchMouseEvent(buttonElement, 'mousedown');
       buttonElement.focus();
       fixture.detectChanges();
-      tick();
+      flush();
 
       expect(buttonElement.classList.length)
           .toBe(2, 'button should have exactly 2 focus classes');

src/cdk/a11y/focus-monitor/focus-monitor.ts

@@ -189,7 +189,7 @@ export class FocusMonitor implements OnDestroy {
     };
 
     // When the touchstart event fires the focus event is not yet in the event queue. This means
-    // we can't rely on the trick used above (setting timeout of 0ms). Instead we wait 650ms to
+    // we can't rely on the trick used above (setting timeout of 1ms). Instead we wait 650ms to
     // see if a focus happens.
     let documentTouchstartListener = (event: TouchEvent) => {
       if (this._touchTimeoutId != null) {
@@ -261,7 +261,7 @@ export class FocusMonitor implements OnDestroy {
    */
   private _setOriginForCurrentEventQueue(origin: FocusOrigin): void {
     this._origin = origin;
-    this._originTimeoutId = setTimeout(() => this._origin = null, 0);
+    this._originTimeoutId = setTimeout(() => this._origin = null, 1);
   }
 
   /**

src/lib/menu/menu.spec.ts

@@ -1,4 +1,12 @@
-import {async, ComponentFixture, fakeAsync, inject, TestBed, tick} from '@angular/core/testing';
+import {
+  async,
+  ComponentFixture,
+  fakeAsync,
+  flush,
+  inject,
+  TestBed,
+  tick,
+} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {
@@ -363,7 +371,7 @@ describe('MatMenu', () => {
       fixture.detectChanges();
       tick(500);
       zone!.simulateZoneExit();
-      tick();
+      flush();
 
       const item = document.querySelector('.mat-menu-panel [mat-menu-item]')!;
 

src/lib/sidenav/drawer.spec.ts

@@ -5,6 +5,7 @@ import {
   ComponentFixture,
   TestBed,
   discardPeriodicTasks,
+  flush,
 } from '@angular/core/testing';
 import {Component, ElementRef, ViewChild} from '@angular/core';
 import {By} from '@angular/platform-browser';
@@ -75,7 +76,7 @@ describe('MatDrawer', () => {
       drawerBackdropElement.nativeElement.style.transition = 'none';
       fixture.debugElement.query(By.css('.open')).nativeElement.click();
       fixture.detectChanges();
-      tick();
+      flush();
       fixture.detectChanges();
 
       fixture.debugElement.query(By.css('.close')).nativeElement.click();
@@ -84,7 +85,7 @@ describe('MatDrawer', () => {
       expect(testComponent.closeCount).toBe(0);
       expect(testComponent.closeStartCount).toBe(0);
 
-      tick();
+      flush();
       expect(testComponent.closeStartCount).toBe(1);
       fixture.detectChanges();
 
@@ -116,7 +117,7 @@ describe('MatDrawer', () => {
 
       drawer.componentInstance.open();
       fixture.detectChanges();
-      tick();
+      flush();
       fixture.detectChanges();
 
       drawer.componentInstance.close().then(result => {
@@ -125,7 +126,7 @@ describe('MatDrawer', () => {
         expect(result.animationFinished).toBe(true);
       });
       fixture.detectChanges();
-      tick();
+      flush();
       fixture.detectChanges();
     }));
 
@@ -144,7 +145,7 @@ describe('MatDrawer', () => {
       fixture.debugElement.query(By.css('.close')).nativeElement.click();
       fixture.detectChanges();
 
-      tick();
+      flush();
       fixture.detectChanges();
 
       expect(testComponent.openCount).toBe(1);
@@ -168,23 +169,23 @@ describe('MatDrawer', () => {
 
       openButtonElement.click();
       fixture.detectChanges();
-      tick();
+      flush();
 
       expect(testComponent.backdropClickedCount).toBe(0);
 
       fixture.debugElement.query(By.css('.mat-drawer-backdrop')).nativeElement.click();
       fixture.detectChanges();
-      tick();
+      flush();
 
       expect(testComponent.backdropClickedCount).toBe(1);
 
       openButtonElement.click();
       fixture.detectChanges();
-      tick();
+      flush();
 
       fixture.debugElement.query(By.css('.close')).nativeElement.click();
       fixture.detectChanges();
-      tick();
+      flush();
 
       expect(testComponent.backdropClickedCount).toBe(1);
     }));
@@ -208,7 +209,7 @@ describe('MatDrawer', () => {
 
       dispatchKeyboardEvent(drawer.nativeElement, 'keydown', ESCAPE);
       fixture.detectChanges();
-      tick();
+      flush();
 
       expect(testComponent.closeCount).toBe(1, 'Expected one close event.');
       expect(testComponent.closeStartCount).toBe(1, 'Expected one close start event.');
@@ -271,12 +272,12 @@ describe('MatDrawer', () => {
       openButton.focus();
       drawer.open();
       fixture.detectChanges();
-      tick();
+      flush();
       drawerButton.focus();
 
       drawer.close();
       fixture.detectChanges();
-      tick();
+      flush();
 
       expect(document.activeElement)
           .toBe(openButton, 'Expected focus to be restored to the open button on close.');
@@ -508,7 +509,7 @@ describe('MatDrawerContainer', () => {
 
     testComponent.drawerContainer.close();
     fixture.detectChanges();
-    tick();
+    flush();
 
     expect(drawers.every(drawer => drawer.componentInstance.opened)).toBe(false);
   }));

src/lib/tooltip/tooltip.spec.ts

@@ -2,6 +2,7 @@ import {
   async,
   ComponentFixture,
   fakeAsync,
+  flush,
   flushMicrotasks,
   inject,
   TestBed,
@@ -564,10 +565,10 @@ describe('MatTooltip', () => {
         fixture.detectChanges();
       }).not.toThrow();
 
-      tick(0);
+      flush();
     }));
 
-    it('should not show the tooltip on progammatic focus', fakeAsync(() => {
+    it('should not show the tooltip on programmatic focus', fakeAsync(() => {
       assertTooltipInstance(tooltipDirective, false);
 
       buttonElement.focus();