CardView - Header filter search is only triggered once when remoteOperations is true (T1305672) (#33953)

Author: markallenramirez

e2e/testcafe-devextreme/tests/cardView/headerFilter/remote.functional.ts

@@ -532,3 +532,53 @@ const clearRemoteOperations = () => ClientFunction(() => {
     await clearRemoteOperations();
   });
 });
+
+test('remote operations: true -> should load data for each search value in header filter', async (t) => {
+  // arrange
+  const cardView = new CardView(CARD_VIEW_SELECTOR);
+  const filterIcon = cardView
+    .getHeaderPanel()
+    .getHeaderItem()
+    .getFilterIcon();
+
+  // act
+  await t.click(filterIcon);
+
+  // assert
+  const list = cardView.getHeaderFilterList();
+  await t.expect(list.getItems().count).eql(10);
+
+  // act
+  await t.typeText(list.searchInput, 'A_1');
+
+  // assert
+  await t.expect(list.getItems().count).eql(1);
+  await t.expect(list.getItem(0).text).eql('A_1');
+
+  // act
+  await t.typeText(list.searchInput, '1');
+
+  // assert
+  await t.expect(list.getItems().count).eql(0);
+}).before(async (t) => {
+  await t.addRequestHooks(remoteApiMock);
+  await createWidget('dxCardView', () => ({
+    dataSource: {
+      store: (window as any).DevExpress.data.AspNet.createStore({
+        key: 'id',
+        loadUrl: 'https://api/data',
+      }),
+    },
+    columns: ['A'],
+    remoteOperations: true,
+    headerFilter: {
+      visible: true,
+      search: {
+        enabled: true,
+      },
+    },
+    height: 600,
+  }));
+}).after(async (t) => {
+  await t.removeRequestHooks(remoteApiMock);
+});

e2e/testcafe-devextreme/tests/cardView/headerPanel/etalons/sortable-indicator-first-rtl-false (fluent.blue.light)_mask.png

@@ -14,6 +14,22 @@ export const remoteDataGroupedByA = new Array(10)
   }));
 
 export const remoteApiMock = RequestMock()
+  .onRequestTo(/\/api\/data\?.*group=.*filter=.*A_11/)
+  .respond(
+    {
+      data: remoteDataGroupedByA.filter((item) => item.key.includes('A_11')),
+    },
+    200,
+    { 'access-control-allow-origin': '*' },
+  )
+  .onRequestTo(/\/api\/data\?.*group=.*filter=.*A_1/)
+  .respond(
+    {
+      data: remoteDataGroupedByA.filter((item) => item.key.includes('A_1')),
+    },
+    200,
+    { 'access-control-allow-origin': '*' },
+  )
   .onRequestTo(/\/api\/data\?.*group=/)
   .respond(
     {

e2e/testcafe-devextreme/tests/cardView/headerPanel/etalons/sortable-indicator-first-rtl-true (fluent.blue.light)_mask.png

@@ -10,7 +10,7 @@ import type { OptionWithChanges } from '@ts/grids/new/grid_core/options_controll
 import { OptionsController } from '../options_controller/options_controller';
 import { getTreeNodeByPath } from '../utils/tree/index';
 import { updateColumnSettings } from './columns_settings/index';
-import { IGNORE_COLUMN_OPTION_NAMES } from './const';
+import { COLUMNS_OBJ_COMPARE_DEPTH, IGNORE_COLUMN_OPTION_NAMES } from './const';
 import type { ColumnProperties, ColumnSettings, PreNormalizedColumn } from './options';
 import type { Column, ColumnsConfigurationFromData, VisibleColumn } from './types';
 import {
@@ -176,7 +176,7 @@ export class ColumnsController {
     newValue: unknown,
     prevValue: unknown,
   ): void {
-    if (!equalByValue(prevValue, newValue, { maxDepth: 5 })) {
+    if (!equalByValue(prevValue, newValue, { maxDepth: COLUMNS_OBJ_COMPARE_DEPTH })) {
       const fullOptionPath = `columns[${columnIndex}].${optionName}`;
       this.options.notifyColumnOptionChanged(fullOptionPath, newValue, prevValue);
     }

e2e/testcafe-devextreme/tests/cardView/headerPanel/etalons/sortable-indicator-last-rtl-false (fluent.blue.light)_mask.png

@@ -1,3 +1,5 @@
 export const IGNORE_COLUMN_OPTION_NAMES = {
   selector: true,
 };
+
+export const COLUMNS_OBJ_COMPARE_DEPTH = 5;