From 49d4de3c66f2252c6fd7a5d381f11f5918010bc7 Mon Sep 17 00:00:00 2001
From: Sebastian <sebastian@squidex.io>
Date: Wed, 20 Jan 2021 17:31:48 +0100
Subject: [PATCH] Fix quick nav and key handling.

---
 .../forms/editors/autocomplete.component.ts   | 31 ++++++++-----------
 .../forms/editors/dropdown.component.ts       |  8 ++---
 .../forms/editors/tag-editor.component.ts     | 19 ++++++------
 frontend/app/framework/utils/keys.ts          | 14 ++++-----
 .../pages/internal/search-menu.component.html |  3 +-
 .../pages/internal/search-menu.component.ts   |  2 ++
 6 files changed, 37 insertions(+), 40 deletions(-)

diff --git a/frontend/app/framework/angular/forms/editors/autocomplete.component.ts b/frontend/app/framework/angular/forms/editors/autocomplete.component.ts
index 3df2f87e7..75bd8992f 100644
--- a/frontend/app/framework/angular/forms/editors/autocomplete.component.ts
+++ b/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) {
-            case Keys.UP:
-                this.up();
-                return false;
-            case Keys.DOWN:
-                this.down();
-                return false;
-            case Keys.ESCAPE:
-                this.resetForm();
-                this.reset();
-                return false;
-            case Keys.ENTER:
-                if (this.snapshot.suggestedItems.length > 0 && this.selectItem()) {
-                    return false;
-                }
-                break;
+        if (Keys.isEscape(event)) {
+            this.resetForm();
+            this.reset();
+        } else if (Keys.isUp(event)) {
+            this.selectPrevIndex();
+            return false;
+        } else if (Keys.isDown(event)) {
+            this.selectNextIndex();
+            return false;
+        } else if (Keys.isEnter(event)) {
+            return !(this.snapshot.suggestedItems.length > 0 && this.selectItem());
         }
 
         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);
     }
 
diff --git a/frontend/app/framework/angular/forms/editors/dropdown.component.ts b/frontend/app/framework/angular/forms/editors/dropdown.component.ts
index 7a79067f8..d25c506b2 100644
--- a/frontend/app/framework/angular/forms/editors/dropdown.component.ts
+++ b/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;
diff --git a/frontend/app/framework/angular/forms/editors/tag-editor.component.ts b/frontend/app/framework/angular/forms/editors/tag-editor.component.ts
index 289fecf1a..38f7e5030 100644
--- a/frontend/app/framework/angular/forms/editors/tag-editor.component.ts
+++ b/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 (key === Keys.COMMA) {
-            if (this.selectValue(this.addInput.value)) {
-                return false;
-            }
-        } else if (key === Keys.DELETE) {
+        if (Keys.isComma(event)) {
+            return !this.selectValue(this.addInput.value);
+        } else if (Keys.isDelete(event)) {
             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;
diff --git a/frontend/app/framework/utils/keys.ts b/frontend/app/framework/utils/keys.ts
index b52e5bd48..916abe6c6 100644
--- a/frontend/app/framework/utils/keys.ts
+++ b/frontend/app/framework/utils/keys.ts
@@ -6,12 +6,12 @@
  */
 
 export module Keys {
-    export const COMMA = 188;
-    export const DELETE = 8;
-    export const ENTER = 13;
-    export const ESCAPE = 27;
-    export const DOWN = 40;
-    export const UP = 38;
+    const COMMA = 188;
+    const DELETE = 8;
+    const ENTER = 13;
+    const ESCAPE = 27;
+    const DOWN = 40;
+    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;
     }
  }
\ No newline at end of file
diff --git a/frontend/app/shell/pages/internal/search-menu.component.html b/frontend/app/shell/pages/internal/search-menu.component.html
index c82557066..518fd6a0f 100644
--- a/frontend/app/shell/pages/internal/search-menu.component.html
+++ b/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" 
+        <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">
diff --git a/frontend/app/shell/pages/internal/search-menu.component.ts b/frontend/app/shell/pages/internal/search-menu.component.ts
index 1f907b102..1122a8293 100644
--- a/frontend/app/shell/pages/internal/search-menu.component.ts
+++ b/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,