diff --git a/lib/content-services/content-node-selector/content-node-selector-panel.component.html b/lib/content-services/content-node-selector/content-node-selector-panel.component.html index a632e7dd46..777d0f34d4 100644 --- a/lib/content-services/content-node-selector/content-node-selector-panel.component.html +++ b/lib/content-services/content-node-selector/content-node-selector-panel.component.html @@ -38,7 +38,7 @@ { + const debounceSearch = 200; let component: ContentNodeSelectorPanelComponent; let fixture: ComponentFixture; let searchService: SearchService; @@ -483,6 +484,44 @@ describe('ContentNodeSelectorComponent', () => { expect(component.showingSearchResults).toBeFalsy(); }); + it('should clear the search field, nodes and chosenNode when deleting the search input', fakeAsync(() => { + spyOn(component, 'clear').and.callThrough(); + typeToSearchBox('a'); + + tick(debounceSearch); + fixture.detectChanges(); + + expect(searchSpy.calls.count()).toBe(1); + + typeToSearchBox(''); + + tick(debounceSearch); + fixture.detectChanges(); + + expect(searchSpy.calls.count()).toBe(1, 'no other search has been performed'); + expect(component.clear).toHaveBeenCalled(); + expect(component.folderIdToShow).toBe('cat-girl-nuku-nuku', 'back to the folder in which the search was performed'); + })); + + it('should clear the search field, nodes and chosenNode on folder navigation in the results list', fakeAsync(() => { + spyOn(component, 'clearSearch').and.callThrough(); + typeToSearchBox('a'); + + tick(debounceSearch); + fixture.detectChanges(); + + respondWithSearchResults(ONE_FOLDER_RESULT); + + tick(); + fixture.detectChanges(); + + component.onFolderChange(); + fixture.detectChanges(); + + expect(component.clearSearch).toHaveBeenCalled(); + + })); + it('should show nodes from the same folder as selected in the dropdown on clearing the search input', (done) => { typeToSearchBox('piccolo'); diff --git a/lib/content-services/content-node-selector/content-node-selector-panel.component.ts b/lib/content-services/content-node-selector/content-node-selector-panel.component.ts index 0d9fc2da2b..e7e4905915 100644 --- a/lib/content-services/content-node-selector/content-node-selector-panel.component.ts +++ b/lib/content-services/content-node-selector/content-node-selector-panel.component.ts @@ -205,15 +205,22 @@ export class ContentNodeSelectorPanelComponent implements OnInit { } /** - * Clear the search input + * Clear the search input and reset to last folder node in which search was performed */ clear(): void { + this.clearSearch(); + this.folderIdToShow = this.siteId || this.currentFolderId; + } + + /** + * Clear the search input and search related data + */ + clearSearch() { this.searchTerm = ''; this.nodes = null; this.skipCount = 0; this.chosenNode = null; this.showingSearchResults = false; - this.folderIdToShow = this.siteId || this.currentFolderId; } /** @@ -221,7 +228,7 @@ export class ContentNodeSelectorPanelComponent implements OnInit { */ private updateResults(): void { if (this.searchTerm.length === 0) { - this.folderIdToShow = this.siteId || this.currentFolderId; + this.clear(); } else { this.startNewSearch(); } @@ -306,9 +313,8 @@ export class ContentNodeSelectorPanelComponent implements OnInit { * Sets showingSearchResults state to be able to differentiate between search results or folder results */ onFolderChange(): void { - this.skipCount = 0; this.infiniteScroll = false; - this.showingSearchResults = false; + this.clearSearch(); } /**