docs(aria/combobox): update the simple-combobox examples to open on click (#33184)

* docs(aria/combobox): update the simple-combobox examples to open on click

* docs(aria/combobox): update highlight examples to not have inlineSuggestion on open but also will update as you navigate

Author: tjshiu

src/aria/simple-combobox/simple-combobox.spec.ts

@@ -1211,6 +1211,7 @@ describe('Combobox', () => {
     [alwaysExpanded]="alwaysExpanded()"
     [tabindex]="tabIndex()"
     (focusout)="onBlur()"
+    (click)="popupExpanded.set(true)"
   />
 
   <ng-template ngComboboxPopup [combobox]="combobox">
@@ -1556,6 +1557,7 @@ class ComboboxGridExample {
     (input)="onInput()"
     [disabled]="readonly()"
     (focusout)="onBlur()"
+    (click)="combobox.expanded.set(true)"
   />
 
   <ng-template ngComboboxPopup [combobox]="combobox">
@@ -1619,6 +1621,7 @@ class ComboboxListboxAutoSelectExample {
     [(expanded)]="popupExpanded"
     [inlineSuggestion]="value()[0] || options()[0]"
     [disabled]="readonly()"
+    (click)="popupExpanded.set(true)"
   />
 
   <ng-template ngComboboxPopup [combobox]="combobox">

src/components-examples/aria/simple-combobox/simple-combobox-auto-select/simple-combobox-auto-select-example.html

@@ -2,7 +2,7 @@
   <div #origin class="example-combobox-input-container">
     <span class="material-symbols-outlined example-icon example-search-icon">search</span>
     <input ngCombobox #combobox="ngCombobox" class="example-combobox-input" placeholder="Search states..."
-      [(value)]="searchString" [(expanded)]="popupExpanded" />
+      [(value)]="searchString" [(expanded)]="popupExpanded" (click)="popupExpanded.set(true)" />
   </div>
 
   <ng-template [cdkConnectedOverlay]="{origin, usePopover: 'inline', matchWidth: true}" [cdkConnectedOverlayOpen]="true"

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

@@ -8,6 +8,7 @@
       placeholder="Select a country"
       [(value)]="searchString"
       [(expanded)]="popupExpanded"
+      (click)="popupExpanded.set(true)"
     />
     <button
       class="example-clear-button"

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

@@ -1,21 +1,11 @@
 <div class="example-combobox-container">
   <div #origin class="example-autocomplete">
     <span class="example-search-icon material-symbols-outlined" translate="no">search</span>
-    <input
-      ngCombobox
-      #combobox="ngCombobox"
-      aria-label="Label dropdown"
-      placeholder="Select a country"
-      [(value)]="searchString"
-      [(expanded)]="popupExpanded"
-      [inlineSuggestion]="selectedOption()[0] || countries()[0]"
-    />
-    <button
-      class="example-clear-button"
-      aria-label="Clear"
-      (keydown)="onKeydown($event)"
-      (click)="clear()"
-    >
+    <input ngCombobox #combobox="ngCombobox" aria-label="Label dropdown" placeholder="Select a country"
+      [(value)]="searchString" [(expanded)]="popupExpanded" (click)="popupExpanded.set(true)"
+      (keydown.arrowdown)="navigated.set(true)" (keydown.arrowup)="navigated.set(true)"
+      [inlineSuggestion]="(searchString() || navigated()) ? selectedOption()[0] : undefined" />
+    <button class="example-clear-button" aria-label="Clear" (keydown)="onKeydown($event)" (click)="clear()">
       <span aria-hidden="true" class="example-clear-icon material-symbols-outlined">close</span>
     </button>
   </div>
@@ -24,23 +14,24 @@
     {{countries().length === 0 ? 'No results found for ' + query() : ''}}
   </div>
 
-  <ng-template [cdkConnectedOverlay]="{origin, usePopover: 'inline', matchWidth: true}" [cdkConnectedOverlayOpen]="true">
+  <ng-template [cdkConnectedOverlay]="{origin, usePopover: 'inline', matchWidth: true}"
+    [cdkConnectedOverlayOpen]="true">
     <ng-template ngComboboxPopup [combobox]="combobox">
       <div class="example-popup">
         @if (countries().length === 0) {
-          <div class="example-no-results">No results found</div>
+        <div class="example-no-results">No results found</div>
         }
 
-        <div ngListbox ngComboboxWidget focusMode="activedescendant" [tabindex]="-1" [(value)]="selectedOption"
+        <div ngListbox ngComboboxWidget focusMode="activedescendant" [tabindex]="-1" selectionMode="follow" [(value)]="selectedOption"
           (click)="onCommit()" (keydown.enter)="onCommit()">
           @for (country of countries(); track country) {
-            <div ngOption [value]="country" [label]="country" [disabled]="country === 'Brazil'">
-              <span class="example-option-label">{{country}}</span>
-              <span class="example-check-icon material-symbols-outlined" translate="no">check</span>
-            </div>
+          <div ngOption [value]="country" [label]="country" [disabled]="country === 'Brazil'">
+            <span class="example-option-label">{{country}}</span>
+            <span class="example-check-icon material-symbols-outlined" translate="no">check</span>
+          </div>
           }
         </div>
       </div>
     </ng-template>
   </ng-template>
-</div>
+</div>

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

@@ -13,6 +13,7 @@ import {
   ChangeDetectionStrategy,
   Component,
   computed,
+  effect,
   signal,
   viewChild,
 } from '@angular/core';
@@ -36,6 +37,7 @@ export class SimpleComboboxAutocompleteHighlightExample {
   popupExpanded = signal(false);
   searchString = signal('');
   selectedOption = signal<string[]>([]);
+  navigated = signal(false);
 
   /** The query string used to filter the list of countries. */
   query = computed(() => this.searchString());
@@ -49,6 +51,12 @@ export class SimpleComboboxAutocompleteHighlightExample {
     afterRenderEffect(() => {
       this.listbox()?.scrollActiveItemIntoView();
     });
+
+    effect(() => {
+      if (!this.popupExpanded()) {
+        this.navigated.set(false);
+      }
+    });
   }
 
   /** Clears the query and the listbox value. */

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

@@ -2,7 +2,7 @@
   <div #origin class="example-autocomplete">
     <span class="example-search-icon material-symbols-outlined" translate="no">search</span>
     <input ngCombobox #combobox="ngCombobox" aria-label="Label dropdown" placeholder="Select a country"
-      [(value)]="searchString" [(expanded)]="popupExpanded" />
+      [(value)]="searchString" [(expanded)]="popupExpanded" (click)="popupExpanded.set(true)" />
     <button class="example-clear-button" aria-label="Clear" (keydown)="onKeydown($event)" (click)="clear()">
       <span aria-hidden="true" class="example-clear-icon material-symbols-outlined">close</span>
     </button>

src/components-examples/aria/simple-combobox/simple-combobox-datepicker/simple-combobox-datepicker-example.html

@@ -3,7 +3,7 @@
     <span class="material-symbols-outlined example-icon example-search-icon">calendar_month</span>
     <input #comboboxInput ngCombobox #combobox="ngCombobox" class="example-combobox-input" placeholder="Pick a date..."
       [(value)]="selection" [(expanded)]="popupExpanded" aria-describedby="date-format-hint"
-      (keydown)="onInputKeydown($event)" />
+      (keydown)="onInputKeydown($event)" (click)="popupExpanded.set(true)" />
   </div>
 
   <ng-template [cdkConnectedOverlay]="{origin, usePopover: 'inline', matchWidth: false}"

src/components-examples/aria/simple-combobox/simple-combobox-grid/simple-combobox-grid-example.html

@@ -2,7 +2,7 @@
   <div #origin class="example-combobox-input-container">
     <span class="material-symbols-outlined example-icon example-search-icon">search</span>
     <input ngCombobox #combobox="ngCombobox" class="example-combobox-input" placeholder="Search..."
-      [(value)]="searchString" [(expanded)]="popupExpanded" (blur)="onBlur()" />
+      [(value)]="searchString" [(expanded)]="popupExpanded" (blur)="onBlur()" (click)="popupExpanded.set(true)" />
   </div>
 
   <ng-template [cdkConnectedOverlay]="{origin, usePopover: 'inline', matchWidth: true}" [cdkConnectedOverlayOpen]="true"

src/components-examples/aria/simple-combobox/simple-combobox-highlight/simple-combobox-highlight-example.html

@@ -2,19 +2,20 @@
   <div #origin class="example-combobox-input-container">
     <span class="material-symbols-outlined example-icon example-search-icon">search</span>
     <input ngCombobox #combobox="ngCombobox" class="example-combobox-input" placeholder="Search states..."
-      [(value)]="searchString" [(expanded)]="popupExpanded"
-      [inlineSuggestion]="selectedOption()[0] || options()[0]?.name" />
+      [(value)]="searchString" [(expanded)]="popupExpanded" (click)="popupExpanded.set(true)"
+      (keydown.arrowdown)="navigated.set(true)" (keydown.arrowup)="navigated.set(true)"
+      [inlineSuggestion]="(searchString() || navigated()) ? selectedOption()[0] : undefined" />
   </div>
 
   <ng-template [cdkConnectedOverlay]="{origin, usePopover: 'inline', matchWidth: true}" [cdkConnectedOverlayOpen]="true"
     [cdkConnectedOverlayDisableClose]="true">
     <ng-template ngComboboxPopup [combobox]="combobox">
-      <div #listbox="ngListbox" ngListbox ngComboboxWidget class="example-listbox example-popup" focusMode="activedescendant"
-        [tabindex]="-1" [(value)]="selectedOption" (click)="onCommit()" (keydown.enter)="onCommit()"
-        [activeDescendant]="listbox.activeDescendant()">
+      <div #listbox="ngListbox" ngListbox ngComboboxWidget class="example-listbox example-popup"
+        focusMode="activedescendant" [tabindex]="-1" [(value)]="selectedOption" (click)="onCommit()"
+        (keydown.enter)="onCommit()" [activeDescendant]="listbox.activeDescendant()">
         @for (option of options(); track option.name) {
-        <div class="example-option example-selectable example-stateful" ngOption [value]="option.name" [label]="option.name"
-          [disabled]="option.disabled">
+        <div class="example-option example-selectable example-stateful" ngOption [value]="option.name"
+          [label]="option.name" [disabled]="option.disabled">
           <span>{{option.name}}</span>
           <span aria-hidden="true" class="material-symbols-outlined example-icon example-selected-icon">check</span>
         </div>

src/components-examples/aria/simple-combobox/simple-combobox-highlight/simple-combobox-highlight-example.ts

@@ -8,7 +8,7 @@
 
 import {Combobox, ComboboxPopup, ComboboxWidget} from '@angular/aria/simple-combobox';
 import {Listbox, Option} from '@angular/aria/listbox';
-import {afterRenderEffect, Component, computed, signal, viewChild} from '@angular/core';
+import {afterRenderEffect, Component, computed, effect, signal, viewChild} from '@angular/core';
 import {OverlayModule} from '@angular/cdk/overlay';
 
 /** @title Simple Combobox Highlight */
@@ -24,6 +24,7 @@ export class SimpleComboboxHighlightExample {
   popupExpanded = signal(false);
   searchString = signal('');
   selectedOption = signal<string[]>([]);
+  navigated = signal(false);
 
   options = computed(() =>
     states.filter(state => state.name.toLowerCase().startsWith(this.searchString().toLowerCase())),
@@ -33,6 +34,12 @@ export class SimpleComboboxHighlightExample {
     afterRenderEffect(() => {
       this.listbox()?.scrollActiveItemIntoView();
     });
+
+    effect(() => {
+      if (!this.popupExpanded()) {
+        this.navigated.set(false);
+      }
+    });
   }
 
   onCommit() {