From 9090017d9978a41dfba3bcd5e664a3b01329037c Mon Sep 17 00:00:00 2001
From: Cheng-Hsuan Tsai <webcat@google.com>
Date: Wed, 20 May 2026 07:50:12 +0000
Subject: [PATCH] docs(aria/combobox): allow clear input with escape key

---
 .../autocomplete-auto-select-example.html                      | 1 +
 .../autocomplete-highlight/autocomplete-highlight-example.html | 3 ++-
 .../autocomplete-manual/autocomplete-manual-example.html       | 3 ++-
 3 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components-examples/aria/autocomplete/autocomplete-auto-select/autocomplete-auto-select-example.html b/src/components-examples/aria/autocomplete/autocomplete-auto-select/autocomplete-auto-select-example.html
index 8d48bffe1760..f94e910a47f5 100644
--- a/src/components-examples/aria/autocomplete/autocomplete-auto-select/autocomplete-auto-select-example.html
+++ b/src/components-examples/aria/autocomplete/autocomplete-auto-select/autocomplete-auto-select-example.html
@@ -9,6 +9,7 @@
       [(value)]="searchString"
       [(expanded)]="popupExpanded"
       (click)="popupExpanded.set(true)"
+      (keydown.escape)="!popupExpanded() && !$event.defaultPrevented && searchString.set('')"
     />
     <button
       class="example-clear-button"
diff --git a/src/components-examples/aria/autocomplete/autocomplete-highlight/autocomplete-highlight-example.html b/src/components-examples/aria/autocomplete/autocomplete-highlight/autocomplete-highlight-example.html
index 852cc6a20d9f..3ac46f0d6e0f 100644
--- a/src/components-examples/aria/autocomplete/autocomplete-highlight/autocomplete-highlight-example.html
+++ b/src/components-examples/aria/autocomplete/autocomplete-highlight/autocomplete-highlight-example.html
@@ -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>
diff --git a/src/components-examples/aria/autocomplete/autocomplete-manual/autocomplete-manual-example.html b/src/components-examples/aria/autocomplete/autocomplete-manual/autocomplete-manual-example.html
index 521518a42290..c816fb4a59db 100644
--- a/src/components-examples/aria/autocomplete/autocomplete-manual/autocomplete-manual-example.html
+++ b/src/components-examples/aria/autocomplete/autocomplete-manual/autocomplete-manual-example.html
@@ -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>