fix(aria/combobox): closing immediately when opening programmatically with zone.js (angular#33518)

The combobox was using an effect to decide whether to close the overlay, however this was brittle because it relied on the effect scheduler to run once all bindings have been evaluated. This was breaking down with Zone.js which seemed to fire the effect for each signal change individually.

These changes resolve the issue by moving the logic into the `focusout` handler which gives us a better indication about where the event is coming from.

Fixes angular#33516.

Author: crisbeto

goldens/aria/private/index.api.md

@@ -79,7 +79,6 @@ export class ComboboxPattern {
     readonly ariaReadonly: _angular_core.Signal<"true" | null>;
     readonly autocomplete: _angular_core.Signal<"none" | "inline" | "list" | "both">;
     click: _angular_core.Signal<ClickEventManager<PointerEvent>>;
-    closePopupOnBlurEffect(): void;
     readonly disabled: () => boolean;
     readonly element: () => HTMLElement;
     highlightEffect(): void;
@@ -97,7 +96,7 @@ export class ComboboxPattern {
     readonly nativeReadonly: _angular_core.Signal<"" | null>;
     onClick(event: PointerEvent): void;
     onFocusin(): void;
-    onFocusout(event: FocusEvent): void;
+    onFocusout(): void;
     onInput(event: Event): void;
     onKeydown(event: KeyboardEvent): void;
     readonly popupId: _angular_core.Signal<string | undefined>;

src/aria/combobox/combobox.ts

@@ -74,7 +74,7 @@ import type {ComboboxPopup} from './combobox-popup';
     '[attr.readonly]': '_pattern.nativeReadonly()',
     '(keydown)': '_pattern.onKeydown($event)',
     '(focusin)': '_pattern.onFocusin()',
-    '(focusout)': '_pattern.onFocusout($event)',
+    '(focusout)': '_pattern.onFocusout()',
     '(click)': '_pattern.onClick($event)',
     '(input)': '_pattern.onInput($event)',
   },
@@ -131,7 +131,6 @@ export class Combobox extends DeferredContentAware implements OnInit {
     super();
 
     afterRenderEffect({write: () => this._pattern.keyboardEventRelayEffect()});
-    afterRenderEffect(() => this._pattern.closePopupOnBlurEffect());
     afterRenderEffect(() => {
       this.contentVisible.set(this._pattern.isExpanded());
     });

src/aria/private/combobox/combobox.spec.ts

@@ -59,6 +59,10 @@ describe('ComboboxPattern', () => {
     };
   }
 
+  function wait(milliseconds: number) {
+    return new Promise(resolve => setTimeout(resolve, milliseconds));
+  }
+
   describe('Aria-autocomplete calculation', () => {
     it('should return "list" when only popup is present', () => {
       const {pattern} = setup();
@@ -119,7 +123,7 @@ describe('ComboboxPattern', () => {
       pattern.onFocusin();
       expect(pattern.isFocused()).toBe(true);
 
-      pattern.onFocusout(new FocusEvent('focusout'));
+      pattern.onFocusout();
       expect(pattern.isFocused()).toBe(false);
     });
   });
@@ -206,23 +210,27 @@ describe('ComboboxPattern', () => {
   });
 
   describe('Blur behavior', () => {
-    it('should close when focus leaves both combobox and popup', () => {
+    it('should close when focus leaves both combobox and popup', async () => {
       const {pattern, expanded} = setup();
       expanded.set(true);
       pattern.isFocused.set(false);
       pattern.inputs.popup()!.isFocused.set(false);
 
-      pattern.closePopupOnBlurEffect();
+      pattern.onFocusout();
+      await wait(100);
+
       expect(expanded()).toBe(false);
     });
 
-    it('should remain open if popup is focused', () => {
+    it('should remain open if popup is focused', async () => {
       const {pattern, expanded} = setup();
       expanded.set(true);
       pattern.isFocused.set(false);
       pattern.inputs.popup()!.isFocused.set(true);
 
-      pattern.closePopupOnBlurEffect();
+      pattern.onFocusout();
+      await wait(100);
+
       expect(expanded()).toBe(true);
     });
   });

src/aria/private/combobox/combobox.ts

@@ -215,7 +215,17 @@ export class ComboboxPattern {
   }
 
   /** Handles focus out events for the combobox. */
-  onFocusout(event: FocusEvent) {
+  onFocusout() {
+    // Give focus some time to move before we check it.
+    setTimeout(() => {
+      const comboboxFocused = this.isFocused();
+      const popupFocused = !!this.inputs.popup()?.isFocused();
+
+      if (!this.inputs.alwaysExpanded() && !comboboxFocused && !popupFocused) {
+        this.inputs.expanded.set(false);
+      }
+    });
+
     this.isFocused.set(false);
   }
 
@@ -265,16 +275,6 @@ export class ComboboxPattern {
       }
     });
   }
-
-  /** Closes the popup when focus leaves the combobox and popup. */
-  closePopupOnBlurEffect() {
-    const expanded = this.isExpanded();
-    const comboboxFocused = this.isFocused();
-    const popupFocused = !!this.inputs.popup()?.isFocused();
-    if (expanded && !this.inputs.alwaysExpanded() && !comboboxFocused && !popupFocused) {
-      this.inputs.expanded.set(false);
-    }
-  }
 }
 
 /** Represents the required inputs for a simple combobox popup. */