CardView - Header Filter: Fix item's selection state when headerFilter.dataSource is specified

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

@@ -258,3 +258,50 @@ test('Filter values should be filtered by SearchPanel', async (t) => {
     },
   });
 });
+
+test('The item\'s selection state should be correct if a custom data source is specified', async (t) => {
+  // arrange
+  const cardView = new CardView('#container');
+
+  await t
+    .click(cardView.getHeaderPanel().getHeaderItem(0).getFilterIcon());
+
+  const firstHeaderFilterItem = cardView.getHeaderFilterList().getItem(0);
+
+  // assert
+  await t
+    .expect(cardView.getHeaderFilterList().getItems().count)
+    .eql(2)
+    .expect(firstHeaderFilterItem.text)
+    .eql('Test1')
+    .expect(firstHeaderFilterItem.isSelected)
+    .ok();
+}).before(async () => {
+  await createWidget('dxCardView', {
+    ...baseConfig,
+    columns: [
+      {
+        dataField: 'id',
+        filterValues: [1],
+        headerFilter: {
+          dataSource: [{
+            text: 'Test1',
+            value: 1,
+          }, {
+            text: 'Test2',
+            value: 2,
+          }],
+        },
+      },
+      {
+        dataField: 'title',
+      },
+      {
+        dataField: 'name',
+      },
+      {
+        dataField: 'lastName',
+      },
+    ],
+  });
+});

packages/devextreme/js/__internal/grids/new/grid_core/filtering/header_filter/__snapshots__/options.integration.test.ts.snap

