Search text remains after list view grid column changes (blackbaud#1446)

Blackbaud-JeffDye · Feb 8, 2018 · f404122 · f404122
1 parent 2226f13
commit f404122
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 13 deletions.
diff --git a/...s/list-column-selector-action/fixtures/list-column-selector-action.component.fixture.html b/...s/list-column-selector-action/fixtures/list-column-selector-action.component.fixture.html
@@ -1,5 +1,8 @@
 <sky-list [data]="items" [defaultView]="grid">
-  <sky-list-toolbar>
+  <sky-list-toolbar
+    [searchEnabled]="true"
+    [searchText]="searchText"
+  >
     <sky-list-secondary-actions>
       <sky-list-column-selector-action [gridView]="grid">
       </sky-list-column-selector-action>

diff --git a/...les/list-column-selector-action/fixtures/list-column-selector-action.component.fixture.ts b/...les/list-column-selector-action/fixtures/list-column-selector-action.component.fixture.ts
@@ -2,6 +2,7 @@ import { Component, ViewChild } from '@angular/core';
 import { Observable } from 'rxjs/Observable';
 
 import { SkyListViewGridComponent } from '../../list-view-grid';
+import { SkyListToolbarComponent } from '../../list-toolbar';
 
 @Component({
   selector: 'sky-test-cmp',
@@ -20,4 +21,8 @@ export class ListColumnSelectorActionTestComponent {
 
   @ViewChild(SkyListViewGridComponent)
   public grid: SkyListViewGridComponent;
+  @ViewChild(SkyListToolbarComponent)
+  public toolbar: SkyListToolbarComponent;
+
+  public searchText: string;
 }
diff --git a/src/modules/list-column-selector-action/list-column-selector-action.spec.ts b/src/modules/list-column-selector-action/list-column-selector-action.spec.ts
@@ -84,14 +84,14 @@ describe('List column selector action', () => {
         NoopAnimationsModule
       ]
     })
-    .overrideComponent(SkyListComponent, {
-      set: {
-        providers: [
-          { provide: ListState, useValue: state },
-          { provide: ListStateDispatcher, useValue: dispatcher }
-        ]
-      }
-    });
+      .overrideComponent(SkyListComponent, {
+        set: {
+          providers: [
+            { provide: ListState, useValue: state },
+            { provide: ListStateDispatcher, useValue: dispatcher }
+          ]
+        }
+      });
   }));
 
   beforeEach(() => {
@@ -163,6 +163,37 @@ describe('List column selector action', () => {
     tick();
   }));
 
+  it('should not clear the search text when new columns are set', fakeAsync(() => {
+    component.searchText = 'something';
+    toggleSecondaryActionsDropdown();
+
+    const chooseColumnsButton = getChooseColumnsButton();
+    chooseColumnsButton.click();
+    tick();
+
+    const checkboxLabelEl = document.querySelectorAll(
+      '.sky-modal .sky-list-view-checklist-item input'
+    ) as NodeListOf<HTMLElement>;
+
+    expect(checkboxLabelEl.length).toBe(2);
+
+    checkboxLabelEl.item(0).click();
+    tick();
+
+    const submitButtonEl = document.querySelector('.sky-modal .sky-btn-primary') as HTMLButtonElement;
+
+    submitButtonEl.click();
+    tick();
+
+    component.grid.gridState.take(1).subscribe((gridState) => {
+      expect(gridState.displayedColumns.items.length).toBe(2);
+      expect(component.searchText).toEqual('something');
+    });
+
+    flush();
+    tick();
+  }));
+
   it('should keep previous columns on cancel', fakeAsync(() => {
     toggleSecondaryActionsDropdown();
 

diff --git a/src/modules/list-view-grid/list-view-grid.component.ts b/src/modules/list-view-grid/list-view-grid.component.ts
@@ -233,10 +233,13 @@ export class SkyListViewGridComponent
               )
               .filter(c => c !== undefined);
 
-        this.dispatcher.searchSetOptions(new ListSearchModel({
-          functions: setFunctions,
-          fieldSelectors: displayedColumns.map(d => d.field)
-        }));
+        this.state.take(1).subscribe(s => {
+          this.dispatcher.searchSetOptions(new ListSearchModel({
+            searchText: s.search.searchText,
+            functions: setFunctions,
+            fieldSelectors: displayedColumns.map(d => d.field)
+          }));
+        });
       });
     this.subscriptions.push(sub);
   }