DataGrid - Selected (Blanks) in the header filter should be applied i…

…f the Filter Row and Filter Panel is visible (T1257261) (DevExpress#28415)

(cherry picked from commit 9a6e8bb)

e2e/testcafe-devextreme/tests/dataGrid/filterRow/filterRow.ts

@@ -9,6 +9,49 @@ import { getNumberData } from '../helpers/generateDataSourceData';
 fixture.disablePageReloads`FilterRow`
   .page(url(__dirname, '../../container.html'));
 
+test('Filter should reset if the filter row editor text is cleared (T1257261)', async (t) => {
+  const dataGrid = new DataGrid('#container');
+  const filterEditor = dataGrid.getFilterEditor(1, FilterTextBox);
+  const filterPanelText = dataGrid.getFilterPanel().getFilterText();
+
+  await t
+    // assert
+    .expect(filterPanelText.element.textContent)
+    .eql('[Text] Equals \'i\'')
+    // act
+    .click(filterEditor.input)
+    .pressKey('backspace')
+    .wait(100) // updateValueTimeout
+    // assert
+    .expect(filterPanelText.element.textContent)
+    .eql('Create Filter')
+    // act
+    .click(dataGrid.element)
+    // assert
+    .expect(filterPanelText.element.textContent)
+    .eql('Create Filter');
+}).before(async () => createWidget('dxDataGrid', {
+  dataSource: [
+    { ID: 1, Text: 'Item 1' },
+    { ID: 2, Text: '' },
+    { ID: 3, Text: 'Item 3' },
+  ],
+  keyExpr: 'ID',
+  showBorders: true,
+  remoteOperations: true,
+  headerFilter: { visible: true },
+  filterRow: { visible: true },
+  filterPanel: { visible: true },
+  filterValue: ['Text', '=', 'i'],
+  columns: ['ID', {
+    dataField: 'Text',
+    selectedFilterOperation: '=',
+  }],
+  onEditorPreparing(e: any) {
+    e.updateValueTimeout = 100;
+  },
+}));
+
 test('Filter row\'s height should be adjusted by content (T1072609)', async (t) => {
   const dataGrid = new DataGrid('#container');
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);

e2e/testcafe-devextreme/tests/dataGrid/headerFilter/headerFilter.ts

@@ -10,6 +10,47 @@ fixture.disablePageReloads`Header Filter`
 
 const GRID_CONTAINER = '#container';
 
+test('Data should be filtered if (Blank) is selected in the header filter (T1257261)', async (t) => {
+  const result: string[] = [];
+  const dataGrid = new DataGrid(GRID_CONTAINER);
+  const headerCell = dataGrid.getHeaders().getHeaderRow(0).getHeaderCell(1);
+  const dataCell = dataGrid.getDataRow(0).getDataCell(0);
+  const filterIconElement = headerCell.getFilterIcon();
+  const headerFilter = new HeaderFilter();
+  const buttons = headerFilter.getButtons();
+  const list = headerFilter.getList();
+
+  await t
+    .click(filterIconElement)
+    .click(list.getItem(1).element) // Select second item with value 'Item 1'
+    .click(buttons.nth(0)); // Click OK
+
+  result[0] = await dataCell.element().innerText;
+
+  await t
+    .click(filterIconElement)
+    .click(list.getItem(1).element) // Deselect second item with value 'Item 1'
+    .click(list.getItem(0).element) // Select second item with value '(Blanks)'
+    .click(buttons.nth(0)); // Click OK
+
+  result[1] = await dataCell.element().innerText;
+
+  await t.expect(result[0]).eql('1')
+    .expect(result[1]).eql('2');
+}).before(async () => createWidget('dxDataGrid', {
+  dataSource: [
+    { ID: 1, Text: 'Item 1' },
+    { ID: 2, Text: '' },
+    { ID: 3, Text: 'Item 3' },
+  ],
+  keyExpr: 'ID',
+  showBorders: true,
+  remoteOperations: true,
+  headerFilter: { visible: true },
+  filterRow: { visible: true },
+  filterPanel: { visible: true },
+}));
+
 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);

packages/devextreme/js/__internal/grids/grid_core/filter/m_filter_sync.ts

@@ -122,9 +122,13 @@ const updateFilterRowCondition = function (columnsController, column, condition)
   const filterValue = condition?.[2];
   const filterOperations = column.filterOperations || column.defaultFilterOperations;
 
-  if ((!filterOperations || filterOperations.indexOf(selectedFilterOperation) >= 0 || selectedFilterOperation === column.defaultFilterOperation)
-          && FILTER_ROW_OPERATIONS.includes(selectedFilterOperation) && filterValue !== null) {
-    if (selectedFilterOperation === column.defaultFilterOperation && !isDefined(column.selectedFilterOperation)) {
+  const selectedOperationExists = !filterOperations || filterOperations.indexOf(selectedFilterOperation) >= 0;
+  const defaultOperationSelected = selectedFilterOperation === column.defaultFilterOperation;
+  const builtInOperationSelected = FILTER_ROW_OPERATIONS.includes(selectedFilterOperation);
+  const filterValueNotNullOrEmpty = filterValue !== null && filterValue !== '';
+
+  if ((selectedOperationExists || defaultOperationSelected) && builtInOperationSelected && filterValueNotNullOrEmpty) {
+    if (defaultOperationSelected && !isDefined(column.selectedFilterOperation)) {
       selectedFilterOperation = column.selectedFilterOperation;
     }
     filterRowOptions = {