Find-as-you-type improvements

- Add autocompleteEnabled input property for find-as-you-type
- Support escape and down arrow keys for hiding/showing FAYT results
- Add tests for find-as-you-type

Refs #737

ng2-components/ng2-alfresco-search/README.md

@@ -179,6 +179,7 @@ bootstrap(SearchDemo, [
 **inputType**: {string} (optional) default "text". Type of the input field to render, e.g. "search" or "text" (default)<br />
 **expandable** {boolean} (optional) default true. Whether to use an expanding search control, if false then a regular input is used.
 **autocomplete** {boolean} (optional) default true. Whether the browser should offer field auto-completion for the input field to the user.
+**autocompleteEnabled** {boolean} (optional) default true. Whether find-as-you-type suggestions should be offered for matching content items. Set to false to disable.
 
 ### Search results
 

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

@@ -15,10 +15,13 @@
                    [(ngModel)]="searchTerm"
                    (focus)="onFocus($event)"
                    (blur)="onBlur($event)"
+                   (keyup.escape)="onEscape($event)"
+                   (keyup.arrowdown)="onArrowDown($event)"
                    aria-labelledby="searchLabel">
             <label id="searchLabel" class="mdl-textfield__label" for="searchControl">{{'SEARCH.CONTROL.LABEL' | translate}}</label>
         </div>
     </div>
 </form>
-<alfresco-search-autocomplete [searchTerm]="autocompleteSearchTerm" [ngClass]="{active: searchActive, valid: searchValid}"
+<alfresco-search-autocomplete *ngIf="autocompleteEnabled"
+                              [searchTerm]="autocompleteSearchTerm" [ngClass]="{active: searchActive, valid: searchValid}"
                               (preview)="onFileClicked($event)"></alfresco-search-autocomplete>

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

@@ -131,6 +131,80 @@ describe('AlfrescoSearchControlComponent', () => {
         });
     });
 
+    describe('Find as you type', () => {
+
+        let inputEl: HTMLInputElement;
+
+        beforeEach(() => {
+            inputEl = element.querySelector('input');
+        });
+
+        it('should display a find-as-you-type control by default', () => {
+            alfrescoSearchControlComponentFixture.detectChanges();
+            let autocomplete: Element = element.querySelector('alfresco-search-autocomplete');
+            expect(autocomplete).not.toBeNull();
+        });
+
+        it('should make find-as-you-type control hidden initially', () => {
+            alfrescoSearchControlComponentFixture.detectChanges();
+            let autocomplete: Element = element.querySelector('alfresco-search-autocomplete');
+            expect(autocomplete.classList.contains('active')).toBe(false);
+        });
+
+        it('should make find-as-you-type control visible when search box has focus', () => {
+            alfrescoSearchControlComponentFixture.detectChanges();
+            inputEl.dispatchEvent(new Event('focus'));
+            alfrescoSearchControlComponentFixture.detectChanges();
+            let autocomplete: Element = element.querySelector('alfresco-search-autocomplete');
+            expect(autocomplete.classList.contains('active')).toBe(true);
+        });
+
+        it('should hide find-as-you-type results when the search box loses focus', (done) => {
+            alfrescoSearchControlComponentFixture.detectChanges();
+            inputEl.dispatchEvent(new Event('focus'));
+            inputEl.dispatchEvent(new Event('blur'));
+            window.setTimeout(() => {
+                alfrescoSearchControlComponentFixture.detectChanges();
+                let autocomplete: Element = element.querySelector('alfresco-search-autocomplete');
+                expect(autocomplete.classList.contains('active')).toBe(false);
+                done();
+            }, 250);
+        });
+
+        it('should hide find-as-you-type results when escape key pressed', () => {
+            alfrescoSearchControlComponentFixture.detectChanges();
+            inputEl.dispatchEvent(new Event('focus'));
+            inputEl.dispatchEvent(new KeyboardEvent('keyup', {
+                key: 'Escape'
+            }));
+            alfrescoSearchControlComponentFixture.detectChanges();
+            let autocomplete: Element = element.querySelector('alfresco-search-autocomplete');
+            expect(autocomplete.classList.contains('active')).toBe(false);
+        });
+
+        it('should make find-as-you-type control visible again when down arrow is pressed', () => {
+            alfrescoSearchControlComponentFixture.detectChanges();
+            inputEl.dispatchEvent(new Event('focus'));
+            inputEl.dispatchEvent(new KeyboardEvent('keyup', {
+                key: 'Escape'
+            }));
+            inputEl.dispatchEvent(new KeyboardEvent('keyup', {
+                key: 'ArrowDown'
+            }));
+            alfrescoSearchControlComponentFixture.detectChanges();
+            let autocomplete: Element = element.querySelector('alfresco-search-autocomplete');
+            expect(autocomplete.classList.contains('active')).toBe(true);
+        });
+
+        it('should NOT display a find-as-you-type control when configured not to', () => {
+            alfrescoSearchControlComponentFixture.componentInstance.autocompleteEnabled = false;
+            alfrescoSearchControlComponentFixture.detectChanges();
+            let autocomplete: Element = element.querySelector('alfresco-search-autocomplete');
+            expect(autocomplete).toBeNull();
+        });
+
+    });
+
     describe('search submit', () => {
 
         it('should fire a search when a term has been entered', () => {

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

@@ -58,6 +58,9 @@ export class AlfrescoSearchControlComponent implements OnInit {
 
     @ViewChild('searchInput', {}) searchInput: ElementRef;
 
+    @Input()
+    autocompleteEnabled = true;
+
     @Input()
     autocompleteSearchTerm = '';
 
@@ -146,4 +149,12 @@ export class AlfrescoSearchControlComponent implements OnInit {
         }
     }
 
+    onEscape(): void {
+        this.searchActive = false;
+    }
+
+    onArrowDown(): void {
+        this.searchActive = true;
+    }
+
 }