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 (cherry picked from commit f287cd6)

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([]);
  });