diff --git a/src/aria/simple-combobox/simple-combobox.spec.ts b/src/aria/simple-combobox/simple-combobox.spec.ts index db7e8aab0204..25ca62f83bf9 100644 --- a/src/aria/simple-combobox/simple-combobox.spec.ts +++ b/src/aria/simple-combobox/simple-combobox.spec.ts @@ -1211,6 +1211,7 @@ describe('Combobox', () => { [alwaysExpanded]="alwaysExpanded()" [tabindex]="tabIndex()" (focusout)="onBlur()" + (click)="popupExpanded.set(true)" /> @@ -1556,6 +1557,7 @@ class ComboboxGridExample { (input)="onInput()" [disabled]="readonly()" (focusout)="onBlur()" + (click)="combobox.expanded.set(true)" /> @@ -1619,6 +1621,7 @@ class ComboboxListboxAutoSelectExample { [(expanded)]="popupExpanded" [inlineSuggestion]="value()[0] || options()[0]" [disabled]="readonly()" + (click)="popupExpanded.set(true)" /> diff --git a/src/components-examples/aria/simple-combobox/simple-combobox-auto-select/simple-combobox-auto-select-example.html b/src/components-examples/aria/simple-combobox/simple-combobox-auto-select/simple-combobox-auto-select-example.html index 1b4cc4335c7a..a7e0c22c28ba 100644 --- a/src/components-examples/aria/simple-combobox/simple-combobox-auto-select/simple-combobox-auto-select-example.html +++ b/src/components-examples/aria/simple-combobox/simple-combobox-auto-select/simple-combobox-auto-select-example.html @@ -2,7 +2,7 @@
search + [(value)]="searchString" [(expanded)]="popupExpanded" (click)="popupExpanded.set(true)" />
@@ -24,23 +14,24 @@ {{countries().length === 0 ? 'No results found for ' + query() : ''}} - +
@if (countries().length === 0) { -
No results found
+
No results found
} -
@for (country of countries(); track country) { -
- {{country}} - check -
+
+ {{country}} + check +
}
- + \ No newline at end of file diff --git a/src/components-examples/aria/simple-combobox/simple-combobox-autocomplete-highlight/simple-combobox-autocomplete-highlight-example.ts b/src/components-examples/aria/simple-combobox/simple-combobox-autocomplete-highlight/simple-combobox-autocomplete-highlight-example.ts index b56ddc14fa81..cd88394b8764 100644 --- a/src/components-examples/aria/simple-combobox/simple-combobox-autocomplete-highlight/simple-combobox-autocomplete-highlight-example.ts +++ b/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([]); + 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. */ diff --git a/src/components-examples/aria/simple-combobox/simple-combobox-autocomplete-manual/simple-combobox-autocomplete-manual-example.html b/src/components-examples/aria/simple-combobox/simple-combobox-autocomplete-manual/simple-combobox-autocomplete-manual-example.html index 8fa8048f8ac9..5eb208c9df80 100644 --- a/src/components-examples/aria/simple-combobox/simple-combobox-autocomplete-manual/simple-combobox-autocomplete-manual-example.html +++ b/src/components-examples/aria/simple-combobox/simple-combobox-autocomplete-manual/simple-combobox-autocomplete-manual-example.html @@ -2,7 +2,7 @@
search + [(value)]="searchString" [(expanded)]="popupExpanded" (click)="popupExpanded.set(true)" /> diff --git a/src/components-examples/aria/simple-combobox/simple-combobox-datepicker/simple-combobox-datepicker-example.html b/src/components-examples/aria/simple-combobox/simple-combobox-datepicker/simple-combobox-datepicker-example.html index 113d87f2f71b..14fb9b11f1d9 100644 --- a/src/components-examples/aria/simple-combobox/simple-combobox-datepicker/simple-combobox-datepicker-example.html +++ b/src/components-examples/aria/simple-combobox/simple-combobox-datepicker/simple-combobox-datepicker-example.html @@ -3,7 +3,7 @@ calendar_month + (keydown)="onInputKeydown($event)" (click)="popupExpanded.set(true)" />
search + [(value)]="searchString" [(expanded)]="popupExpanded" (blur)="onBlur()" (click)="popupExpanded.set(true)" /> search + [(value)]="searchString" [(expanded)]="popupExpanded" (click)="popupExpanded.set(true)" + (keydown.arrowdown)="navigated.set(true)" (keydown.arrowup)="navigated.set(true)" + [inlineSuggestion]="(searchString() || navigated()) ? selectedOption()[0] : undefined" /> -
+
@for (option of options(); track option.name) { -
+
{{option.name}}
diff --git a/src/components-examples/aria/simple-combobox/simple-combobox-highlight/simple-combobox-highlight-example.ts b/src/components-examples/aria/simple-combobox/simple-combobox-highlight/simple-combobox-highlight-example.ts index b3b3ac084f63..0a128a8e5691 100644 --- a/src/components-examples/aria/simple-combobox/simple-combobox-highlight/simple-combobox-highlight-example.ts +++ b/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([]); + 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() { diff --git a/src/components-examples/aria/simple-combobox/simple-combobox-listbox/simple-combobox-listbox-example.html b/src/components-examples/aria/simple-combobox/simple-combobox-listbox/simple-combobox-listbox-example.html index ba0b85e51203..b92662e2879c 100644 --- a/src/components-examples/aria/simple-combobox/simple-combobox-listbox/simple-combobox-listbox-example.html +++ b/src/components-examples/aria/simple-combobox/simple-combobox-listbox/simple-combobox-listbox-example.html @@ -2,7 +2,7 @@
search + [(value)]="searchString" [(expanded)]="popupExpanded" (click)="popupExpanded.set(true)" />
search + [(value)]="searchString" [(expanded)]="popupExpanded" (click)="popupExpanded.set(true)" />
search + [(value)]="searchString" [(expanded)]="popupExpanded" (click)="popupExpanded.set(true)" + (keydown.arrowdown)="navigated.set(true)" (keydown.arrowup)="navigated.set(true)" + [inlineSuggestion]="(searchString() || navigated()) ? selectedValues()[0] : undefined" />
-
-
    - -
-
+
    + +
diff --git a/src/components-examples/aria/simple-combobox/simple-combobox-tree-highlight/simple-combobox-tree-highlight-example.ts b/src/components-examples/aria/simple-combobox/simple-combobox-tree-highlight/simple-combobox-tree-highlight-example.ts index 6de3da7b55a4..4c284b9bebf3 100644 --- a/src/components-examples/aria/simple-combobox/simple-combobox-tree-highlight/simple-combobox-tree-highlight-example.ts +++ b/src/components-examples/aria/simple-combobox/simple-combobox-tree-highlight/simple-combobox-tree-highlight-example.ts @@ -12,6 +12,7 @@ import { Component, afterRenderEffect, computed, + effect, signal, viewChild, untracked, @@ -49,6 +50,7 @@ export class SimpleComboboxTreeHighlightExample { popupExpanded = signal(false); searchString = signal(''); selectedValues = signal([]); + navigated = signal(false); readonly dataSource = signal(FOOD_DATA); @@ -66,6 +68,12 @@ export class SimpleComboboxTreeHighlightExample { }); } }); + + effect(() => { + if (!this.popupExpanded()) { + this.navigated.set(false); + } + }); } filteredData = computed(() => { diff --git a/src/components-examples/aria/simple-combobox/simple-combobox-tree/simple-combobox-tree-example.html b/src/components-examples/aria/simple-combobox/simple-combobox-tree/simple-combobox-tree-example.html index 23976a7e47a9..16e41d50a106 100644 --- a/src/components-examples/aria/simple-combobox/simple-combobox-tree/simple-combobox-tree-example.html +++ b/src/components-examples/aria/simple-combobox/simple-combobox-tree/simple-combobox-tree-example.html @@ -2,7 +2,7 @@
search + [(expanded)]="popupExpanded" (click)="popupExpanded.set(true)" />