[ADF-2002] added ARROW support for search autocomplete results (#2732)

* [ADF-2002] added arrow up and down feature

* [ADF-2002] fixed search bar animation and added arrow support

* [ADF-2002] added some test for arrow manage

lib/content-services/search/components/search-control.component.ts

@@ -17,11 +17,13 @@
 
 import { AuthenticationService, ThumbnailService } from '@alfresco/adf-core';
 import { animate, state, style, transition, trigger } from '@angular/animations';
-import { Component, EventEmitter, Input, OnDestroy, OnInit, Output, ViewEncapsulation } from '@angular/core';
+import { Component, EventEmitter, Input, OnDestroy, OnInit, Output,
+         QueryList, ViewEncapsulation, ViewChild, ViewChildren, ElementRef } from '@angular/core';
 import { MinimalNodeEntity, QueryBody } from 'alfresco-js-api';
 import { Observable } from 'rxjs/Observable';
 import { Subject } from 'rxjs/Subject';
-import 'rxjs/add/operator/distinctUntilChanged';
+import { SearchComponent } from './search.component';
+import { MatListItem } from '@angular/material';
 
 @Component({
     selector: 'adf-search-control',
@@ -73,6 +75,15 @@ export class SearchControlComponent implements OnInit, OnDestroy {
     @Output()
     optionClicked: EventEmitter<any> = new EventEmitter();
 
+    @ViewChild(SearchComponent)
+    searchAutocomplete: SearchComponent;
+
+    @ViewChild('inputSearch')
+    inputSearch: ElementRef;
+
+    @ViewChildren(MatListItem)
+    private listResultElement: QueryList<MatListItem>;
+
     searchTerm: string = '';
     subscriptAnimationState: string;
 
@@ -88,6 +99,10 @@ export class SearchControlComponent implements OnInit, OnDestroy {
 
                 if (this.subscriptAnimationState === 'inactive') {
                     this.searchTerm = '';
+                    this.searchAutocomplete.resetResults();
+                    if ( document.activeElement.id === this.inputSearch.nativeElement.id) {
+                        this.inputSearch.nativeElement.blur();
+                    }
                 }
             }
         });
@@ -165,15 +180,39 @@ export class SearchControlComponent implements OnInit, OnDestroy {
         this.focusSubject.next($event);
     }
 
-    activateToolbar($event) {
+    activateToolbar() {
         if (!this.isSearchBarActive()) {
             this.toggleSearchBar();
         }
     }
 
+    selectFirstResult() {
+        if ( this.listResultElement && this.listResultElement.length > 0) {
+            let firstElement: MatListItem = <MatListItem> this.listResultElement.first;
+            firstElement._getHostElement().focus();
+        }
+    }
+
+    onRowArrowDown($event: KeyboardEvent): void {
+        let nextElement: any = this.getNextElementSibling(<Element> $event.target);
+        if (nextElement) {
+            nextElement.focus();
+        }
+    }
+
+    onRowArrowUp($event: KeyboardEvent): void {
+        let previousElement: any = this.getPreviousElementSibling(<Element> $event.target);
+        if (previousElement) {
+            previousElement.focus();
+        }else {
+            this.inputSearch.nativeElement.focus();
+            this.focusSubject.next(new FocusEvent('focus'));
+        }
+    }
+
     private setupFocusEventHandlers() {
         let focusEvents: Observable<FocusEvent> = this.focusSubject.asObservable()
-            .distinctUntilChanged().debounceTime(50);
+            .debounceTime(50);
         focusEvents.filter(($event: any) => {
             return this.isSearchBarActive() && ($event.type === 'blur' || $event.type === 'focusout');
         }).subscribe(() => {
@@ -181,4 +220,12 @@ export class SearchControlComponent implements OnInit, OnDestroy {
         });
     }
 
+    private getNextElementSibling(node: Element): Element {
+        return node.nextElementSibling;
+    }
+
+    private getPreviousElementSibling(node: Element): Element {
+        return node.previousElementSibling;
+    }
+
 }