DataGrid - Fix the "No data" text not being shown when a lookup column is filtered (T1293839)

e2e/testcafe-devextreme/tests/accessibility/dataGrid/common.ts

@@ -1,5 +1,4 @@
 import DataGrid from 'devextreme-testcafe-models/dataGrid';
-import FilterTextBox from 'devextreme-testcafe-models/dataGrid/editors/filterTextBox';
 import HeaderFilter from 'devextreme-testcafe-models/dataGrid/headers/headerFilter';
 import { a11yCheck } from '../../../helpers/accessibility/utils';
 import url from '../../../helpers/getPageUrl';
@@ -183,16 +182,16 @@ test('Grouping and Summary', async (t) => {
 
 test('Filter row - filter menu', async (t) => {
   const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
-  const filterEditor = dataGrid.getFilterEditor(0, FilterTextBox);
+  const filterCell = dataGrid.getFilterCell(0);
 
   await t
     .expect(dataGrid.isReady())
     .ok();
 
-  await t.click(filterEditor.menuButton);
+  await t.click(filterCell.menuButton);
 
   await t
-    .expect(filterEditor.menu.isOpened)
+    .expect(filterCell.menu.isOpened)
     .ok();
 
   await a11yCheck(t, {

e2e/testcafe-devextreme/tests/accessibility/dataGrid/status.ts

@@ -1,6 +1,6 @@
 import DataGrid from 'devextreme-testcafe-models/dataGrid';
 import HeaderFilter from 'devextreme-testcafe-models/dataGrid/headers/headerFilter';
-import FilterTextBox from 'devextreme-testcafe-models/dataGrid/editors/filterTextBox';
+import TextBox from 'devextreme-testcafe-models/textBox';
 import { a11yCheck } from '../../../helpers/accessibility/utils';
 import url from '../../../helpers/getPageUrl';
 import { createWidget } from '../../../helpers/createWidget';
@@ -73,7 +73,7 @@ test('Accessibility: DataGrid general status should contains correct text after
 test('Accessibility: DataGrid general status should contains correct text after filter row interaction', async (t) => {
   const expectedStatusText = 'Data grid with 1 rows and 2 columns';
   const dataGrid = new DataGrid('#container');
-  const filterEditor = dataGrid.getFilterEditor(0, FilterTextBox);
+  const filterEditor = dataGrid.getFilterEditor(0, TextBox);
 
   const applyFilterBtn = dataGrid.getHeaderPanel().getApplyFilterButton();
   await t.typeText(filterEditor.input(), 'A')

e2e/testcafe-devextreme/tests/accessibility/treeList/status.ts

@@ -1,5 +1,5 @@
 import HeaderFilter from 'devextreme-testcafe-models/dataGrid/headers/headerFilter';
-import FilterTextBox from 'devextreme-testcafe-models/dataGrid/editors/filterTextBox';
+import TextBox from 'devextreme-testcafe-models/textBox';
 import TreeList from 'devextreme-testcafe-models/treeList';
 import { a11yCheck } from '../../../helpers/accessibility/utils';
 import url from '../../../helpers/getPageUrl';
@@ -96,7 +96,7 @@ test('Accessibility: TreeList general status should contains correct text after
 test('Accessibility: TreeList general status should contains correct text after filter row interaction', async (t) => {
   const expectedStatusText = 'Tree list with 2 rows and 2 columns';
   const treeList = new TreeList('#container');
-  const filterEditor = treeList.getFilterEditor(0, FilterTextBox);
+  const filterEditor = treeList.getFilterEditor(0, TextBox);
 
   const applyFilterBtn = treeList.getHeaderPanel().getApplyFilterButton();
   await t.typeText(filterEditor.input(), 'B')

e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/common.ts

@@ -1,6 +1,5 @@
 import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
 import DataGrid from 'devextreme-testcafe-models/dataGrid';
-import FilterTextBox from 'devextreme-testcafe-models/dataGrid/editors/filterTextBox';
 import HeaderFilter from 'devextreme-testcafe-models/dataGrid/headers/headerFilter';
 import url from '../../../../helpers/getPageUrl';
 import { createWidget } from '../../../../helpers/createWidget';
@@ -182,16 +181,16 @@ test('Grouping and Summary', async (t) => {
 
 test('Filter row - filter menu', async (t) => {
   const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
-  const filterEditor = dataGrid.getFilterEditor(0, FilterTextBox);
+  const filterCell = dataGrid.getFilterCell(0);
 
   await t
     .expect(dataGrid.isReady())
     .ok();
 
-  await t.click(filterEditor.menuButton);
+  await t.click(filterCell.menuButton);
 
   await t
-    .expect(filterEditor.menu.isOpened)
+    .expect(filterCell.menu.isOpened)
     .ok();
 
   await screenshotCheck(t, 'filter-row-menu');

e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/contrast.ts

@@ -1,6 +1,5 @@
 import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
 import DataGrid from 'devextreme-testcafe-models/dataGrid';
-import FilterTextBox from 'devextreme-testcafe-models/dataGrid/editors/filterTextBox';
 import url from '../../../../helpers/getPageUrl';
 import { createWidget } from '../../../../helpers/createWidget';
 import { getData } from '../../helpers/generateDataSourceData';
@@ -15,9 +14,9 @@ fixture.disablePageReloads`DataGrid - contrast`
 // visual: material.blue.light
 test('DataGrid - Contrast between icons in the Filter Row menu and their background doesn\'t comply with WCAG accessibility standards', async (t) => {
   const dataGrid = new DataGrid('#container');
-  const filterEditor = dataGrid.getFilterEditor(0, FilterTextBox);
-  const searchButton = filterEditor.menuButton;
-  const filterMenu = filterEditor.menu;
+  const filterCell = dataGrid.getFilterCell(0);
+  const searchButton = filterCell.menuButton;
+  const filterMenu = filterCell.menu;
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
   await t
@@ -63,7 +62,7 @@ test('DataGrid - Filter icon should remain visible when it\'s focused', async (t
     .element;
 
   await t
-    .click(dataGrid.getFilterCell(0))
+    .click(dataGrid.getFilterCell(0).element)
     .pressKey('tab')
     .expect(searchIconContainer.focused)
     .ok();

e2e/testcafe-devextreme/tests/dataGrid/common/filterPanel/functional.ts

@@ -1,7 +1,6 @@
 import DataGrid from 'devextreme-testcafe-models/dataGrid';
 import Popup from 'devextreme-testcafe-models/popup';
 import FilterBuilder from 'devextreme-testcafe-models/filterBuilder';
-import FilterTextBox from 'devextreme-testcafe-models/dataGrid/editors/filterTextBox';
 
 import url from '../../../../helpers/getPageUrl';
 import { createWidget } from '../../../../helpers/createWidget';
@@ -52,7 +51,7 @@ test('Proper handle custom filter operations for dates with non-date values', as
     .expect(filterPanel.getFilterText().element.innerText)
     .eql('[Order Date] Weekends');
 
-  const dateFilterCell = dataGrid.getFilterEditor(1, FilterTextBox);
+  const dateFilterCell = dataGrid.getFilterCell(1);
 
   await t
     .click(dateFilterCell.menuButton)

e2e/testcafe-devextreme/tests/dataGrid/common/filterRow/T1163100_changeFIlterIcon.visual_matrix.ts

@@ -1,6 +1,5 @@
 import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
 import DataGrid from 'devextreme-testcafe-models/dataGrid';
-import FilterTextBox from 'devextreme-testcafe-models/dataGrid/editors/filterTextBox';
 import { createWidget } from '../../../../helpers/createWidget';
 import url from '../../../../helpers/getPageUrl';
 import { testScreenshot } from '../../../../helpers/themeUtils';
@@ -36,10 +35,10 @@ const generateTestData = (rowCount: number) => new Array(rowCount)
         const dataGrid = new DataGrid(GRID_SELECTOR);
 
         for (let columnIdx = 0; columnIdx < 4; columnIdx += 1) {
-          const filterMenu = dataGrid.getFilterEditor(columnIdx, FilterTextBox);
+          const filterCell = dataGrid.getFilterCell(columnIdx);
           await t
-            .click(filterMenu.menuButton())
-            .click(filterMenu.menu.getItemByText('Starts with'));
+            .click(filterCell.menuButton)
+            .click(filterCell.menu.getItemByText('Starts with'));
         }
 
         await testScreenshot(

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

@@ -1,5 +1,5 @@
 import DataGrid from 'devextreme-testcafe-models/dataGrid';
-import FilterTextBox from 'devextreme-testcafe-models/dataGrid/editors/filterTextBox';
+import TextBox from 'devextreme-testcafe-models/textBox';
 import url from '../../../../helpers/getPageUrl';
 import { createWidget } from '../../../../helpers/createWidget';
 import { getData } from '../../helpers/generateDataSourceData';
@@ -9,7 +9,7 @@ fixture`FilterRow`
 
 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 filterEditor = dataGrid.getFilterEditor(1, TextBox);
   const filterPanelText = dataGrid.getFilterPanel().getFilterText();
 
   await t
@@ -53,7 +53,7 @@ test('Filter should reset if the filter row editor text is cleared (T1257261)',
 // T1267481
 test('Filter Row\'s Reset button does not work after a custom filter is set in Filter Builder', async (t) => {
   const dataGrid = new DataGrid('#container');
-  const filterEditor = dataGrid.getFilterEditor(0, FilterTextBox);
+  const filterCell = dataGrid.getFilterCell(0);
 
   await dataGrid.isReady();
 
@@ -62,8 +62,8 @@ test('Filter Row\'s Reset button does not work after a custom filter is set in F
     .eql(0);
 
   await t
-    .click(filterEditor.menuButton)
-    .click(filterEditor.menu.getItemByText('Reset'));
+    .click(filterCell.menuButton)
+    .click(filterCell.menu.getItemByText('Reset'));
 
   await t
     .expect(dataGrid.dataRows.count)
@@ -104,11 +104,11 @@ test('Filter Row\'s Reset button does not work after a custom filter is set in F
 // T1290381
 test('DataGrid - filter row\'s search-box\'s aria-label should be customizable via localization', async (t) => {
   const dataGrid = new DataGrid('#container');
-  const filterEditor = dataGrid.getFilterEditor(0, FilterTextBox);
+  const filterCell = dataGrid.getFilterCell(0);
 
   await dataGrid.isReady();
 
-  const ariaLabel = await filterEditor.menuButton.getAttribute('aria-label');
+  const ariaLabel = await filterCell.menuButton.getAttribute('aria-label');
 
   await t
     .expect(ariaLabel)
@@ -135,27 +135,27 @@ test('DataGrid - filter row\'s search-box\'s aria-label should be customizable v
 
 test('DataGrid - NVDA reads filter menu items as "Search box 1 of 8" (T1290386)', async (t) => {
   const dataGrid = new DataGrid('#container');
-  const filterEditor = dataGrid.getFilterEditor(0, FilterTextBox);
+  const filterCell = dataGrid.getFilterCell(0);
 
   await dataGrid.isReady();
 
   await t
-    .expect(filterEditor.menuButton.getAttribute('aria-label'))
+    .expect(filterCell.menuButton.getAttribute('aria-label'))
     .eql('Search box');
 
   await t
-    .click(filterEditor.menuButton);
+    .click(filterCell.menuButton);
 
-  const itemCount = await filterEditor.menu.getItemCount();
+  const itemCount = await filterCell.menu.getItemCount();
 
   for (let i = 0; i < itemCount; i += 1) {
-    const item = filterEditor.menu.getItemByIndex(i);
+    const item = filterCell.menu.getItemByIndex(i);
     await t.expect(item.getAttribute('aria-label')).eql(null);
   }
 
   await t
-    .click(filterEditor.menu.getItemByText('Equals'))
-    .expect(filterEditor.menuButton.getAttribute('aria-label'))
+    .click(filterCell.menu.getItemByText('Equals'))
+    .expect(filterCell.menuButton.getAttribute('aria-label'))
     .eql('Equals');
 }).before(async () => createWidget('dxDataGrid', {
   dataSource: getData(5, 1),
@@ -173,7 +173,7 @@ test('DataGrid - NVDA reads filter menu items as "Search box 1 of 8" (T1290386)'
     const expectedFocusedElement = grouped ? dataGrid.getGroupRow(0) : dataGrid.getDataCell(0, 0);
 
     await t
-      .click(filterCell)
+      .click(filterCell.element)
       .expect(dataGrid.getFilterRangeOverlay().exists)
       .ok('Filter range overlay is shown')
       .pressKey('tab')
@@ -209,7 +209,7 @@ test('DataGrid - filter range overlay in last column on Tab pressed moves focus
   const filterCell = dataGrid.getFilterCell(2);
 
   await t
-    .click(filterCell)
+    .click(filterCell.element)
     .expect(dataGrid.getFilterRangeOverlay().exists)
     .ok('Filter range overlay is shown')
     .pressKey('tab')

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

@@ -1,6 +1,6 @@
 import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
 import DataGrid from 'devextreme-testcafe-models/dataGrid';
-import FilterTextBox from 'devextreme-testcafe-models/dataGrid/editors/filterTextBox';
+import TextBox from 'devextreme-testcafe-models/textBox';
 import url from '../../../../helpers/getPageUrl';
 import { createWidget } from '../../../../helpers/createWidget';
 import { getNumberData } from '../../helpers/generateDataSourceData';
@@ -35,12 +35,12 @@ test.meta({
 test('FilterRow range overlay screenshot', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
   const dataGrid = new DataGrid('#container');
-  const filterEditor = dataGrid.getFilterEditor(1, FilterTextBox);
+  const filterCell = dataGrid.getFilterCell(1);
 
   await t
-    .click(filterEditor.menuButton);
+    .click(filterCell.menuButton);
   await t
-    .click(filterEditor.menu.getItemByText('Between'));
+    .click(filterCell.menu.getItemByText('Between'));
   // act
   await testScreenshot(t, takeScreenshot, 'filter-row-overlay.png');
   await t
@@ -68,7 +68,7 @@ test('FilterRow range overlay screenshot', async (t) => {
 test('Focus overlay should be visible in filter row when focusedRowEnabled is enabled', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
   const dataGrid = new DataGrid('#container');
-  const filterEditor = dataGrid.getFilterEditor(1, FilterTextBox);
+  const filterEditor = dataGrid.getFilterEditor(1, TextBox);
 
   await t
     .click(dataGrid.getDataCell(0, 0).element)
@@ -96,13 +96,13 @@ test('Focus overlay should be visible in filter row when focusedRowEnabled is en
 test('DataGrid - The `between` filter dropdown sticks to the viewport edge during horizontal scrolling (T1280071)', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
   const dataGrid = new DataGrid('#container');
-  const filterEditor = dataGrid.getFilterEditor(0, FilterTextBox);
+  const filterCell = dataGrid.getFilterCell(0);
 
   await dataGrid.isReady();
 
   await t
-    .click(filterEditor.menuButton)
-    .click(filterEditor.menu.getItemByText('Between'));
+    .click(filterCell.menuButton)
+    .click(filterCell.menu.getItemByText('Between'));
 
   await dataGrid.scrollBy(t, { x: 999 });
   await testScreenshot(t, takeScreenshot, 'filter-row-filter-range-hide-on-scroll.png');

e2e/testcafe-devextreme/tests/dataGrid/common/focus/focus.ts

@@ -1,6 +1,6 @@
 import DataGrid from 'devextreme-testcafe-models/dataGrid';
 import { ClientFunction } from 'testcafe';
-import FilterTextBox from 'devextreme-testcafe-models/dataGrid/editors/filterTextBox';
+import TextBox from 'devextreme-testcafe-models/textBox';
 import { createWidget } from '../../../../helpers/createWidget';
 import url from '../../../../helpers/getPageUrl';
 
@@ -152,7 +152,7 @@ test('Should remove dx-focused class on blur event from the cell', async (t) =>
 
 test('DataGrid - FilterRow cell loses focus when focusedRowEnabled is true and editing is in batch mode (T1246926)', async (t) => {
   const dataGrid = new DataGrid('#container');
-  const filterEditor = dataGrid.getFilterEditor(0, FilterTextBox).getInput();
+  const filterEditor = dataGrid.getFilterEditor(0, TextBox).getInput();
 
   await t
     .click(dataGrid.getDataCell(0, 0).element)

e2e/testcafe-devextreme/tests/dataGrid/common/markup/noDataText.ts

@@ -1,5 +1,6 @@
 import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
 import DataGrid from 'devextreme-testcafe-models/dataGrid';
+import SelectBox from 'devextreme-testcafe-models/selectBox';
 import url from '../../../../helpers/getPageUrl';
 import { createWidget } from '../../../../helpers/createWidget';
 import { testScreenshot } from '../../../../helpers/themeUtils';
@@ -9,6 +10,65 @@ fixture.disablePageReloads`No Data`
 
 const GRID_CONTAINER = '#container';
 
+test('The noDataText element should be rendered when a lookup column is filtered (T1293839)', async (t) => {
+  // arrange
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+  const dataGrid = new DataGrid(GRID_CONTAINER);
+  const nameFilterInput = dataGrid.getFilterCell(0).getEditorInput().element;
+  const lookupFilterEditor = dataGrid.getFilterEditor(1, SelectBox);
+
+  // assert
+  await t
+    .expect(dataGrid.isReady())
+    .ok();
+
+  // act
+  await t.click(lookupFilterEditor.element);
+
+  // assert
+  await t.expect(await lookupFilterEditor.isOpened()).ok();
+
+  // act
+  const lookupList = await lookupFilterEditor.getList();
+  const lookupItem = lookupList.getItem(1);
+  await t.click(lookupItem.element);
+  await t.typeText(nameFilterInput, 'test');
+
+  // assert
+  await t
+    .expect(dataGrid.isReady())
+    .ok();
+
+  await testScreenshot(t, takeScreenshot, 'T1293839-grid-no-data-text-rendered.png', { element: dataGrid.element });
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => {
+  await createWidget('dxDataGrid', {
+    dataSource: [
+      { ID: 1, Name: 'John', Lookup: 1 },
+      { ID: 2, Name: 'Jane', Lookup: 2 },
+    ],
+    keyExpr: 'ID',
+    columns: ['Name', {
+      dataField: 'Lookup',
+      lookup: {
+        dataSource: [
+          { ID: 1, Text: 'Item 1' },
+          { ID: 2, Text: 'Item 2' },
+        ],
+        valueExpr: 'ID',
+        displayExpr: 'Text',
+      },
+    }],
+    showBorders: true,
+    filterRow: { visible: true },
+    onEditorPreparing(e) {
+      e.updateValueTimeout = 0;
+    },
+  });
+});
+
 test('The noDataText element should be centered (T1178289)', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
   const dataGrid = new DataGrid(GRID_CONTAINER);