diff --git a/ng2-components/ng2-alfresco-search/README.md b/ng2-components/ng2-alfresco-search/README.md index 9bcff08f8e..7ba8d3b945 100644 --- a/ng2-components/ng2-alfresco-search/README.md +++ b/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)
**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 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 faedc3235a..868063b0f5 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 @@ -15,10 +15,13 @@ [(ngModel)]="searchTerm" (focus)="onFocus($event)" (blur)="onBlur($event)" + (keyup.escape)="onEscape($event)" + (keyup.arrowdown)="onArrowDown($event)" aria-labelledby="searchLabel"> - diff --git a/ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.spec.ts b/ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.spec.ts index ba97dd2c8e..703c811f2b 100644 --- a/ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.spec.ts +++ b/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', () => { 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 5435cd67d0..b572b7f444 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 @@ -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; + } + }