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 871521cd5f59799f80cbe372bc71602f9e340242..647fbc01f217a3ef751d396b3c5e577e5d057365 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 80049c8fbf2ce8c2d7343671546f5fc4d44067c1..55a5dabb6ac04199f3fd37e697c0681c1d169d13 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 a7a374bbab71e01ae881dace809887e8c8e2ca9a..8e39beda0be38253f99b8c4bfc82f8c7409d4531 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 76014a0d604cd5f5d47b2cca1b3c2cd9a1d50bd9..ae331b81b5aaa337af5e7d7e9a6af9a2f5339878 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); + } + } + }