fix(filters): SearchTerms shouldn't come back after calling clearFilters

examples/webpack-demo-vanilla-bundle/src/examples/example07.html

@@ -49,7 +49,10 @@ <h3 class="title is-3">
     <span class="icon mdi mdi-minus"></span>
     <span>Delete item</span>
   </button>
-
+  <button class="button is-small" data-test="delete-clear-filters-btn" onclick.delegate="clearFilters()">
+    <span class="icon mdi mdi-close"></span>
+    <span>Clear Filters</span>
+  </button>
 </div>
 
 <br />

examples/webpack-demo-vanilla-bundle/src/examples/example07.ts

@@ -170,6 +170,7 @@ export class Example7 {
       autoEdit: true,
       autoCommitEdit: true,
       editable: true,
+      showCustomFooter: true,
       enableExcelExport: true,
       excelExportOptions: {
         exportWithFormatter: true,
@@ -200,6 +201,7 @@ export class Example7 {
         // usabilityOverride: (row, dataContext, grid) => dataContext.id % 2 === 1
       },
       presets: {
+        filters: [{ columnId: 'prerequisites', searchTerms: [1, 3, 5, 7, 9, 12, 15, 18, 21, 25, 28] }],
         // you can presets row selection here as well, you can choose 1 of the following 2 ways of setting the selection
         // by their index position in the grid (UI) or by the object IDs, the default is "dataContextIds" and if provided it will use it and disregard "gridRowIndexes"
         // the RECOMMENDED is to use "dataContextIds" since that will always work even with Pagination, while "gridRowIndexes" is only good for 1 page
@@ -242,6 +244,10 @@ export class Example7 {
     }, 50);
   }
 
+  clearFilters() {
+    this.sgb.filterService.clearFilters();
+  }
+
   /** Delete last inserted row */
   deleteItem() {
     const requisiteColumnDef = this.columnDefinitions.find((column: Column) => column.id === 'prerequisites');
@@ -270,7 +276,7 @@ export class Example7 {
         start: new Date(2009, 0, 1),
         finish: new Date(2009, 0, 5),
         effortDriven: (i % 5 === 0),
-        prerequisites: (i % 2 === 0) && i !== 0 && i < 12 ? [i, i - 1] : [],
+        prerequisites: (i % 2 === 0) && i !== 0 && i < 50 ? [i, i - 1] : [],
       });
     }
     return tempDataset;

packages/common/src/services/__tests__/filter.service.spec.ts

