[US TRTL-678] On search app, put focus on search input

ui/ui-frontend-common/src/app/modules/components/header/menu/menu.component.html

@@ -3,7 +3,7 @@
     [@opacityAnimation]="state"
     >
     <div class="row header">
-        <vitamui-common-search-bar
+        <vitamui-common-search-bar #searchBar
             class="col-5 mr-2"
             name="category-search"
             (searchChanged)="onSearch($event)"

ui/ui-frontend-common/src/app/modules/components/header/menu/menu.component.ts

 import { animate, keyframes, query, stagger, state, style, transition, trigger } from '@angular/animations';
-import { AfterViewInit, ChangeDetectorRef, Component, HostListener, OnDestroy, OnInit, QueryList, ViewChildren } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, Component, HostListener, OnDestroy, OnInit, QueryList, ViewChild, ViewChildren } from '@angular/core';
 import { MatSelectionList } from '@angular/material/list';
 import { MatTabChangeEvent } from '@angular/material/tabs';
 import { Router } from '@angular/router';
@@ -11,6 +11,7 @@ import { Category } from '../../../models';
 import { Application } from '../../../models/application/application.interface';
 import { TenantSelectionService } from '../../../tenant-selection.service';
 import { MenuOption } from '../../navbar';
+import { SearchBarComponent } from '../../search-bar';
 import { Tenant } from './../../../models/customer/tenant.interface';
 import { StartupService } from './../../../startup.service';
 import { MenuOverlayRef } from './menu-overlay-ref';
@@ -39,6 +40,7 @@ export class MenuComponent implements OnInit, AfterViewInit {
   private firstResultFocused = false;
   private destroyer$ = new Subject();
 
+  @ViewChild('searchBar', { static: true }) searchBar: SearchBarComponent;
   @ViewChildren(MatSelectionList) selectedList: QueryList<MatSelectionList>;
   @HostListener('document:keydown', ['$event'])
   handleKeyboardEvent(event: KeyboardEvent) {
@@ -85,7 +87,7 @@ export class MenuComponent implements OnInit, AfterViewInit {
   }
 
   ngAfterViewInit(): void {
-    this.changeTabFocus();
+    this.searchBar.onFocus();
   }
 
   public onSearch(value: string): void {
@@ -111,7 +113,7 @@ export class MenuComponent implements OnInit, AfterViewInit {
   public resetSearch(): void {
     this.filteredApplications = null;
     this.criteria = '';
-    this.changeTabFocus();
+    this.searchBar.onFocus();
   }
 
   public onClose(): void {

ui/ui-frontend-common/src/app/modules/components/search-bar/search-bar.component.html

 <div class="search">
-  <input [(ngModel)]="searchValue" (ngModelChange)="searchChanged.emit(searchValue)" [name]="name" type="text" [placeholder]="placeholder" [disabled]="disabled">
-  <button *ngIf="searchValue" type="button" class="btn-reset" (click)="reset()" [disabled]="disabled"><i class="material-icons">clear</i></button>
-  <button type="button" class="btn btn-circle btn-search secondary small" (click)="onSearch()" [disabled]="disabled"><i class="material-icons">search</i></button>
+  <input
+    #searchInput
+    [(ngModel)]="searchValue"
+    (ngModelChange)="searchChanged.emit(searchValue)"
+    [name]="name"
+    type="text"
+    [placeholder]="placeholder"
+    [disabled]="disabled"
+  />
+  <button
+    *ngIf="searchValue"
+    type="button"
+    class="btn-reset"
+    (click)="reset()"
+    [disabled]="disabled"
+  >
+    <i class="material-icons">clear</i>
+  </button>
+  <button
+    type="button"
+    class="btn btn-circle btn-search secondary small"
+    (click)="onSearch()"
+    [disabled]="disabled"
+  >
+    <i class="material-icons">search</i>
+  </button>
 </div>

ui/ui-frontend-common/src/app/modules/components/search-bar/search-bar.component.ts

@@ -34,7 +34,7 @@
  * The fact that you are presently reading this means that you have had
  * knowledge of the CeCILL-C license and that you accept its terms.
  */
-import { Component, EventEmitter, HostListener, Input, OnInit, Output } from '@angular/core';
+import { Component, ElementRef, EventEmitter, HostListener, Input, OnInit, Output, ViewChild } from '@angular/core';
 
 @Component({
   selector: 'vitamui-common-search-bar',
@@ -55,6 +55,8 @@ export class SearchBarComponent implements OnInit {
 
   @Output() clear = new EventEmitter<string>();
 
+  @ViewChild('searchInput', { static: true }) searchInput: ElementRef;
+
   searchValue: string;
 
   constructor() { }
@@ -73,4 +75,10 @@ export class SearchBarComponent implements OnInit {
     this.search.emit(this.searchValue);
   }
 
+  public onFocus() {
+    if (this.searchInput) {
+      setTimeout(() => this.searchInput.nativeElement.focus(), 0);
+    }
+  }
+
 }