Fix: correctly handle global search esc key when open and button focused (#6644)

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 96f61bca15eee944cf58e555cc11b1e568ec43b5..514918584179a4bc49173df7501a1fa132c982dc 100644 (file)
--- 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 6d342566d657ddddd174b323c2803cbf15406f96..35973501fe5b977a8a305d368ffdbe569e934101 100644 (file)
--- 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()
     }