@@ -481,6 +481,15 @@ describe('FilterService', () => {
     });
 
     describe('clearFilters method', () => {
+      beforeEach(() => {
+        const mockColumns = [
+          { id: 'field1', field: 'field1', width: 100, filter: { searchTerms: ['John'] } },
+          { id: 'field2', field: 'field2', width: 100 }
+        ];
+        jest.spyOn(gridStub, 'getColumns').mockReturnValue(mockColumns);
+        jest.spyOn(SharedService.prototype, 'columnDefinitions', 'get').mockReturnValue(mockColumns);
+      });
+
       it('should clear all the Filters when the query response is a string', () => {
         gridOptionMock.backendServiceApi!.service.processOnFilterChanged = () => 'filter query string';
         const spyClear = jest.spyOn(service.getFiltersMetadata()[0], 'clear');
@@ -497,6 +506,7 @@ describe('FilterService', () => {
         expect(service.getColumnFilters()).toEqual({});
         expect(spyFilterChange).not.toHaveBeenCalled();
         expect(spyEmitter).not.toHaveBeenCalled();
+        expect(sharedService.columnDefinitions[0].filter.searchTerms).toBeUndefined();
       });
 
       it('should execute the "onError" method when the Promise throws an error', (done) => {

packages/common/src/services/filter.service.ts

@@ -255,6 +255,15 @@ export class FilterService {
     // also reset the columnFilters object and remove any filters from the object
     this.resetColumnFilters();
 
+    // also remove any search terms directly on each column definitions
+    if (Array.isArray(this._columnDefinitions)) {
+      this._columnDefinitions.forEach((columnDef: Column) => {
+        if (columnDef.filter?.searchTerms) {
+          delete columnDef.filter.searchTerms;
+        }
+      });
+    }
+
     // we also need to refresh the dataView and optionally the grid (it's optional since we use DataView)
     if (this._dataView && this._grid) {
       this._dataView.refresh();

test/cypress/integration/example07.spec.js

@@ -16,6 +16,32 @@ describe('Example 07 - Row Move & Checkbox Selector Selector Plugins', () => {
       .each(($child, index) => expect($child.text()).to.eq(fullTitles[index]));
   });
 
+  it('should have 11 prerequisites filters and 11 rows in grid/footer', () => {
+    cy.get('.ms-filter.search-filter.filter-prerequisites.filled')
+      .find('.ms-choice')
+      .contains('11 of 500 selected');
+
+    cy.get('.right-footer.metrics')
+      .find('.item-count')
+      .contains('11');
+
+    cy.get('.right-footer.metrics')
+      .contains('11 of 500 items');
+  });
+
+  it('should clear all filters', () => {
+    cy.get('[data-test="delete-clear-filters-btn"]').click();
+  });
+
+  it('should have all rows shown in the grid', () => {
+    cy.get('.right-footer.metrics')
+      .find('.item-count')
+      .contains('500');
+
+    cy.get('.right-footer.metrics')
+      .contains('500 of 500 items');
+  });
+
   it('should have 4 rows pre-selected by the grid presets', () => {
     cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(2)`).should('contain', 'Task 0');
     cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(2)`).should('contain', 'Task 1');

test/cypress/integration/example10.spec.js

@@ -485,14 +485,6 @@ describe('Example 10 - GraphQL Grid', () => {
         .each(($child, index) => expect($child.text()).to.eq(expectedGroupTitles[index]));
     });
 
-    it('should have French Text inside some of the Filters', () => {
-      cy.get('.search-filter.filter-gender .ms-choice > span')
-        .contains('Masculin');
-
-      cy.get('.flatpickr-input')
-        .should('contain.value', 'au'); // date range will contains (y to z) or in French (y au z)
-    });
-
     it('should display Pagination in French', () => {
       cy.get('.text-item-per-page')
         .contains('éléments par page');
@@ -574,5 +566,65 @@ describe('Example 10 - GraphQL Grid', () => {
       cy.get('.slick-gridmenu [data-dismiss=slick-gridmenu] > span.close')
         .click({ force: true });
     });
+
+    it('should click on Set Dynamic Filter and expect query and filters to be changed', () => {
+      cy.get('[data-test=set-dynamic-filter]')
+        .click();
+
+      cy.get('.search-filter.filter-name select')
+        .should('have.value', 'a*')
+
+      cy.get('.search-filter.filter-name')
+        .find('input')
+        .invoke('val')
+        .then(text => expect(text).to.eq('Jane'));
+
+      cy.get('.search-filter.filter-gender .ms-choice > span')
+        .contains('Féminin');
+
+      cy.get('.search-filter.filter-company .ms-choice > span')
+        .contains('Acme');
+
+      cy.get('.search-filter.filter-billingAddressZip select')
+        .should('have.value', '>=')
+
+      cy.get('.search-filter.filter-billingAddressZip')
+        .find('input')
+        .invoke('val')
+        .then(text => expect(text).to.eq('11'));
+
+      cy.get('.search-filter.filter-finish')
+        .find('input')
+        .invoke('val')
+        .then(text => expect(text).to.eq(`${presetLowestDay} au ${presetHighestDay}`));
+
+      // wait for the query to finish
+      cy.get('[data-test=status]').should('contain', 'finished!!');
+
+      cy.get('[data-test=graphql-query-result]')
+        .should(($span) => {
+          const text = removeSpaces($span.text()); // remove all white spaces
+          expect(text).to.eq(removeSpaces(`query{users(first:30,offset:0,
+            filterBy:[{field:"gender",operator:EQ,value:"female"},{field:"name",operator:StartsWith,value:"Jane"},
+            {field:"company",operator:IN,value:"acme"},{field:"billing.address.zip",operator:GE,value:"11"},
+            {field:"finish",operator:GE,value:"${presetLowestDay}"},{field:"finish",operator:LE,value:"${presetHighestDay}"}],locale:"fr",userId:123)
+            {totalCount,nodes{id,name,gender,company,billing{address{zip,street}},finish}}}`));
+        });
+    });
+
+    it('should have French Text inside some of the Filters', () => {
+      cy.get('div.ms-filter.filter-gender')
+        .trigger('click');
+
+      cy.get('.ms-drop')
+        .contains('Masculin') // use regexp to avoid finding first Task 3 which is in fact Task 399
+        .click();
+
+      cy.get('.search-filter.filter-gender .ms-choice > span')
+        .contains('Masculin');
+
+      cy.get('.flatpickr-input')
+        .should('contain.value', 'au'); // date range will contains (y to z) or in French (y au z)
+    });
   });
 });