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

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

@@ -8,6 +8,7 @@
       placeholder="Select a country"
       [(value)]="searchString"
       [(expanded)]="popupExpanded"
+      (click)="popupExpanded.set(true)"
       [inlineSuggestion]="selectedOption()[0] || countries()[0]"
     />
     <button

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,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)"
       [inlineSuggestion]="selectedOption()[0] || options()[0]?.name" />
   </div>
 

src/components-examples/aria/simple-combobox/simple-combobox-listbox/simple-combobox-listbox-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" />
+      [(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-tree-auto-select/simple-combobox-tree-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..."
-      [(value)]="searchString" [(expanded)]="popupExpanded" />
+      [(value)]="searchString" [(expanded)]="popupExpanded" (click)="popupExpanded.set(true)" />
   </div>
 
   <ng-template [cdkConnectedOverlay]="{origin, usePopover: 'inline', matchWidth: true}"