Fix quick nav and key handling.

frontend/app/framework/angular/forms/editors/autocomplete.component.ts

@@ -135,22 +135,17 @@ export class AutocompleteComponent extends StatefulControlComponent<State, Reado
     }
 
     public onKeyDown(event: KeyboardEvent) {
-        switch (event.keyCode) {
+        if (Keys.isEscape(event)) {
-            case Keys.UP:
+            this.resetForm();
-                this.up();
+            this.reset();
-                return false;
+        } else if (Keys.isUp(event)) {
-            case Keys.DOWN:
+            this.selectPrevIndex();
-                this.down();
+            return false;
-                return false;
+        } else if (Keys.isDown(event)) {
-            case Keys.ESCAPE:
+            this.selectNextIndex();
-                this.resetForm();
+            return false;
-                this.reset();
+        } else if (Keys.isEnter(event)) {
-                return false;
+            return !(this.snapshot.suggestedItems.length > 0 && this.selectItem());
-            case Keys.ENTER:
-                if (this.snapshot.suggestedItems.length > 0 && this.selectItem()) {
-                    return false;
-                }
-                break;
         }
 
         return true;
@@ -250,11 +245,11 @@ export class AutocompleteComponent extends StatefulControlComponent<State, Reado
         this.next({ suggestedIndex });
     }
 
-    private up() {
+    private selectPrevIndex() {
         this.selectIndex(this.snapshot.suggestedIndex - 1);
     }
 
-    private down() {
+    private selectNextIndex() {
         this.selectIndex(this.snapshot.suggestedIndex + 1);
     }
 

frontend/app/framework/angular/forms/editors/dropdown.component.ts

@@ -149,7 +149,10 @@ export class DropdownComponent extends StatefulControlComponent<State, ReadonlyA
     }
 
     public onKeyDown(event: KeyboardEvent) {
-        if (Keys.isUp(event)) {
+        if (Keys.isEscape(event) && this.dropdown.isOpen) {
+            this.close();
+            return false;
+        } else if (Keys.isUp(event)) {
             this.selectPrevIndex();
             return false;
         } else if (Keys.isDown(event)) {
@@ -158,9 +161,6 @@ export class DropdownComponent extends StatefulControlComponent<State, ReadonlyA
         } else if (Keys.isEnter(event)) {
             this.selectIndexAndClose(this.snapshot.suggestedIndex);
             return false;
-        } else if (Keys.isEscape(event) && this.dropdown.isOpen) {
-            this.close();
-            return false;
         }
 
         return true;

frontend/app/framework/angular/forms/editors/tag-editor.component.ts

@@ -274,13 +274,9 @@ export class TagEditorComponent extends StatefulControlComponent<State, Readonly
     }
 
     public onKeyDown(event: KeyboardEvent) {
-        const key = event.keyCode;
+        if (Keys.isComma(event)) {
-
+            return !this.selectValue(this.addInput.value);
-        if (key === Keys.COMMA) {
+        } else if (Keys.isDelete(event)) {
-            if (this.selectValue(this.addInput.value)) {
-                return false;
-            }
-        } else if (key === Keys.DELETE) {
             const value = <string>this.addInput.value;
 
             if (!value || value.length === 0) {
@@ -288,13 +284,16 @@ export class TagEditorComponent extends StatefulControlComponent<State, Readonly
 
                 return false;
             }
-        } else if (key === Keys.UP) {
+        } else if (Keys.isEscape(event) && this.suggestionsModal.isOpen) {
+            this.suggestionsModal.hide();
+            return false;
+        }  else if (Keys.isUp(event)) {
             this.selectPrevIndex();
             return false;
-        } else if (key === Keys.DOWN) {
+        } else if (Keys.isDown(event)) {
             this.selectNextIndex();
             return false;
-        } else if (key === Keys.ENTER) {
+        } else if (Keys.isEnter(event)) {
             if (this.snapshot.suggestedIndex >= 0) {
                 if (this.selectValue(this.snapshot.suggestedItems[this.snapshot.suggestedIndex])) {
                     return false;

frontend/app/framework/utils/keys.ts

@@ -6,12 +6,12 @@
  */
 
 export module Keys {
-    export const COMMA = 188;
+    const COMMA = 188;
-    export const DELETE = 8;
+    const DELETE = 8;
-    export const ENTER = 13;
+    const ENTER = 13;
-    export const ESCAPE = 27;
+    const ESCAPE = 27;
-    export const DOWN = 40;
+    const DOWN = 40;
-    export const UP = 38;
+    const UP = 38;
 
     export function isComma(event: KeyboardEvent) {
         const key = event.key || event.keyCode;
@@ -46,6 +46,6 @@ export module Keys {
     export function isEscape(event: KeyboardEvent) {
         const key = event.key?.toUpperCase() || event.keyCode;
 
-        return key === 'ESCAPE' || key === 'ESC' || key === UP;
+        return key === 'ESCAPE' || key === 'ESC' || key === ESCAPE;
     }
  }

frontend/app/shell/pages/internal/search-menu.component.html

@@ -1,6 +1,7 @@
 <ng-container *ngIf="searchSource.selectedApp | async">
     <div class="search-container ml-4">
         <sqx-autocomplete [source]="searchSource" inputName="searchMenu" placeholder="{{ 'search.quickNavPlaceholder' | sqxTranslate }}" icon="search" #searchControl dropdownWidth="30rem"
+            [ngModel]="searchResult"
             (ngModelChange)="selectResult($event)">
             <ng-template let-result="$implicit">
                 <div class="row no-gutters">

frontend/app/shell/pages/internal/search-menu.component.ts

@@ -42,6 +42,8 @@ export class SearchMenuComponent {
     @ViewChild(AutocompleteComponent, { static: false })
     public searchControl: AutocompleteComponent;
 
+    public searchResult: SearchResultDto;
+
     constructor(
         private readonly router: Router,
         private readonly apiUrl: ApiUrlConfig,