DataGrid - Filter icon in the Header Filter is displayed as active af…

…ter the 'clearFilter' call (T1193648) (#25894)
DevExpress · Nov 3, 2023 · 64afad1 · 64afad1
1 parent ecc47c5
commit 64afad1
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 6 deletions.
diff --git a/packages/devextreme/js/__internal/grids/grid_core/header_filter/m_header_filter.ts b/packages/devextreme/js/__internal/grids/grid_core/header_filter/m_header_filter.ts
@@ -417,15 +417,20 @@ const ColumnHeadersViewHeaderFilterExtender = extend({}, headerFilterMixin, {
 
   _columnOptionChanged(e) {
     const { optionNames } = e;
+    const isFilterRowAndHeaderFilterValuesChanged = gridCoreUtils.checkChanges(optionNames, ['filterValues', 'filterValue']);
+    const isHeaderFilterValuesAndTypeChanged = gridCoreUtils.checkChanges(optionNames, ['filterValues', 'filterType']);
 
-    if (gridCoreUtils.checkChanges(optionNames, ['filterValues', 'filterType'])) {
-      if (this._needUpdateFilterIndicators()) {
-        this._updateHeaderFilterIndicators();
-      }
-      return;
+    const shouldUpdateFilterIndicators = (
+      isFilterRowAndHeaderFilterValuesChanged || isHeaderFilterValuesAndTypeChanged
+    ) && this._needUpdateFilterIndicators();
+
+    if (shouldUpdateFilterIndicators) {
+      this._updateHeaderFilterIndicators();
     }
 
-    this.callBase(e);
+    if (!isHeaderFilterValuesAndTypeChanged) {
+      this.callBase(e);
+    }
   },
 });
 

diff --git a/packages/devextreme/testing/testcafe/model/dataGrid/index.ts b/packages/devextreme/testing/testcafe/model/dataGrid/index.ts
@@ -358,6 +358,15 @@ export default class DataGrid extends Widget {
     return this.element.find(`.${this.addWidgetPrefix(CLASS.columnChooserButton)}`);
   }
 
+  apiClearFilter(): Promise<void> {
+    const { getInstance } = this;
+
+    return ClientFunction(
+      () => (getInstance() as any).clearFilter(),
+      { dependencies: { getInstance } },
+    )();
+  }
+
   apiColumnOption(id: string, name: string, value: any = 'empty'): Promise<any> {
     const { getInstance } = this;
 

diff --git a/...estcafe/tests/dataGrid/headerFilter/etalons/header-filter-icon-clear-filter.png b/...estcafe/tests/dataGrid/headerFilter/etalons/header-filter-icon-clear-filter.png
diff --git a/packages/devextreme/testing/testcafe/tests/dataGrid/headerFilter/headerFilter.ts b/packages/devextreme/testing/testcafe/tests/dataGrid/headerFilter/headerFilter.ts
@@ -10,6 +10,39 @@ fixture.disablePageReloads`Header Filter`
 
 const GRID_CONTAINER = '#container';
 
+test('HeaderFilter icon should be grayed out after the clearFilter call (T1193648)', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+  const dataGrid = new DataGrid(GRID_CONTAINER);
+
+  // act
+  await dataGrid.apiClearFilter();
+
+  // assert
+  await t
+    .expect(await takeScreenshot('header-filter-icon-clear-filter.png', dataGrid.element))
+    .ok()
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => createWidget('dxDataGrid', {
+  dataSource: [{
+    ID: 1,
+    Name: 'A',
+  }, {
+    ID: 2,
+    Name: 'B',
+  }],
+  keyExpr: 'ID',
+  showBorders: true,
+  headerFilter: { visible: true },
+  filterRow: { visible: true },
+  columns: [{
+    dataField: 'Name',
+    filterValues: ['A'],
+    filterValue: 'A',
+  }],
+  height: 140,
+}));
+
 test('The header filter should fit inside the viewport if the grid is scrolled horizontally (T1156848)', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
   const dataGrid = new DataGrid(GRID_CONTAINER);