improve(focus): ensure correct count of focus events (ngneat#373)

In browsers, HTMLElement.focus() always sets `document.activeElement`, but
focus + blur events may or may not be sent depending on focus. This ensures
that focus + blur events are always sent if appropriate, and `document.activeElement` is set.

Author: johncrim

projects/spectator/src/lib/internals/element-focus.ts

@@ -4,8 +4,47 @@ import { isRunningInJsDom } from '../utils';
 /** Property name added to HTML Elements to ensure we don't double-patch focus methods on an element. */
 const IS_FOCUS_PATCHED_PROP = '_patched_focus';
 
+/** Ensures that a single set of matching focus and blur events occur when HTMLElement.focus() is called. */
+class FocusEventWatcher implements EventListenerObject {
+
+  private readonly _active: Element | null;
+  private _blurred = false;
+  private _focused = false;
+
+  constructor(private readonly _e: HTMLElement) {
+    this._active = _e.ownerDocument.activeElement;
+    this._e.addEventListener('focus', this);
+    this._active?.addEventListener('blur', this);
+  }
+  public handleEvent(evt: Event): void {
+    if (evt.type === 'focus') {
+      this._focused = true;
+    }
+    else if (evt.type === 'blur') {
+      this._blurred = true;
+    }
+  }
+
+  /**
+   * If focus and blur events haven't occurred, fire fake ones.
+   */
+  public ensureFocusEvents() {
+    this._e.removeEventListener('focus', this);
+    this._active?.removeEventListener('blur', this);
+
+    // Ensure activeElement is blurred
+    if (this._active && !this._blurred && this._active === this._e.ownerDocument.activeElement) {
+      dispatchFakeEvent(this._active, 'blur');
+    }
+
+    if (!this._focused) {
+      dispatchFakeEvent(this._e, 'focus'); // Needed to cause focus event
+    }
+  }
+}
+
 /**
- * Patches an elements focus and blur methods to emit events consistently and predictably.
+ * Patches an element's focus and blur methods to emit events consistently and predictably in tests.
  * This is necessary, because some browsers, like IE11, will call the focus handlers asynchronously,
  * while others won't fire them at all if the browser window is not focused.
  *
@@ -17,15 +56,12 @@ export function patchElementFocus(element: HTMLElement): void {
   if (!isRunningInJsDom() && (element[IS_FOCUS_PATCHED_PROP] === undefined)) {
     const baseFocus = element.focus.bind(element);
     element.focus = (options) => {
-      // Blur current active
-      const active = element.ownerDocument.activeElement;
-      if (active) {
-        dispatchFakeEvent(active, 'blur');
-      }
-
-      // Focus
-      baseFocus(options); // Needed to set document.activeElement
-      dispatchFakeEvent(element, 'focus'); // Needed to cause focus event
+      const w = new FocusEventWatcher(element);
+
+      // Sets document.activeElement. May or may not send focus + blur events
+      baseFocus(options);
+
+      w.ensureFocusEvents();
     }
     element.blur = () => dispatchFakeEvent(element, 'blur');
     element[IS_FOCUS_PATCHED_PROP] = true;

projects/spectator/test/focus/test-focus.component.spec.ts

@@ -29,4 +29,14 @@ describe('SpectatorHost.focus() ', () => {
     expect(host.component.blurCount('button2')).toBe(0);
   });
 
+  it('calling focus() multiple times does not cause multiple patches', () => {
+    host.focus('#button1');
+    host.focus();
+    host.focus('#button1');
+
+    expect(host.component.focusCount('app-test-focus')).toBe(1);
+    expect(host.component.focusCount('button1')).toBe(2);
+    expect(host.component.blurCount('button1')).toBe(1);
+  });
+
 });