fix(focus-monitor): reenter ngzone before emitting

Author: mmalerba

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

@@ -5,7 +5,7 @@ import {
   dispatchMouseEvent,
   patchElementFocus,
 } from '@angular/cdk/testing';
-import {Component} from '@angular/core';
+import {Component, ElementRef, ViewChild} from '@angular/core';
 import {ComponentFixture, fakeAsync, inject, TestBed, tick} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
 import {FocusMonitor, FocusOrigin, TOUCH_BUFFER_MS} from './focus-monitor';
@@ -212,7 +212,6 @@ describe('FocusMonitor', () => {
 
     expect(buttonElement.classList.length).toBe(0, 'button should not have any focus classes');
   }));
-
 });
 
 
@@ -393,6 +392,39 @@ describe('cdkMonitorFocus', () => {
   });
 });
 
+describe('FocusMonitor observable stream', () => {
+  let fixture: ComponentFixture<MonitoredElementRequiringChangeDetection>;
+  let buttonElement: HTMLElement;
+  let focusMonitor: FocusMonitor;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [A11yModule],
+      declarations: [
+        MonitoredElementRequiringChangeDetection,
+      ],
+    }).compileComponents();
+  });
+
+  beforeEach(inject([FocusMonitor], (fm: FocusMonitor) => {
+    fixture = TestBed.createComponent(MonitoredElementRequiringChangeDetection);
+    fixture.detectChanges();
+
+    buttonElement = fixture.componentInstance.button.nativeElement;
+    focusMonitor = fm;
+
+    patchElementFocus(buttonElement);
+  }));
+
+  it('should emit inside the NgZone', () => {
+    fixture.detectChanges();
+    expect(buttonElement.innerText).toBe('');
+    buttonElement.focus();
+    fixture.detectChanges();
+    expect(buttonElement.innerText).toBe('program');
+  });
+});
+
 
 @Component({
   template: `<button>focus me!</button>`
@@ -418,3 +450,21 @@ class ComplexComponentWithMonitorElementFocus {}
   template: `<div tabindex="0" cdkMonitorSubtreeFocus><button></button></div>`
 })
 class ComplexComponentWithMonitorSubtreeFocus {}
+
+@Component({
+  template: `<button #b>{{origin}}</button>`
+})
+class MonitoredElementRequiringChangeDetection {
+  @ViewChild('b') button: ElementRef;
+  origin: string;
+
+  constructor(private _focusMonitor: FocusMonitor) {}
+
+  ngOnInit() {
+    this._focusMonitor.monitor(this.button.nativeElement).subscribe(o => this.origin = o || '');
+  }
+
+  ngOnDestroy() {
+    this._focusMonitor.stopMonitoring(this.button.nativeElement);
+  }
+}

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

@@ -307,7 +307,7 @@ export class FocusMonitor implements OnDestroy {
     }
 
     this._setClasses(element, this._origin);
-    elementInfo.subject.next(this._origin);
+    this._emitOrigin(elementInfo.subject, this._origin);
     this._lastFocusOrigin = this._origin;
     this._origin = null;
   }
@@ -328,7 +328,11 @@ export class FocusMonitor implements OnDestroy {
     }
 
     this._setClasses(element);
-    elementInfo.subject.next(null);
+    this._emitOrigin(elementInfo.subject, null);
+  }
+
+  private _emitOrigin(subject: Subject<FocusOrigin>, origin: FocusOrigin) {
+    this._ngZone.run(() => subject.next(origin));
   }
 
   private _incrementMonitoredElementCount() {
@@ -345,7 +349,6 @@ export class FocusMonitor implements OnDestroy {
       this._unregisterGlobalListeners = () => {};
     }
   }
-
 }