Initial tabbable search results implementation

Refs #371

ng2-components/ng2-alfresco-search/src/components/alfresco-search-autocomplete.component.html

@@ -1,7 +1,7 @@
 <table data-automation-id="autocomplete_results" *ngIf="results && results.length && searchTerm"
        class="mdl-data-table mdl-js-data-table mdl-shadow--2dp full-width">
-    <tbody>
+    <tbody (focusout)="onFocusOut()">
-    <tr id="result_row_{{idx}}" *ngFor="let result of results; let idx = index" (click)="onItemClick(result, $event)"
+    <tr id="result_row_{{idx}}" *ngFor="let result of results; let idx = index" tabindex="0" (blur)="onRowBlur(result)" (focus)="onRowFocus(result)" (click)="onItemClick(result, $event)" (keyup.enter)="onRowEnter(result, $event)"
         attr.data-automation-id="autocomplete_result_for_{{result.entry.name}}">
         <td class="img-td"><img src="{{getMimeTypeIcon(result)}}" alt="{{getMimeTypeKey(result)|translate}}"/></td>
         <td>

ng2-components/ng2-alfresco-search/src/components/alfresco-search-autocomplete.component.ts

@@ -43,6 +43,9 @@ export class AlfrescoSearchAutocompleteComponent implements OnInit, OnChanges {
     @Output()
     preview: EventEmitter<any> = new EventEmitter();
 
+    @Output()
+    blurEmitter: EventEmitter<any> = new EventEmitter();
+
     @Output()
     resultsEmitter = new EventEmitter();
 
@@ -129,4 +132,33 @@ export class AlfrescoSearchAutocompleteComponent implements OnInit, OnChanges {
         }
     }
 
+    onRowBlur(node): void {
+        window.setTimeout(() => {
+            let focusedEl = document.activeElement;
+            if (focusedEl && focusedEl.id && focusedEl.id.indexOf('result_row_') === 0) {
+                return;
+            }
+            this.blurEmitter.emit(node);
+        }, 100);
+        console.log('row blur', node);
+    }
+
+    onRowFocus(node): void {
+        console.log('row focus', node);
+    }
+
+    onRowEnter(node): void {
+        if (node && node.entry) {
+            if (node.entry.isFile) {
+                this.preview.emit({
+                    value: node
+                });
+            }
+        }
+    }
+
+    onFocusOut(): void {
+        console.log('onfocusout');
+    }
+
 }

ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.html

@@ -24,4 +24,4 @@
 </form>
 <alfresco-search-autocomplete *ngIf="autocompleteEnabled"
                               [searchTerm]="autocompleteSearchTerm" [ngClass]="{active: searchActive, valid: searchValid}"
-                              (preview)="onFileClicked($event)"></alfresco-search-autocomplete>
+                              (preview)="onFileClicked($event)" (blurEmitter)="onAutoCompleteBlur($event)"></alfresco-search-autocomplete>

ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.ts

@@ -138,6 +138,10 @@ export class AlfrescoSearchControlComponent implements OnInit {
 
     onBlur(): void {
         window.setTimeout(() => {
+            let focusedEl = document.activeElement;
+            if (focusedEl && focusedEl.id && focusedEl.id.indexOf('result_row_') === 0) {
+                return;
+            }
             this.searchActive = false;
         }, 200);
         if (this.expandable && (this.searchControl.value === '' || this.searchControl.value === undefined)) {
@@ -155,4 +159,8 @@ export class AlfrescoSearchControlComponent implements OnInit {
         this.searchActive = true;
     }
 
+    onAutoCompleteBlur(): void {
+        this.searchActive = false;
+    }
+
 }

ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.html

@@ -16,7 +16,7 @@
     </thead>
     <tbody>
 
-    <tr  id="result_row_{{idx}}" *ngFor="let result of results; let idx = index" (click)="onItemClick(result, $event)">
+    <tr  id="result_row_{{idx}}" tabindex="0" *ngFor="let result of results; let idx = index" (click)="onItemClick(result, $event)" (keyup.enter)="onItemClick(result, $event)">
         <td class="col-mimetype-icon"><img src="{{getMimeTypeIcon(result)}}" alt="{{getMimeTypeKey(result)|translate}}" /></td>
         <td id="result_name_{{idx}}" class="mdl-data-table__cell--non-numeric col-display-name"
             attr.data-automation-id=file_{{result.entry.name}} >{{result.entry.name}}</td>