fixup! feat(cdk-experimental/ui-patterns): create combobox ui pattern

Author: wagnermaciel

src/cdk-experimental/listbox/listbox.ts

@@ -18,7 +18,7 @@ import {
   model,
   signal,
 } from '@angular/core';
-import {ListboxPattern, OptionPattern} from '../ui-patterns';
+import {ComboboxListboxPattern, ListboxPattern, OptionPattern} from '../ui-patterns';
 import {Directionality} from '@angular/cdk/bidi';
 import {toSignal} from '@angular/core/rxjs-interop';
 import {_IdGenerator} from '@angular/cdk/a11y';
@@ -118,20 +118,28 @@ export class CdkListbox<V> {
   value = model<V[]>([]);
 
   /** The Listbox UIPattern. */
-  pattern: ListboxPattern<V> = new ListboxPattern<V>({
-    ...this,
-    items: this.items,
-    activeItem: signal(undefined),
-    textDirection: this.textDirection,
-    element: () => this._elementRef.nativeElement,
-    combobox: () => this._popup?.combobox?.pattern,
-  });
+  pattern: ListboxPattern<V>;
 
   /** Whether the listbox has received focus yet. */
   private _hasFocused = signal(false);
 
   constructor() {
-    this._popup?.actions?.set(this.pattern.comboboxActions);
+    const inputs = {
+      ...this,
+      items: this.items,
+      activeItem: signal(undefined),
+      textDirection: this.textDirection,
+      element: () => this._elementRef.nativeElement,
+      combobox: () => this._popup?.combobox?.pattern,
+    };
+
+    this.pattern = this._popup?.combobox
+      ? new ComboboxListboxPattern<V>(inputs)
+      : new ListboxPattern<V>(inputs);
+
+    if (this._popup) {
+      this._popup.actions.set((this.pattern as ComboboxListboxPattern<V>).comboboxActions);
+    }
 
     afterRenderEffect(() => {
       if (typeof ngDevMode === 'undefined' || ngDevMode) {

src/cdk-experimental/ui-patterns/listbox/combobox-listbox.ts

@@ -0,0 +1,51 @@
+import {computed} from '@angular/core';
+import {ListboxInputs, ListboxPattern} from './listbox';
+import {SignalLike} from '../behaviors/signal-like/signal-like';
+import {OptionPattern} from './option';
+import {ComboboxPattern, ComboboxPopupControls} from '../combobox/combobox';
+
+export type ComboboxListboxInputs<V> = ListboxInputs<V> & {
+  /** The combobox controlling the listbox. */
+  combobox: SignalLike<ComboboxPattern<OptionPattern<V>, V> | undefined>;
+};
+
+export class ComboboxListboxPattern<V> extends ListboxPattern<V> {
+  override tabindex: SignalLike<-1 | 0> = () => -1;
+
+  constructor(override readonly inputs: ComboboxListboxInputs<V>) {
+    if (inputs.combobox()) {
+      inputs.multi = () => false;
+      inputs.focusMode = () => 'activedescendant';
+      inputs.element = inputs.combobox()!.inputs.inputEl;
+    }
+
+    super(inputs);
+  }
+
+  override onKeydown(_: KeyboardEvent): void {}
+  override onPointerdown(_: PointerEvent): void {}
+  override setDefaultState(): void {}
+
+  /** The actions that can be performed on a combobox popup listbox. */
+  comboboxActions: ComboboxPopupControls<OptionPattern<V>, V> = {
+    activeId: computed(() => this.listBehavior.activedescendant()),
+    next: () => this.listBehavior.next(),
+    prev: () => this.listBehavior.prev(),
+    last: () => this.listBehavior.last(),
+    first: () => this.listBehavior.first(),
+    unfocus: () => this.listBehavior.unfocus(),
+    select: item => this.listBehavior.select(item),
+    clearSelection: () => this.listBehavior.deselectAll(),
+    getItem: e => this._getItem(e),
+    getSelectedItem: () => this.inputs.items().find(i => i.selected()),
+    setValue: (value: V | undefined) => this.inputs.value.set(value ? [value] : []),
+    filter: (text: string) => {
+      const filterFn = this.inputs.combobox()!.inputs.filter();
+
+      this.inputs.items().forEach(i => {
+        const isMatch = filterFn(text, i.searchTerm());
+        i.inert.set(isMatch ? null : true);
+      });
+    },
+  };
+}

src/cdk-experimental/ui-patterns/listbox/listbox.spec.ts

@@ -46,7 +46,6 @@ describe('Listbox Pattern', () => {
       orientation: inputs.orientation ?? signal('vertical'),
       selectionMode: inputs.selectionMode ?? signal('explicit'),
       element: signal(document.createElement('div')),
-      combobox: signal(undefined),
     });
   }
 

src/cdk-experimental/ui-patterns/listbox/listbox.ts

@@ -11,14 +11,10 @@ import {KeyboardEventManager, PointerEventManager, Modifier} from '../behaviors/
 import {computed, signal} from '@angular/core';
 import {SignalLike} from '../behaviors/signal-like/signal-like';
 import {List, ListInputs} from '../behaviors/list/list';
-import {ComboboxPattern, ComboboxPopupControls} from '../combobox/combobox';
 
 /** Represents the required inputs for a listbox. */
 export type ListboxInputs<V> = ListInputs<OptionPattern<V>, V> & {
   readonly: SignalLike<boolean>;
-
-  /** The combobox controlling the listbox. */
-  combobox: SignalLike<ComboboxPattern<OptionPattern<V>, V> | undefined>;
 };
 
 /** Controls the state of a listbox. */
@@ -35,7 +31,7 @@ export class ListboxPattern<V> {
   readonly: SignalLike<boolean>;
 
   /** The tabindex of the listbox. */
-  tabindex = computed(() => (this.inputs.combobox() ? -1 : this.listBehavior.tabindex()));
+  tabindex: SignalLike<-1 | 0> = computed(() => this.listBehavior.tabindex());
 
   /** The id of the current active item. */
   activedescendant = computed(() => this.listBehavior.activedescendant());
@@ -192,12 +188,6 @@ export class ListboxPattern<V> {
     this.readonly = inputs.readonly;
     this.orientation = inputs.orientation;
     this.multi = inputs.multi;
-
-    if (this.inputs.combobox()) {
-      this.inputs.focusMode = () => 'activedescendant';
-      this.inputs.element = this.inputs.combobox()!.inputs.inputEl;
-    }
-
     this.listBehavior = new List(inputs);
   }
 
@@ -224,13 +214,13 @@ export class ListboxPattern<V> {
 
   /** Handles keydown events for the listbox. */
   onKeydown(event: KeyboardEvent) {
-    if (!this.disabled() && !this.inputs.combobox()) {
+    if (!this.disabled()) {
       this.keydown().handle(event);
     }
   }
 
   onPointerdown(event: PointerEvent) {
-    if (!this.disabled() && !this.inputs.combobox()) {
+    if (!this.disabled()) {
       this.pointerdown().handle(event);
     }
   }
@@ -246,10 +236,6 @@ export class ListboxPattern<V> {
    * is called.
    */
   setDefaultState() {
-    if (this.inputs.combobox()) {
-      return;
-    }
-
     let firstItem: OptionPattern<V> | null = null;
 
     for (const item of this.inputs.items()) {
@@ -269,39 +255,12 @@ export class ListboxPattern<V> {
     }
   }
 
-  private _getItem(e: PointerEvent) {
+  protected _getItem(e: PointerEvent) {
     if (!(e.target instanceof HTMLElement)) {
       return;
     }
 
     const element = e.target.closest('[role="option"]');
     return this.inputs.items().find(i => i.element() === element);
   }
-
-  /** The actions that can be performed on a combobox popup listbox. */
-  comboboxActions: ComboboxPopupControls<OptionPattern<V>, V> = {
-    activeId: computed(() => this.listBehavior.activedescendant()),
-
-    next: () => this.listBehavior.next(),
-    prev: () => this.listBehavior.prev(),
-    last: () => this.listBehavior.last(),
-    first: () => this.listBehavior.first(),
-    unfocus: () => this.listBehavior.unfocus(),
-    select: item => this.listBehavior.select(item),
-    clearSelection: () => this.listBehavior.deselectAll(),
-
-    getItem: e => this._getItem(e),
-    getSelectedItem: () => this.inputs.items().find(i => i.selected()),
-
-    setValue: (value: V | undefined) => this.inputs.value.set(value ? [value] : []),
-
-    filter: (text: string) => {
-      const filterFn = this.inputs.combobox()!.inputs.filter();
-
-      this.inputs.items().forEach(i => {
-        const isMatch = filterFn(text, i.searchTerm());
-        i.inert.set(isMatch ? null : true);
-      });
-    },
-  };
 }

src/cdk-experimental/ui-patterns/public-api.ts

@@ -9,6 +9,7 @@
 export * from './combobox/combobox';
 export * from './listbox/listbox';
 export * from './listbox/option';
+export * from './listbox/combobox-listbox';
 export * from './radio-group/radio-group';
 export * from './radio-group/radio-button';
 export * from './behaviors/signal-like/signal-like';