Skip to content

docs(aria/combobox): allow clear input with escape key #33282

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ok7sai wants to merge 1 commit into
base: main
Choose a base branch
from
Open

docs(aria/combobox): allow clear input with escape key #33282

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions ...examples/aria/autocomplete/autocomplete-auto-select/autocomplete-auto-select-example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
[(value)]="searchString"
[(expanded)]="popupExpanded"
(click)="popupExpanded.set(true)"
(keydown.escape)="!popupExpanded() && !$event.defaultPrevented && searchString.set('')"
Copy link
Copy Markdown
Member

@crisbeto crisbeto May 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we need the defaultPrevented check? I'm not sure we're preventing it anywhere.

Copy link
Copy Markdown
Member Author

@ok7sai ok7sai May 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

https://github.com/angular/components/blob/main/src/aria/private/combobox/combobox.ts#L140 the combobox handles the escape key and prevents default, without the defaultPrevented the input box will be cleared even when the popup is opened (the clear behavior should only happen when the popup is closed and escape hit is hit)... popupExpanded() returns false immediately once the escape key is hit, so we can't rely on that value.

Maybe the clear behavior needs to be baked into the combobox pattern... Let me take a further look.

/>
<button
class="example-clear-button"
Expand Down
3 changes: 2 additions & 1 deletion ...nts-examples/aria/autocomplete/autocomplete-highlight/autocomplete-highlight-example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@
<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" />
[inlineSuggestion]="(searchString() || navigated()) ? selectedOption()[0] : undefined"
(keydown.escape)="!popupExpanded() && !$event.defaultPrevented && searchString.set('')" />
<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>
Expand Down
3 changes: 2 additions & 1 deletion ...omponents-examples/aria/autocomplete/autocomplete-manual/autocomplete-manual-example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,8 @@
<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" (click)="popupExpanded.set(true)" />
[(value)]="searchString" [(expanded)]="popupExpanded" (click)="popupExpanded.set(true)"
(keydown.escape)="!popupExpanded() && !$event.defaultPrevented && searchString.set('')" />
<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>
Expand Down
Loading