fix(aria/combobox): fix autocomplete examples and add comments explaining combobox selection behavior (#32714)

(cherry picked from commit c57e6a1)

Author: adolgachev

src/aria/private/combobox/combobox.ts

@@ -641,8 +641,11 @@ export class ComboboxPattern<T extends ListItem<V>, V> {
   select(opts: {item?: T; commit?: boolean; close?: boolean} = {}) {
     const controls = this.listControls();
 
+    // When no item is specified (e.g. on keyboard toggle), get the active item instead.
+    // Note: this is only necessary for disabled check, as select/toggle will check active item too.
     const item = opts.item ?? controls?.getActiveItem();
 
+    // Check if item is disabled before proceeding.
     if (item?.disabled()) {
       return;
     }

src/components-examples/aria/autocomplete/autocomplete-auto-select/autocomplete-auto-select-example.html

@@ -4,7 +4,6 @@
     <input
       aria-label="Label dropdown"
       placeholder="Select a country"
-      [(ngModel)]="query"
       ngComboboxInput
     />
     <button

src/components-examples/aria/autocomplete/autocomplete-auto-select/autocomplete-auto-select-example.ts

@@ -18,7 +18,6 @@ import {
   ChangeDetectionStrategy,
   Component,
   computed,
-  signal,
   viewChild,
   viewChildren,
 } from '@angular/core';
@@ -55,8 +54,11 @@ export class AutocompleteAutoSelectExample {
   /** A reference to the ng aria combobox. */
   combobox = viewChild<Combobox<string>>(Combobox);
 
+  /** A reference to the ng aria combobox input. */
+  comboboxInput = viewChild<ComboboxInput>(ComboboxInput);
+
   /** The query string used to filter the list of countries. */
-  query = signal('');
+  query = computed(() => this.comboboxInput()?.value() || '');
 
   /** The list of countries filtered by the query. */
   countries = computed(() =>
@@ -75,7 +77,7 @@ export class AutocompleteAutoSelectExample {
 
   /** Clears the query and the listbox value. */
   clear(): void {
-    this.query.set('');
+    this.comboboxInput()?.value.set('');
     this.listbox?.()?.values.set([]);
   }
 

src/components-examples/aria/autocomplete/autocomplete-disabled/autocomplete-disabled-example.html

@@ -4,7 +4,6 @@
     <input
       aria-label="Label dropdown"
       placeholder="Select a country"
-      [(ngModel)]="query"
       ngComboboxInput
     />
   </div>

src/components-examples/aria/autocomplete/autocomplete-highlight/autocomplete-highlight-example.html

@@ -4,7 +4,6 @@
     <input
       aria-label="Label dropdown"
       placeholder="Select a country"
-      [(ngModel)]="query"
       ngComboboxInput
     />
     <button

src/components-examples/aria/autocomplete/autocomplete-highlight/autocomplete-highlight-example.ts

@@ -18,7 +18,6 @@ import {
   ChangeDetectionStrategy,
   Component,
   computed,
-  signal,
   viewChild,
   viewChildren,
 } from '@angular/core';
@@ -53,8 +52,11 @@ export class AutocompleteHighlightExample {
   /** A reference to the ng aria combobox. */
   combobox = viewChild<Combobox<string>>(Combobox);
 
+  /** A reference to the ng aria combobox input. */
+  comboboxInput = viewChild<ComboboxInput>(ComboboxInput);
+
   /** The query string used to filter the list of countries. */
-  query = signal('');
+  query = computed(() => this.comboboxInput()?.value() || '');
 
   /** The list of countries filtered by the query. */
   countries = computed(() =>
@@ -73,7 +75,7 @@ export class AutocompleteHighlightExample {
 
   /** Clears the query and the listbox value. */
   clear(): void {
-    this.query.set('');
+    this.comboboxInput()?.value.set('');
     this.listbox?.()?.values.set([]);
   }
 

src/components-examples/aria/autocomplete/autocomplete-manual/autocomplete-manual-example.html

@@ -4,7 +4,6 @@
     <input
       aria-label="Label dropdown"
       placeholder="Select a country"
-      [(ngModel)]="query"
       ngComboboxInput
     />
     <button

src/components-examples/aria/autocomplete/autocomplete-manual/autocomplete-manual-example.ts

@@ -18,7 +18,6 @@ import {
   ChangeDetectionStrategy,
   Component,
   computed,
-  signal,
   viewChild,
   viewChildren,
 } from '@angular/core';
@@ -53,8 +52,11 @@ export class AutocompleteManualExample {
   /** A reference to the ng aria combobox. */
   combobox = viewChild<Combobox<string>>(Combobox);
 
+  /** A reference to the ng aria combobox input. */
+  comboboxInput = viewChild<ComboboxInput>(ComboboxInput);
+
   /** The query string used to filter the list of countries. */
-  query = signal('');
+  query = computed(() => this.comboboxInput()?.value() || '');
 
   /** The list of countries filtered by the query. */
   countries = computed(() =>
@@ -73,7 +75,7 @@ export class AutocompleteManualExample {
 
   /** Clears the query and the listbox value. */
   clear(): void {
-    this.query.set('');
+    this.comboboxInput()?.value.set('');
     this.listbox?.()?.values.set([]);
   }