diff --git a/src/app/components/search/index.html b/src/app/components/search/index.html index 4b3e812ae..b40b25474 100644 --- a/src/app/components/search/index.html +++ b/src/app/components/search/index.html @@ -41,6 +41,10 @@ propertyName="searchChange"> Fires when the search text is changed. + + Fires when the search text is cleared. + diff --git a/src/modules/search/search.component.spec.ts b/src/modules/search/search.component.spec.ts index f4375f0d8..aa112e633 100644 --- a/src/modules/search/search.component.spec.ts +++ b/src/modules/search/search.component.spec.ts @@ -276,6 +276,16 @@ describe('Search component', () => { expect(component.lastSearchTextChanged).toBe(''); }); + it('should emit the cleared event when clear button is clicked', () => { + spyOn(component.searchComponent.searchClear, 'emit').and.callThrough(); + setInput('applied text'); + triggerApplyButton(); + triggerClearButton(); + + expect(element.query(By.css('.sky-input-group-clear')).nativeElement).not.toBeVisible(); + expect(component.searchComponent.searchClear.emit).toHaveBeenCalled(); + }); + it('should apply the correct focus class', () => { triggerFocus(); let containerEl = element.query(By.css('.sky-search-input-container.sky-search-input-focused')); diff --git a/src/modules/search/search.component.ts b/src/modules/search/search.component.ts index f46af5ab5..31a0aba94 100644 --- a/src/modules/search/search.component.ts +++ b/src/modules/search/search.component.ts @@ -73,6 +73,9 @@ export class SkySearchComponent implements OnDestroy, OnInit, OnChanges { @Output() public searchChange = new EventEmitter(); + @Output() + public searchClear = new EventEmitter(); + @Input() public searchText: string; @@ -165,6 +168,8 @@ export class SkySearchComponent implements OnDestroy, OnInit, OnChanges { this.searchChange.emit(this.searchText); this.searchApply.emit(this.searchText); + + this.searchClear.emit(); } public enterPress(event: KeyboardEvent, searchText: string) {