diff --git a/packages/devextreme/js/__internal/grids/grid_core/filter/m_filter_sync.ts b/packages/devextreme/js/__internal/grids/grid_core/filter/m_filter_sync.ts index 48df0b766237..7389ab42f2d0 100644 --- a/packages/devextreme/js/__internal/grids/grid_core/filter/m_filter_sync.ts +++ b/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 = { diff --git a/packages/devextreme/testing/testcafe/tests/dataGrid/filterRow/filterRow.ts b/packages/devextreme/testing/testcafe/tests/dataGrid/filterRow/filterRow.ts index aef83c6bba40..db1ab362da68 100644 --- a/packages/devextreme/testing/testcafe/tests/dataGrid/filterRow/filterRow.ts +++ b/packages/devextreme/testing/testcafe/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); diff --git a/packages/devextreme/testing/testcafe/tests/dataGrid/headerFilter/headerFilter.ts b/packages/devextreme/testing/testcafe/tests/dataGrid/headerFilter/headerFilter.ts index 7c4a7db5fc2e..fee9f4f10565 100644 --- a/packages/devextreme/testing/testcafe/tests/dataGrid/headerFilter/headerFilter.ts +++ b/packages/devextreme/testing/testcafe/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);