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) {