@@ -458,20 +458,20 @@ exports[`Options Column.HeaderFilter dataSource: custom dataSource with exclude
                 tabindex="0"
               >
                 <div
-                  aria-label="Select All, Not checked"
+                  aria-label="Select All, Checked"
                   class="dx-list-select-all"
                 >
                   <div
-                    aria-checked="false"
+                    aria-checked="true"
                     aria-invalid="false"
                     aria-label="Select All"
                     aria-readonly="false"
-                    class="dx-widget dx-checkbox dx-list-select-all-checkbox"
+                    class="dx-widget dx-checkbox dx-checkbox-checked dx-list-select-all-checkbox"
                     role="checkbox"
                   >
                     <input
                       type="hidden"
-                      value="false"
+                      value="true"
                     />
                     <div
                       class="dx-checkbox-container"
@@ -495,24 +495,24 @@ exports[`Options Column.HeaderFilter dataSource: custom dataSource with exclude
                 >
                   <div
                     aria-label="A"
-                    aria-selected="false"
-                    class="dx-item dx-list-item"
+                    aria-selected="true"
+                    class="dx-item dx-list-item dx-list-item-selected"
                     role="option"
                   >
                     <div
                       class="dx-list-item-before-bag dx-list-select-checkbox-container"
                     >
                       <div
-                        aria-checked="false"
+                        aria-checked="true"
                         aria-invalid="false"
                         aria-label="Check state"
                         aria-readonly="false"
-                        class="dx-widget dx-checkbox dx-list-select-checkbox"
+                        class="dx-widget dx-checkbox dx-checkbox-checked dx-list-select-checkbox"
                         role="checkbox"
                       >
                         <input
                           type="hidden"
-                          value="false"
+                          value="true"
                         />
                         <div
                           class="dx-checkbox-container"
@@ -532,24 +532,24 @@ exports[`Options Column.HeaderFilter dataSource: custom dataSource with exclude
                   </div>
                   <div
                     aria-label="B"
-                    aria-selected="false"
-                    class="dx-item dx-list-item"
+                    aria-selected="true"
+                    class="dx-item dx-list-item dx-list-item-selected"
                     role="option"
                   >
                     <div
                       class="dx-list-item-before-bag dx-list-select-checkbox-container"
                     >
                       <div
-                        aria-checked="false"
+                        aria-checked="true"
                         aria-invalid="false"
                         aria-label="Check state"
                         aria-readonly="false"
-                        class="dx-widget dx-checkbox dx-list-select-checkbox"
+                        class="dx-widget dx-checkbox dx-checkbox-checked dx-list-select-checkbox"
                         role="checkbox"
                       >
                         <input
                           type="hidden"
-                          value="false"
+                          value="true"
                         />
                         <div
                           class="dx-checkbox-container"
@@ -862,24 +862,24 @@ exports[`Options Column.HeaderFilter dataSource: custom dataSource with exclude
                 >
                   <div
                     aria-label="A"
-                    aria-selected="false"
-                    class="dx-item dx-list-item"
+                    aria-selected="true"
+                    class="dx-item dx-list-item dx-list-item-selected"
                     role="option"
                   >
                     <div
                       class="dx-list-item-before-bag dx-list-select-checkbox-container"
                     >
                       <div
-                        aria-checked="false"
+                        aria-checked="true"
                         aria-invalid="false"
                         aria-label="Check state"
                         aria-readonly="false"
-                        class="dx-widget dx-checkbox dx-list-select-checkbox"
+                        class="dx-widget dx-checkbox dx-checkbox-checked dx-list-select-checkbox"
                         role="checkbox"
                       >
                         <input
                           type="hidden"
-                          value="false"
+                          value="true"
                         />
                         <div
                           class="dx-checkbox-container"
@@ -1266,24 +1266,24 @@ exports[`Options Column.HeaderFilter dataSource: custom dataSource with filter v
                   </div>
                   <div
                     aria-label="B"
-                    aria-selected="false"
-                    class="dx-item dx-list-item"
+                    aria-selected="true"
+                    class="dx-item dx-list-item dx-list-item-selected"
                     role="option"
                   >
                     <div
                       class="dx-list-item-before-bag dx-list-select-checkbox-container"
                     >
                       <div
-                        aria-checked="false"
+                        aria-checked="true"
                         aria-invalid="false"
                         aria-label="Check state"
                         aria-readonly="false"
-                        class="dx-widget dx-checkbox dx-list-select-checkbox"
+                        class="dx-widget dx-checkbox dx-checkbox-checked dx-list-select-checkbox"
                         role="checkbox"
                       >
                         <input
                           type="hidden"
-                          value="false"
+                          value="true"
                         />
                         <div
                           class="dx-checkbox-container"

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

@@ -154,42 +154,41 @@ export const getDataSourceOptions = (
   if (isDefined(headerFilterDataSource) && !isFunction(headerFilterDataSource)) {
     // @ts-expect-error
     options.dataSource = oldNormalizeDataSourceOptions(headerFilterDataSource);
-    return options.dataSource;
+  } else {
+    const cutoffLevel = Array.isArray(group) ? group.length - 1 : 0;
+
+    options.dataSource = {
+      filter,
+      group,
+      useDefaultSearch: true,
+      load: (loadOptions) => {
+        // @ts-expect-error Deferred ctor.
+        const d = new Deferred();
+        // NOTE: this marked as deprecated in original code
+        loadOptions.dataField = column.dataField || column.name;
+        storeLoadAdapter.load(loadOptions).done((data) => {
+          const convertUTCDates = remoteGrouping
+              && isUTCFormat(column.serializationFormat)
+              && cutoffLevel > 3;
+
+          if (convertUTCDates) {
+            data = convertDataFromUTCToLocal(data, column);
+          }
+
+          _processGroupItems(data, null, null, {
+            level: cutoffLevel,
+            column,
+            headerFilterOptions,
+          });
+
+          d.resolve(data);
+        }).fail(d.reject);
+
+        return d;
+      },
+    };
   }
 
-  const cutoffLevel = Array.isArray(group) ? group.length - 1 : 0;
-
-  options.dataSource = {
-    filter,
-    group,
-    useDefaultSearch: true,
-    load: (loadOptions) => {
-      // @ts-expect-error Deferred ctor.
-      const d = new Deferred();
-      // NOTE: this marked as deprecated in original code
-      loadOptions.dataField = column.dataField || column.name;
-      storeLoadAdapter.load(loadOptions).done((data) => {
-        const convertUTCDates = remoteGrouping
-            && isUTCFormat(column.serializationFormat)
-            && cutoffLevel > 3;
-
-        if (convertUTCDates) {
-          data = convertDataFromUTCToLocal(data, column);
-        }
-
-        _processGroupItems(data, null, null, {
-          level: cutoffLevel,
-          column,
-          headerFilterOptions,
-        });
-
-        d.resolve(data);
-      }).fail(d.reject);
-
-      return d;
-    },
-  };
-
   if (isFunction(headerFilterDataSource)) {
     headerFilterDataSource.call(column, options);
   }

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;