CardView - Header Filter: Fix reset select state after search

Author: Alyar

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

@@ -258,3 +258,48 @@ test('Filter values should be filtered by SearchPanel', async (t) => {
     },
   });
 });
+
+test('Select item state should be correct after search', async (t) => {
+  // arrange
+  const cardView = new CardView('#container');
+
+  await t
+    .click(cardView.getHeaderPanel().getHeaderItem(0).getFilterIcon());
+
+  // assert
+  await t
+    .expect(cardView.getHeaderFilterList().getItems().count)
+    .eql(4);
+
+  const firstHeaderFilterItem = cardView.getHeaderFilterList().getItem(0);
+
+  // act
+  await t
+    .click(firstHeaderFilterItem.element);
+
+  // assert
+  await t
+    .expect(firstHeaderFilterItem.isSelected)
+    .ok();
+
+  // act
+  await t
+    .typeText(cardView.getHeaderFilterList().searchInput, '1');
+
+  // assert
+  await t
+    .expect(cardView.getHeaderFilterList().getItems().count)
+    .eql(1)
+    .expect(cardView.getHeaderFilterList().getItem(0).isSelected)
+    .ok();
+}).before(async () => {
+  await createWidget('dxCardView', {
+    ...baseConfig,
+    headerFilter: {
+      visible: true,
+      search: {
+        enabled: true,
+      },
+    },
+  });
+});

packages/devextreme/js/__internal/grids/new/grid_core/filtering/header_filter/legacy_header_filter.ts

@@ -137,10 +137,12 @@ const _processGroupItems = (
 
 export const getDataSourceOptions = (
   storeLoadAdapter,
-  column,
+  popupOptions,
   headerFilterOptions,
   filter,
 ) => {
+  const { column } = popupOptions;
+
   if (!storeLoadAdapter) {
     return undefined;
   }
@@ -199,7 +201,11 @@ export const getDataSourceOptions = (
     let items = data;
 
     items = origPostProcess?.call(this, items) || items;
-    _updateSelectedState(items, column);
+    _updateSelectedState(items, {
+      ...column,
+      filterType: popupOptions.filterType,
+      filterValues: popupOptions.filterValues,
+    });
     return items;
   };
 

packages/devextreme/js/__internal/grids/new/grid_core/filtering/header_filter/view_controller.ts

@@ -45,70 +45,65 @@ export class HeaderFilterViewController {
     const rootDataSource = this.dataController.getStoreLoadAdapter();
     const rootHeaderFilterOptions = this.options.oneWay('headerFilter').peek();
     const filterExpression = this.getFilterExpressionWithoutCurrentColumn(column);
+    const type = getFilterType(column);
+    const { columnsController } = this;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const popupOptions: any = {
+      type,
+      column: { ...column },
+      isFilterBuilder,
+      headerFilter: { ...column.headerFilter },
+      filterType: column.filterType,
+      // NOTE: Copy array because of mutations in legacy code
+      filterValues: Array.isArray(column.filterValues)
+        ? [...column.filterValues]
+        : column.filterValues,
+      apply(): void {
+        if (customApply) {
+          customApply(this.filterValues);
+        } else {
+          columnsController.updateColumns(
+            (columns) => {
+              const index = getColumnIndexByName(columns, column.name);
+              const newColumns = [...columns];
+
+              newColumns[index] = {
+                ...newColumns[index],
+                headerFilter: {
+                  ...newColumns[index].headerFilter,
+                },
+                // NOTE: Copy array because of mutations in legacy code
+                filterValues: Array.isArray(this.filterValues)
+                  ? [...this.filterValues]
+                  : this.filterValues,
+                filterType: this.filterType,
+              };
+              return newColumns;
+            },
+          );
+        }
+
+        onFilterCloseCallback?.();
+      },
+      hidePopupCallback: (): void => {
+        this.popupStateInternal.value = null;
+        onFilterCloseCallback?.();
+      },
+    };
 
-    const filterDataSourceOptions = getDataSourceOptions(
+    popupOptions.dataSource = getDataSourceOptions(
       rootDataSource,
-      {
-        ...column,
-        filterType: column.filterType,
-        filterValues: column.filterValues,
-      },
+      popupOptions,
       // NOTE: Only text used from root options
       {
         texts: rootHeaderFilterOptions.texts,
       },
-
       filterExpression,
     );
 
-    const type = getFilterType(column);
-    const { columnsController } = this;
-
     this.popupStateInternal.value = {
       element,
-      options: {
-        type,
-        isFilterBuilder,
-        headerFilter: { ...column.headerFilter },
-        dataSource: filterDataSourceOptions,
-        filterType: column.filterType,
-        // NOTE: Copy array because of mutations in legacy code
-        filterValues: Array.isArray(column.filterValues)
-
-          ? [...column.filterValues]
-          : column.filterValues,
-        apply(): void {
-          if (customApply) {
-            customApply(this.filterValues);
-          } else {
-            columnsController.updateColumns(
-              (columns) => {
-                const index = getColumnIndexByName(columns, column.name);
-                const newColumns = [...columns];
-
-                newColumns[index] = {
-                  ...newColumns[index],
-                  headerFilter: {
-                    ...newColumns[index].headerFilter,
-                  },
-                  // NOTE: Copy array because of mutations in legacy code
-                  filterValues: Array.isArray(this.filterValues)
-                    ? [...this.filterValues]
-                    : this.filterValues,
-                  filterType: this.filterType,
-                };
-                return newColumns;
-              },
-            );
-          }
-
-          onFilterCloseCallback?.();
-        },
-        hidePopupCallback: (): void => {
-          this.popupStateInternal.value = null;
-          onFilterCloseCallback?.();
-        },
-      },
+      options: popupOptions,
     };
   }
 

packages/testcafe-models/list/item.ts

@@ -5,6 +5,7 @@ const CLASS = {
   disabled: 'dx-state-disabled',
   focused: 'dx-state-focused',
   hovered: 'dx-state-hover',
+  selected: 'dx-list-item-selected',
   reorderHandle: 'dx-list-reorder-handle',
 };
 
@@ -19,6 +20,8 @@ export default class ListItem {
 
   isHovered: Promise<boolean>;
 
+  isSelected: Promise<boolean>;
+
   radioButton: RadioButton;
 
   reorderHandle: Selector;
@@ -31,6 +34,7 @@ export default class ListItem {
     this.isDisabled = element.hasClass(CLASS.disabled);
     this.isFocused = element.hasClass(CLASS.focused);
     this.isHovered = element.hasClass(CLASS.hovered);
+    this.isSelected = element.hasClass(CLASS.selected);
     this.radioButton = new RadioButton(element);
     this.reorderHandle = element.find(`.${CLASS.reorderHandle}`);
     this.text = element.textContent;