fix(aria/combobox): popup not closing when focus leaves it (#33697)

* fix(aria/combobox): popup not closing when focus leaves it

* fix(aria/combobox): set isFocused before closing popup on focusout

(cherry picked from commit de579cc)

Author: lazerg

goldens/aria/private/index.api.md

@@ -79,6 +79,7 @@ export class ComboboxPattern {
     readonly ariaReadonly: _angular_core.Signal<"true" | null>;
     readonly autocomplete: _angular_core.Signal<"both" | "inline" | "list" | "none">;
     click: _angular_core.Signal<ClickEventManager<PointerEvent>>;
+    closePopupOnFocusout(): void;
     readonly disabled: () => boolean;
     readonly element: () => HTMLElement;
     highlightEffect(): void;
@@ -109,6 +110,7 @@ export class ComboboxPattern {
 // @public
 export interface ComboboxPopupInputs {
     activeDescendant: SignalLike<string | undefined>;
+    combobox: SignalLike<ComboboxPattern | undefined>;
     controlTarget: SignalLike<HTMLElement | undefined>;
     popupId: SignalLike<string | undefined>;
     popupType: SignalLike<'listbox' | 'tree' | 'grid' | 'dialog'>;
@@ -118,6 +120,7 @@ export interface ComboboxPopupInputs {
 export class ComboboxPopupPattern {
     constructor(inputs: ComboboxPopupInputs);
     readonly activeDescendant: () => string | undefined;
+    readonly combobox: () => ComboboxPattern | undefined;
     readonly controlTarget: () => HTMLElement | undefined;
     // (undocumented)
     readonly inputs: ComboboxPopupInputs;

src/aria/combobox/combobox-popup.ts

@@ -54,8 +54,9 @@ export class ComboboxPopup implements OnInit, OnDestroy {
   readonly popupType = input<'listbox' | 'tree' | 'grid' | 'dialog'>('listbox');
 
   /** The popup pattern. */
-  readonly _pattern = new ComboboxPopupPattern({
+  readonly _pattern: ComboboxPopupPattern = new ComboboxPopupPattern({
     ...this,
+    combobox: computed(() => this.combobox()._pattern),
   });
 
   ngOnInit() {

src/aria/combobox/combobox.spec.ts

@@ -1257,6 +1257,9 @@ describe('Combobox', () => {
         .nativeElement as HTMLElement;
     };
 
+    const wait = (milliseconds: number) =>
+      new Promise(resolve => setTimeout(resolve, milliseconds));
+
     afterEach(async () => await runAccessibilityChecks(fixture.nativeElement));
 
     it('should auto-generate an ID on the widget when none is provided', async () => {
@@ -1276,6 +1279,45 @@ describe('Combobox', () => {
       expect(widgetElement.id).toMatch(/^ng-listbox-/);
       expect(comboboxElement.getAttribute('aria-controls')).toBe(widgetElement.id);
     });
+
+    it('should close the popup once focus leaves it entirely, even when the trigger never regains focus', async () => {
+      await expand(ComboboxDialogExample);
+      const filterInput = widgetElement.querySelector('input') as HTMLInputElement;
+
+      comboboxElement.dispatchEvent(
+        new FocusEvent('focusout', {bubbles: true, relatedTarget: filterInput}),
+      );
+      filterInput.dispatchEvent(new FocusEvent('focusin', {bubbles: true})); // Focus enters popup
+      await wait(100);
+      expect(comboboxElement.getAttribute('aria-expanded')).toBe('true');
+
+      // Focus leaves the popup, never passing back through the trigger
+      filterInput.dispatchEvent(
+        new FocusEvent('focusout', {bubbles: true, relatedTarget: document.body}),
+      );
+      await wait(100);
+
+      expect(comboboxElement.getAttribute('aria-expanded')).toBe('false');
+    });
+
+    it('should keep the popup open when focus moves from the widget back to the combobox', async () => {
+      await expand(ComboboxDialogExample);
+      const filterInput = widgetElement.querySelector('input') as HTMLInputElement;
+
+      comboboxElement.dispatchEvent(
+        new FocusEvent('focusout', {bubbles: true, relatedTarget: filterInput}),
+      );
+      filterInput.dispatchEvent(new FocusEvent('focusin', {bubbles: true}));
+      await wait(100);
+
+      filterInput.dispatchEvent(
+        new FocusEvent('focusout', {bubbles: true, relatedTarget: comboboxElement}),
+      );
+      comboboxElement.dispatchEvent(new FocusEvent('focusin', {bubbles: true}));
+      await wait(100);
+
+      expect(comboboxElement.getAttribute('aria-expanded')).toBe('true');
+    });
   });
 });
 

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

@@ -26,11 +26,13 @@ describe('ComboboxPattern', () => {
     const controlTarget = document.createElement('div');
     const popupType = signal<'listbox' | 'tree' | 'grid' | 'dialog'>(inputs.popupType ?? 'listbox');
 
+    const combobox = signal<ComboboxPattern | undefined>(undefined);
     const popup = new ComboboxPopupPattern({
       popupType,
       controlTarget: signal(controlTarget),
       activeDescendant,
       popupId,
+      combobox,
     });
 
     const pattern = new ComboboxPattern({
@@ -45,6 +47,8 @@ describe('ComboboxPattern', () => {
       expandable: signal(true),
     });
 
+    combobox.set(pattern);
+
     return {
       pattern,
       element,
@@ -234,6 +238,31 @@ describe('ComboboxPattern', () => {
 
       expect(expanded()).toBe(true);
     });
+
+    it('should close when focus leaves the popup', async () => {
+      const {pattern, expanded, popup} = setup();
+      expanded.set(true);
+      pattern.isFocused.set(false);
+      popup.isFocused.set(true);
+
+      popup.onFocusout(new FocusEvent('focusout'));
+      await wait(100);
+
+      expect(expanded()).toBe(false);
+    });
+
+    it('should remain open if focus moves back to the combobox', async () => {
+      const {pattern, expanded, popup} = setup();
+      expanded.set(true);
+      pattern.isFocused.set(false);
+      popup.isFocused.set(true);
+
+      popup.onFocusout(new FocusEvent('focusout'));
+      pattern.onFocusin();
+      await wait(100);
+
+      expect(expanded()).toBe(true);
+    });
   });
 
   describe('Advanced Combo Keys Relay', () => {

src/aria/private/combobox/combobox.ts

@@ -217,6 +217,12 @@ export class ComboboxPattern {
 
   /** Handles focus out events for the combobox. */
   onFocusout() {
+    this.isFocused.set(false);
+    this.closePopupOnFocusout();
+  }
+
+  /** Closes the popup once focus has left both the combobox and the popup. */
+  closePopupOnFocusout() {
     // Give focus some time to move before we check it.
     setTimeout(() => {
       const comboboxFocused = this.isFocused();
@@ -226,8 +232,6 @@ export class ComboboxPattern {
         this.inputs.expanded.set(false);
       }
     });
-
-    this.isFocused.set(false);
   }
 
   /** Handles input events for the combobox. */
@@ -291,6 +295,9 @@ export interface ComboboxPopupInputs {
 
   /** The ID of the popup. */
   popupId: SignalLike<string | undefined>;
+
+  /** A reference to the parent combobox. */
+  combobox: SignalLike<ComboboxPattern | undefined>;
 }
 
 /** Controls the state of a simple combobox popup. */
@@ -307,6 +314,9 @@ export class ComboboxPopupPattern {
   /** The ID of the popup. */
   readonly popupId = () => this.inputs.popupId();
 
+  /** A reference to the parent combobox. */
+  readonly combobox = () => this.inputs.combobox();
+
   /** Whether the popup is focused. */
   readonly isFocused = signal(false);
 
@@ -323,5 +333,6 @@ export class ComboboxPopupPattern {
     if (this.controlTarget()?.contains(focusTarget)) return;
 
     this.isFocused.set(false);
+    this.combobox()?.closePopupOnFocusout();
   }
 }