From 33b02fd13f9810aba035cbcc380e59b125162781 Mon Sep 17 00:00:00 2001
From: Cindy <cindy.nacibide@teamdlab.com>
Date: Thu, 14 Jan 2021 16:04:19 +0100
Subject: [PATCH] [US TRTL-678] On search app, put focus on search input
---
.../header/menu/menu.component.html | 2 +-
.../components/header/menu/menu.component.ts | 8 +++--
.../search-bar/search-bar.component.html | 29 +++++++++++++++++--
.../search-bar/search-bar.component.ts | 10 ++++++-
4 files changed, 41 insertions(+), 8 deletions(-)
diff --git a/ui/ui-frontend-common/src/app/modules/components/header/menu/menu.component.html b/ui/ui-frontend-common/src/app/modules/components/header/menu/menu.component.html
index 871521cd5..647fbc01f 100644
--- a/ui/ui-frontend-common/src/app/modules/components/header/menu/menu.component.html
+++ b/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)"
diff --git a/ui/ui-frontend-common/src/app/modules/components/header/menu/menu.component.ts b/ui/ui-frontend-common/src/app/modules/components/header/menu/menu.component.ts
index 80049c8fb..55a5dabb6 100644
--- a/ui/ui-frontend-common/src/app/modules/components/header/menu/menu.component.ts
+++ b/ui/ui-frontend-common/src/app/modules/components/header/menu/menu.component.ts
@@ -1,5 +1,5 @@
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 {
diff --git a/ui/ui-frontend-common/src/app/modules/components/search-bar/search-bar.component.html b/ui/ui-frontend-common/src/app/modules/components/search-bar/search-bar.component.html
index a7a374bba..8e39beda0 100644
--- a/ui/ui-frontend-common/src/app/modules/components/search-bar/search-bar.component.html
+++ b/ui/ui-frontend-common/src/app/modules/components/search-bar/search-bar.component.html
@@ -1,5 +1,28 @@
<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>
diff --git a/ui/ui-frontend-common/src/app/modules/components/search-bar/search-bar.component.ts b/ui/ui-frontend-common/src/app/modules/components/search-bar/search-bar.component.ts
index 76014a0d6..ae331b81b 100644
--- a/ui/ui-frontend-common/src/app/modules/components/search-bar/search-bar.component.ts
+++ b/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);
+ }
+ }
+
}
--
GitLab