From 01f2309375e71d36a623236626f8dc5649aceffc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Thu, 9 Dec 2021 17:40:52 +0200
Subject: [PATCH] Spotlight execute search on enter

---
 .../spotlight-search.component.html           | 53 ++++++++++---------
 .../spotlight-search.component.ts             |  8 ++-
 2 files changed, 34 insertions(+), 27 deletions(-)

diff --git a/apps/red-ui/src/app/components/spotlight-search/spotlight-search.component.html b/apps/red-ui/src/app/components/spotlight-search/spotlight-search.component.html
index d0c1caa37..f337fb808 100644
--- a/apps/red-ui/src/app/components/spotlight-search/spotlight-search.component.html
+++ b/apps/red-ui/src/app/components/spotlight-search/spotlight-search.component.html
@@ -1,28 +1,31 @@
-<iqser-input-with-action
-    (click)="openMenuIfValue()"
-    (valueChange)="valueChanges$.next($event)"
-    [placeholder]="placeholder"
-></iqser-input-with-action>
+<form>
+    <iqser-input-with-action
+        (action)="executeCurrentAction()"
+        (click)="openMenuIfValue()"
+        (valueChange)="valueChanges$.next($event)"
+        [placeholder]="placeholder"
+    ></iqser-input-with-action>
 
-<mat-menu #menu="matMenu" class="search-menu" xPosition="after">
-    <ng-template matMenuContent>
-        <div class="wrapper">
-            <button
-                (click)="item.action(valueChanges$.getValue())"
-                *ngFor="let item of shownActions; let index = index"
-                [class.highlight]="(currentActionIdx$ | async) === index"
-                class="spotlight-row pointer"
-            >
-                <mat-icon [svgIcon]="item.icon"></mat-icon>
-                <span>{{ item.text }}</span>
-            </button>
-        </div>
-    </ng-template>
-</mat-menu>
+    <mat-menu #menu="matMenu" class="search-menu" xPosition="after">
+        <ng-template matMenuContent>
+            <div class="wrapper">
+                <button
+                    (click)="item.action(valueChanges$.getValue())"
+                    *ngFor="let item of shownActions; let index = index"
+                    [class.highlight]="(currentActionIdx$ | async) === index"
+                    class="spotlight-row pointer"
+                >
+                    <mat-icon [svgIcon]="item.icon"></mat-icon>
+                    <span>{{ item.text }}</span>
+                </button>
+            </div>
+        </ng-template>
+    </mat-menu>
 
-<!-- https://material.angular.io/components/menu/overview#toggling-the-menu-programmatically -->
-<!-- To toggle menu programmatically a matMenuTriggerFor directive is needed -->
-<div [matMenuTriggerFor]="menu"></div>
+    <!-- https://material.angular.io/components/menu/overview#toggling-the-menu-programmatically -->
+    <!-- To toggle menu programmatically a matMenuTriggerFor directive is needed -->
+    <div [matMenuTriggerFor]="menu"></div>
 
-<!-- A hack to avoid subscribing in component -->
-<ng-container *ngIf="showActions$ | async"></ng-container>
+    <!-- A hack to avoid subscribing in component -->
+    <ng-container *ngIf="showActions$ | async"></ng-container>
+</form>
diff --git a/apps/red-ui/src/app/components/spotlight-search/spotlight-search.component.ts b/apps/red-ui/src/app/components/spotlight-search/spotlight-search.component.ts
index 2d15d57d9..76564aaa7 100644
--- a/apps/red-ui/src/app/components/spotlight-search/spotlight-search.component.ts
+++ b/apps/red-ui/src/app/components/spotlight-search/spotlight-search.component.ts
@@ -38,6 +38,10 @@ export class SpotlightSearchComponent {
         }
     }
 
+    executeCurrentAction(): void {
+        this.shownActions[this._currentActionIdx].action(this.valueChanges$.getValue());
+    }
+
     @HostListener('document:keydown.arrowDown', ['$event'])
     @HostListener('document:keydown.arrowUp', ['$event'])
     handleKeyDown(event: KeyboardEvent): void {
@@ -48,13 +52,13 @@ export class SpotlightSearchComponent {
     handleKeyUpArrowDown(event: KeyboardEvent): void {
         this.handleKeyDown(event);
         const index = this._currentActionIdx + 1;
-        this._currentActionIdx$.next(index >= this.actions.length ? 0 : index);
+        this._currentActionIdx$.next(index >= this.shownActions.length ? 0 : index);
     }
 
     @HostListener('document:keyup.arrowUp', ['$event'])
     handleKeyUpArrowUp(event: KeyboardEvent): void {
         this.handleKeyDown(event);
         const index = this._currentActionIdx - 1;
-        this._currentActionIdx$.next(index < 0 ? this.actions.length - 1 : index);
+        this._currentActionIdx$.next(index < 0 ? this.shownActions.length - 1 : index);
     }
 }