From 417e0edd443488b649b35fc669ceb53b7fb1e40e Mon Sep 17 00:00:00 2001
From: Will Abson <will.abson@gmail.com>
Date: Thu, 9 Jun 2016 16:17:52 +0100
Subject: [PATCH] Search-as-you-type drop-down should disappear when input
 focus is lost

Refs #173
---
 .../alfresco-search-autocomplete.component.ts | 15 +++++-----
 .../alfresco-search-control.component.html    |  5 ++--
 .../alfresco-search-control.component.ts      | 30 +++++++++++++++----
 3 files changed, 36 insertions(+), 14 deletions(-)

diff --git a/ng2-components/ng2-alfresco-search/src/components/alfresco-search-autocomplete.component.ts b/ng2-components/ng2-alfresco-search/src/components/alfresco-search-autocomplete.component.ts
index 38a6585e2d..6a78023420 100644
--- a/ng2-components/ng2-alfresco-search/src/components/alfresco-search-autocomplete.component.ts
+++ b/ng2-components/ng2-alfresco-search/src/components/alfresco-search-autocomplete.component.ts
@@ -42,6 +42,9 @@ declare let __moduleName: string;
             height: 32px;
             padding: 8px;
             text-align: left;
+        }
+        :host.active.valid {
+            display: block;
         }`
     ],
     templateUrl: './alfresco-search-autocomplete.component.html',
@@ -57,6 +60,9 @@ export class AlfrescoSearchAutocompleteComponent implements OnChanges {
 
     errorMessage;
 
+    @Input()
+    ngClass: any;
+
     route: any[] = [];
 
     constructor(
@@ -65,18 +71,13 @@ export class AlfrescoSearchAutocompleteComponent implements OnChanges {
         private el: ElementRef,
         private renderer: Renderer
     ) {
-        console.log('Autocomplete constructor');
         translate.addTranslationFolder('node_modules/ng2-alfresco-search');
         this.results = null;
     }
 
     ngOnChanges(changes) {
-        console.log('Autocomplete changes');
-        if (this.searchTerm.length >= 3) {
+        if (changes.searchTerm) {
             this.displaySearchResults(this.searchTerm);
-            this.renderer.setElementStyle(this.el.nativeElement, 'display', 'block');
-        } else {
-            this.renderer.setElementStyle(this.el.nativeElement, 'display', 'none');
         }
     }
 
@@ -85,7 +86,7 @@ export class AlfrescoSearchAutocompleteComponent implements OnChanges {
      * @param searchTerm Search query entered by user
      */
     displaySearchResults(searchTerm) {
-        if (searchTerm !== null) {
+        if (searchTerm !== null && searchTerm !== '') {
             this._alfrescoService
                 .getLiveSearchResults(searchTerm)
                 .subscribe(
diff --git a/ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.html b/ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.html
index 6358a8838e..e8dc483460 100644
--- a/ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.html
+++ b/ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.html
@@ -4,9 +4,10 @@
             <i class="material-icons">search</i>
         </label>
         <div [class]="getTextFieldHolderClassName()">
-            <input class="mdl-textfield__input" [type]="inputType" [autocomplete]="getAutoComplete()" id="searchControl" [ngFormControl]="searchControl" [(ngModel)]="searchTerm">
+            <input class="mdl-textfield__input" [type]="inputType" [autocomplete]="getAutoComplete()"
+                   id="searchControl" [ngFormControl]="searchControl" [(ngModel)]="searchTerm" (focus)="onFocus()" (blur)="onBlur()">
             <label class="mdl-textfield__label" for="searchControl">{{'SEARCH.CONTROL.LABEL' | translate}}</label>
         </div>
     </div>
 </form>
-<alfresco-search-autocomplete [searchTerm]="autocompleteSearchTerm"></alfresco-search-autocomplete>
+<alfresco-search-autocomplete [searchTerm]="autocompleteSearchTerm" [ngClass]="{active: searchActive, valid: searchValid}"></alfresco-search-autocomplete>
diff --git a/ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.ts b/ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.ts
index 7187ec42e9..6a4f79ebf2 100644
--- a/ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.ts
+++ b/ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.ts
@@ -56,6 +56,10 @@ export class AlfrescoSearchControlComponent implements AfterViewInit {
     @Input()
     autocompleteSearchTerm = '';
 
+    searchActive = false;
+
+    searchValid = false;
+
     constructor(private translate: AlfrescoTranslationService) {
 
         this.searchControl = new Control(
@@ -63,11 +67,13 @@ export class AlfrescoSearchControlComponent implements AfterViewInit {
             Validators.compose([Validators.required, Validators.minLength(3)])
         );
 
-        this.searchControl.valueChanges.debounceTime(400).distinctUntilChanged().subscribe(
-            (value: string) => {
-                this.autocompleteSearchTerm = value;
-            }
-        );
+        this.searchControl.valueChanges.map(value => this.searchControl.valid ? value : '')
+            .debounceTime(400).distinctUntilChanged().subscribe(
+                (value: string) => {
+                    this.autocompleteSearchTerm = value;
+                    this.searchValid = this.searchControl.valid;
+                }
+            );
 
         translate.addTranslationFolder('node_modules/ng2-alfresco-search');
     }
@@ -105,4 +111,18 @@ export class AlfrescoSearchControlComponent implements AfterViewInit {
         }
     }
 
+    onFocus(event) {
+        if (event) {
+            event.preventDefault();
+        }
+        this.searchActive = true;
+    }
+
+    onBlur(event) {
+        if (event) {
+            event.preventDefault();
+        }
+        this.searchActive = false;
+    }
+
 }