From 3e22f033c7014753e92f47ce1114d4163ded2cfb Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Thu, 9 May 2024 06:41:42 -0700
Subject: [PATCH] Fix: correctly handle global search esc key when open and
 button focused (#6644)

---
 .../global-search/global-search.component.spec.ts        | 8 ++++++++
 .../app-frame/global-search/global-search.component.ts   | 9 ++++++++-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/src-ui/src/app/components/app-frame/global-search/global-search.component.spec.ts b/src-ui/src/app/components/app-frame/global-search/global-search.component.spec.ts
index 96f61bca1..514918584 100644
--- a/src-ui/src/app/components/app-frame/global-search/global-search.component.spec.ts
+++ b/src-ui/src/app/components/app-frame/global-search/global-search.component.spec.ts
@@ -252,6 +252,14 @@ describe('GlobalSearchComponent', () => {
     const openSpy = jest.spyOn(component.resultsDropdown, 'open')
     component.searchInputKeyDown(new KeyboardEvent('keydown', { key: 'Enter' }))
     expect(openSpy).toHaveBeenCalled()
+
+    component.searchInputKeyDown(
+      new KeyboardEvent('keydown', { key: 'ArrowDown' })
+    )
+    expect(component['currentItemIndex']).toBe(0)
+    const closeSpy = jest.spyOn(component.resultsDropdown, 'close')
+    component.dropdownKeyDown(new KeyboardEvent('keydown', { key: 'Escape' }))
+    expect(closeSpy).toHaveBeenCalled()
   })
 
   it('should search on query debounce', fakeAsync(() => {
diff --git a/src-ui/src/app/components/app-frame/global-search/global-search.component.ts b/src-ui/src/app/components/app-frame/global-search/global-search.component.ts
index 6d342566d..35973501f 100644
--- a/src-ui/src/app/components/app-frame/global-search/global-search.component.ts
+++ b/src-ui/src/app/components/app-frame/global-search/global-search.component.ts
@@ -318,6 +318,11 @@ export class GlobalSearchComponent implements OnInit {
         event.preventDefault()
         event.stopImmediatePropagation()
         this.primaryButtons.get(this.domIndex).nativeElement.focus()
+      } else if (event.key === 'Escape') {
+        event.preventDefault()
+        event.stopImmediatePropagation()
+        this.reset(true)
+        this.searchInput.nativeElement.focus()
       }
     }
   }
@@ -325,7 +330,9 @@ export class GlobalSearchComponent implements OnInit {
   onButtonKeyDown(event: KeyboardEvent) {
     // prevents ngBootstrap issue with keydown events
     if (
-      !['ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft'].includes(event.key)
+      !['ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft', 'Escape'].includes(
+        event.key
+      )
     ) {
       event.stopImmediatePropagation()
     }