fix(aria/combobox): dialog popup support (#32279)

* fix(aria/combobox): dialog popup support

* fixup! fix(aria/combobox): dialog popup support

* fixup! fix(aria/combobox): dialog popup support

* fixup! fix(aria/combobox): dialog popup support

* fixup! fix(aria/combobox): dialog popup support

* fixup! fix(aria/combobox): dialog popup support

* fixup! fix(aria/combobox): dialog popup support

Author: wagnermaciel

src/aria/combobox/combobox.ts

@@ -25,6 +25,7 @@ import {
   ComboboxPattern,
   ComboboxListboxControls,
   ComboboxTreeControls,
+  ComboboxDialogPattern,
 } from '@angular/aria/private';
 import {Directionality} from '@angular/cdk/bidi';
 import {toSignal} from '@angular/core/rxjs-interop';
@@ -84,7 +85,12 @@ export class Combobox<V> {
   readonly firstMatch = input<V | undefined>(undefined);
 
   /** Whether the combobox is expanded. */
-  readonly expanded = computed(() => this._pattern.expanded());
+  readonly expanded = computed(() => this.alwaysExpanded() || this._pattern.expanded());
+
+  // TODO: Maybe make expanded a signal that can be passed in?
+  // Or an "always expanded" option?
+
+  readonly alwaysExpanded = input(false);
 
   /** Input element connected to the combobox, if any. */
   readonly inputElement = computed(() => this._pattern.inputs.inputEl());
@@ -103,7 +109,16 @@ export class Combobox<V> {
 
   constructor() {
     afterRenderEffect(() => {
-      if (!this._deferredContentAware?.contentVisible() && this._pattern.isFocused()) {
+      if (this.alwaysExpanded()) {
+        this._pattern.expanded.set(true);
+      }
+    });
+
+    afterRenderEffect(() => {
+      if (
+        !this._deferredContentAware?.contentVisible() &&
+        (this._pattern.isFocused() || this.alwaysExpanded())
+      ) {
         this._deferredContentAware?.contentVisible.set(true);
       }
     });
@@ -146,10 +161,15 @@ export class ComboboxInput {
     );
     this.combobox._pattern.inputs.inputValue = this.value;
 
+    const controls = this.combobox.popup()?.controls();
+    if (controls instanceof ComboboxDialogPattern) {
+      return;
+    }
+
     /** Focuses & selects the first item in the combobox if the user changes the input value. */
     afterRenderEffect(() => {
       this.value();
-      this.combobox.popup()?.controls()?.items();
+      controls?.items();
       untracked(() => this.combobox._pattern.onFilter());
     });
   }
@@ -172,6 +192,58 @@ export class ComboboxPopup<V> {
 
   /** The controls the popup exposes to the combobox. */
   readonly controls = signal<
-    ComboboxListboxControls<any, V> | ComboboxTreeControls<any, V> | undefined
+    | ComboboxListboxControls<any, V>
+    | ComboboxTreeControls<any, V>
+    | ComboboxDialogPattern
+    | undefined
   >(undefined);
 }
+
+@Directive({
+  selector: 'dialog[ngComboboxDialog]',
+  exportAs: 'ngComboboxDialog',
+  host: {
+    '[attr.data-open]': 'combobox._pattern.expanded()',
+    '(keydown)': '_pattern.onKeydown($event)',
+    '(click)': '_pattern.onClick($event)',
+  },
+  hostDirectives: [ComboboxPopup],
+})
+export class ComboboxDialog {
+  /** The dialog element. */
+  readonly element = inject(ElementRef<HTMLDialogElement>);
+
+  /** The combobox that the dialog belongs to. */
+  readonly combobox = inject(Combobox);
+
+  /** A reference to the parent combobox popup, if one exists. */
+  private readonly _popup = inject<ComboboxPopup<unknown>>(ComboboxPopup, {
+    optional: true,
+  });
+
+  _pattern: ComboboxDialogPattern;
+
+  constructor() {
+    this._pattern = new ComboboxDialogPattern({
+      id: () => '',
+      element: () => this.element.nativeElement,
+      combobox: this.combobox._pattern,
+    });
+
+    if (this._popup) {
+      this._popup.controls.set(this._pattern);
+    }
+
+    afterRenderEffect(() => {
+      if (this.element) {
+        this.combobox._pattern.expanded()
+          ? this.element.nativeElement.showModal()
+          : this.element.nativeElement.close();
+      }
+    });
+  }
+
+  close() {
+    this._popup?.combobox?._pattern.close();
+  }
+}

src/aria/combobox/index.ts

@@ -6,4 +6,10 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-export {Combobox, ComboboxInput, ComboboxPopup, ComboboxPopupContainer} from './combobox';
+export {
+  Combobox,
+  ComboboxDialog,
+  ComboboxInput,
+  ComboboxPopup,
+  ComboboxPopupContainer,
+} from './combobox';

src/aria/listbox/listbox.ts

@@ -56,7 +56,7 @@ import {ComboboxPopup} from '../combobox';
     '(pointerdown)': '_pattern.onPointerdown($event)',
     '(focusin)': 'onFocus()',
   },
-  hostDirectives: [{directive: ComboboxPopup}],
+  hostDirectives: [ComboboxPopup],
 })
 export class Listbox<V> {
   /** A unique identifier for the listbox. */
@@ -187,6 +187,11 @@ export class Listbox<V> {
   scrollActiveItemIntoView(options: ScrollIntoViewOptions = {block: 'nearest'}) {
     this._pattern.inputs.activeItem()?.element()?.scrollIntoView(options);
   }
+
+  /** Navigates to the first item in the listbox. */
+  gotoFirst() {
+    this._pattern.listBehavior.first();
+  }
 }
 
 /** A selectable option in a Listbox. */

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

@@ -106,6 +106,7 @@ function getComboboxPattern(
     filterMode: signal(inputs.filterMode ?? 'manual'),
     firstMatch,
     inputValue,
+    alwaysExpanded: signal(false),
   });
 
   return {combobox, inputEl, containerEl, firstMatch, inputValue};
@@ -395,14 +396,14 @@ describe('Combobox with Listbox Pattern', () => {
         expect(listbox.inputs.value()).toEqual(['Apple']);
       });
 
-      it('should deselect on backspace', () => {
+      it('should deselect on close if the input text does not match any options', () => {
         combobox.onKeydown(down());
         combobox.onKeydown(enter());
 
+        expect(listbox.inputs.value()).toEqual(['Apple']);
         type('Appl', {backspace: true});
-        combobox.onInput(new InputEvent('input', {inputType: 'deleteContentBackward'}));
-
-        expect(listbox.getSelectedItems().length).toBe(0);
+        expect(listbox.inputs.value()).toEqual(['Apple']);
+        combobox.onKeydown(escape());
         expect(listbox.inputs.value()).toEqual([]);
       });
 
@@ -759,13 +760,14 @@ describe('Combobox with Tree Pattern', () => {
         expect(tree.inputs.value()).toEqual(['Apple']);
       });
 
-      it('should deselect on backspace', () => {
+      it('should deselect on close if the input text does not match any options', () => {
         combobox.onKeydown(down());
         combobox.onKeydown(enter());
 
-        type('Appl', {backspace: true});
-
-        expect(tree.getSelectedItems().length).toBe(0);
+        expect(tree.inputs.value()).toEqual(['Fruit']);
+        type('Frui', {backspace: true});
+        expect(tree.inputs.value()).toEqual(['Fruit']);
+        combobox.onKeydown(escape());
         expect(tree.inputs.value()).toEqual([]);
       });