fix(cdk/testing): simulate focusin/focusout events

Fixes that our fake fallback focus events weren't dispatching `focusin` and `focusout` events as well.

Fixes #23757.

Author: crisbeto

src/cdk/testing/testbed/fake-events/element-focus.ts

@@ -14,11 +14,20 @@ function triggerFocusChange(element: HTMLElement, event: 'focus' | 'blur') {
   element.addEventListener(event, handler);
   element[event]();
   element.removeEventListener(event, handler);
+
+  // Some browsers won't move focus if the browser window is blurred while other will move it
+  // asynchronously. If that is the case, we fake the event sequence as a fallback.
   if (!eventFired) {
-    dispatchFakeEvent(element, event);
+    simulateFocusSequence(element, event);
   }
 }
 
+/** Simulates the full event sequence for a focus event. */
+function simulateFocusSequence(element: HTMLElement, event: 'focus' | 'blur') {
+  dispatchFakeEvent(element, event);
+  dispatchFakeEvent(element, event === 'focus' ? 'focusin' : 'focusout');
+}
+
 /**
  * Patches an elements focus and blur methods to emit events consistently and predictably.
  * This is necessary, because some browsers can call the focus handlers asynchronously,
@@ -28,8 +37,8 @@ function triggerFocusChange(element: HTMLElement, event: 'focus' | 'blur') {
 // TODO: Check if this element focus patching is still needed for local testing,
 // where browser is not necessarily focused.
 export function patchElementFocus(element: HTMLElement) {
-  element.focus = () => dispatchFakeEvent(element, 'focus');
-  element.blur = () => dispatchFakeEvent(element, 'blur');
+  element.focus = () => simulateFocusSequence(element, 'focus');
+  element.blur = () => simulateFocusSequence(element, 'blur');
 }
 
 /** @docs-private */

src/material-experimental/mdc-autocomplete/autocomplete-trigger.ts

@@ -38,7 +38,7 @@ export const MAT_AUTOCOMPLETE_VALUE_ACCESSOR: any = {
     // Note: we use `focusin`, as opposed to `focus`, in order to open the panel
     // a little earlier. This avoids issues where IE delays the focusing of the input.
     '(focusin)': '_handleFocus()',
-    '(blur)': '_onTouched()',
+    '(blur)': '_handleBlur()',
     '(input)': '_handleInput($event)',
     '(keydown)': '_handleKeydown($event)',
   },

src/material-experimental/mdc-autocomplete/autocomplete.spec.ts

@@ -891,7 +891,7 @@ describe('MDC-based MatAutocomplete', () => {
     });
 
     it('should mark the autocomplete control as touched on blur', () => {
-      fixture.componentInstance.trigger.openPanel();
+      dispatchFakeEvent(input, 'focusin');
       fixture.detectChanges();
       expect(fixture.componentInstance.stateCtrl.touched)
         .withContext(`Expected control to start out untouched.`)

src/material/autocomplete/autocomplete-trigger.ts

@@ -104,6 +104,7 @@ export abstract class _MatAutocompleteTriggerBase
   private _portal: TemplatePortal;
   private _componentDestroyed = false;
   private _autocompleteDisabled = false;
+  private _hasFocus: boolean;
   private _scrollStrategy: () => ScrollStrategy;
 
   /** Old value of the native input. Used to work around issues with the `input` event on IE. */
@@ -434,12 +435,25 @@ export abstract class _MatAutocompleteTriggerBase
   }
 
   _handleFocus(): void {
-    if (!this._canOpenOnNextFocus) {
-      this._canOpenOnNextFocus = true;
-    } else if (this._canOpen()) {
-      this._previousValue = this._element.nativeElement.value;
-      this._attachOverlay();
-      this._floatLabel(true);
+    // Normally the event won't fire again if the input already
+    // has focus, but it may receive a fake event during tests.
+    if (!this._hasFocus) {
+      this._hasFocus = true;
+
+      if (!this._canOpenOnNextFocus) {
+        this._canOpenOnNextFocus = true;
+      } else if (this._canOpen()) {
+        this._previousValue = this._element.nativeElement.value;
+        this._attachOverlay();
+        this._floatLabel(true);
+      }
+    }
+  }
+
+  _handleBlur(): void {
+    if (this._hasFocus) {
+      this._hasFocus = false;
+      this._onTouched();
     }
   }
 
@@ -786,7 +800,7 @@ export abstract class _MatAutocompleteTriggerBase
     // Note: we use `focusin`, as opposed to `focus`, in order to open the panel
     // a little earlier. This avoids issues where IE delays the focusing of the input.
     '(focusin)': '_handleFocus()',
-    '(blur)': '_onTouched()',
+    '(blur)': '_handleBlur()',
     '(input)': '_handleInput($event)',
     '(keydown)': '_handleKeydown($event)',
   },

src/material/autocomplete/autocomplete.spec.ts

@@ -886,7 +886,7 @@ describe('MatAutocomplete', () => {
     });
 
     it('should mark the autocomplete control as touched on blur', () => {
-      fixture.componentInstance.trigger.openPanel();
+      dispatchFakeEvent(input, 'focusin');
       fixture.detectChanges();
       expect(fixture.componentInstance.stateCtrl.touched)
         .withContext(`Expected control to start out untouched.`)

tools/public_api_guard/material/autocomplete.md

@@ -202,6 +202,8 @@ export abstract class _MatAutocompleteTriggerBase implements ControlValueAccesso
     closePanel(): void;
     connectedTo: _MatAutocompleteOriginBase;
     // (undocumented)
+    _handleBlur(): void;
+    // (undocumented)
     _handleFocus(): void;
     // (undocumented)
     _handleInput(event: KeyboardEvent): void;