From 8dca09d117b2b7e54b236e599c1acb18da472e25 Mon Sep 17 00:00:00 2001
From: kurilova <kurilova@google.com>
Date: Wed, 9 Apr 2025 13:12:02 +0000
Subject: [PATCH] Filter navigation buttons to remove "mouse-only" style; clear
 search input field when user input only spaces

---
 modules/ui/src/app/app.component.ts           | 22 ++++++++++++++++---
 .../list-layout/list-layout.component.ts      | 12 +++++++---
 2 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/modules/ui/src/app/app.component.ts b/modules/ui/src/app/app.component.ts
index a330ac3ae..9ee821865 100644
--- a/modules/ui/src/app/app.component.ts
+++ b/modules/ui/src/app/app.component.ts
@@ -81,6 +81,20 @@ const DRAFT_URL = '/assets/icons/draft.svg';
 const PILOT_URL = '/assets/icons/pilot.svg';
 const QUALIFICATION_URL = '/assets/icons/qualification.svg';
 
+const navKeys = [
+  'Tab',
+  'ArrowUp',
+  'ArrowDown',
+  'ArrowLeft',
+  'ArrowRight',
+  'Home',
+  'End',
+  'PageUp',
+  'PageDown',
+  'Escape',
+  'Enter',
+];
+
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
@@ -143,9 +157,11 @@ export class AppComponent implements AfterViewInit {
     this.renderer.addClass(document.body as HTMLElement, 'using-mouse');
   }
 
-  @HostListener('keydown')
-  onKeydown() {
-    this.renderer.removeClass(document.body as HTMLElement, 'using-mouse');
+  @HostListener('keydown', ['$event'])
+  onKeydown(e: KeyboardEvent) {
+    if (navKeys.includes(e.key)) {
+      this.renderer.removeClass(document.body as HTMLElement, 'using-mouse');
+    }
   }
 
   navigateToRuntime = () => {
diff --git a/modules/ui/src/app/components/list-layout/list-layout.component.ts b/modules/ui/src/app/components/list-layout/list-layout.component.ts
index 2153f580f..a89412897 100644
--- a/modules/ui/src/app/components/list-layout/list-layout.component.ts
+++ b/modules/ui/src/app/components/list-layout/list-layout.component.ts
@@ -83,9 +83,15 @@ export class ListLayoutComponent<T extends object> {
   };
 
   updateQuery(e: Event) {
-    const inputValue = (e.target as HTMLInputElement).value.trim();
-    const searchValue = inputValue.length > 2 ? inputValue : '';
-    this.searchText.set(searchValue);
+    const input = e.target as HTMLInputElement;
+    const value = input.value;
+    if (value.trim() === '') {
+      input.value = '';
+    } else {
+      const inputValue = value.trim();
+      const searchValue = inputValue.length > 2 ? inputValue : '';
+      this.searchText.set(searchValue);
+    }
   }
 
   filter(searchText: string) {