New implementation of focus/blur event management using Obserable

Refs #371

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

@@ -16,9 +16,10 @@
  */
 
 import { FormControl, Validators } from '@angular/forms';
-import { Component, Input, Output, OnInit, ElementRef, EventEmitter, ViewChild } from '@angular/core';
+import { Component, Input, Output, OnInit, OnDestroy, ElementRef, EventEmitter, ViewChild } from '@angular/core';
 import { AlfrescoTranslationService } from 'ng2-alfresco-core';
 import { SearchTermValidator } from './../forms/search-term-validator';
+import { Observable, Subject } from 'rxjs/Rx';
 
 @Component({
     moduleId: module.id,
@@ -26,7 +27,7 @@ import { SearchTermValidator } from './../forms/search-term-validator';
     templateUrl: './alfresco-search-control.component.html',
     styleUrls: ['./alfresco-search-control.component.css']
 })
-export class AlfrescoSearchControlComponent implements OnInit {
+export class AlfrescoSearchControlComponent implements OnInit, OnDestroy {
 
     @Input()
     searchTerm = '';
@@ -66,6 +67,8 @@ export class AlfrescoSearchControlComponent implements OnInit {
 
     searchValid = false;
 
+    private focusSubject = new Subject<FocusEvent>();
+
     constructor(private translate: AlfrescoTranslationService) {
 
         this.searchControl = new FormControl(
@@ -80,9 +83,16 @@ export class AlfrescoSearchControlComponent implements OnInit {
                 this.onSearchTermChange(value);
             }
         );
+
+        this.setupFocusEventHandlers();
+
         this.translate.addTranslationFolder('node_modules/ng2-alfresco-search/dist/src');
     }
 
+    ngOnDestroy(): void {
+        this.focusSubject.unsubscribe();
+    }
+
     private onSearchTermChange(value: string): void {
         this.searchActive = true;
         this.autocompleteSearchTerm = value;
@@ -94,6 +104,20 @@ export class AlfrescoSearchControlComponent implements OnInit {
         });
     }
 
+    private setupFocusEventHandlers() {
+        let focusEvents: Observable<FocusEvent> = this.focusSubject.asObservable().debounceTime(50);
+        focusEvents.filter(($event: FocusEvent) => {
+            return $event.type === 'focusin' || $event.type === 'focus';
+        }).subscribe(($event) => {
+            this.onSearchFocus($event);
+        });
+        focusEvents.filter(($event: any) => {
+            return $event.type === 'focusout' || $event.type === 'blur';
+        }).subscribe(($event) => {
+            this.onSearchBlur($event);
+        });
+    }
+
     getTextFieldClassName(): string {
         return 'mdl-textfield mdl-js-textfield' + (this.expandable ? ' mdl-textfield--expandable' : '');
     }
@@ -127,28 +151,30 @@ export class AlfrescoSearchControlComponent implements OnInit {
         });
     }
 
-    onFocus(): void {
+    onSearchFocus($event): void {
         this.searchActive = true;
+    }
+
+    onSearchBlur($event): void {
+        this.searchActive = false;
+    }
+
+    onFocus($event): void {
         if (this.expandable) {
             this.expand.emit({
                 expanded: true
             });
         }
+        this.focusSubject.next($event);
     }
 
-    onBlur(): void {
-        window.setTimeout(() => {
-            let focusedEl = document.activeElement;
-            if (focusedEl && focusedEl.id && focusedEl.id.indexOf('result_row_') === 0) {
-                return;
-            }
-            this.searchActive = false;
-        }, 200);
+    onBlur($event): void {
         if (this.expandable && (this.searchControl.value === '' || this.searchControl.value === undefined)) {
             this.expand.emit({
                 expanded: false
             });
         }
+        this.focusSubject.next($event);
     }
 
     onEscape(): void {
@@ -159,8 +185,8 @@ export class AlfrescoSearchControlComponent implements OnInit {
         this.searchActive = true;
     }
 
-    onAutoCompleteBlur(): void {
-        this.searchActive = false;
+    onAutoCompleteFocus($event): void {
+        this.focusSubject.next($event);
     }
 
 }