DataGrid: Fix UI update if values change in the header filter and collatorOptions are used (T1273020)

e2e/testcafe-devextreme/tests/dataGrid/filtering.ts

@@ -0,0 +1,92 @@
+import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
+import DataGrid from 'devextreme-testcafe-models/dataGrid';
+import url from '../../helpers/getPageUrl';
+import { createWidget } from '../../helpers/createWidget';
+
+fixture.disablePageReloads`Filtering`
+  .page(url(__dirname, '../../container.html'));
+
+const GRID_CONTAINER = '#container';
+
+test('Data should be filtered if True is selected via the filter method when case sensitive is enabled', async (t) => {
+  // arrange
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+  const dataGrid = new DataGrid(GRID_CONTAINER);
+
+  // act
+  await dataGrid.apiFilter(['text', '=', 'true']);
+
+  // assert
+  await t.expect(dataGrid.isReady()).ok();
+
+  await takeScreenshot('filter-method-with-case-sensitive-1.png', dataGrid.element);
+
+  // act
+  await dataGrid.apiFilter(['text', '=', 'True']);
+
+  // assert
+  await t.expect(dataGrid.isReady()).ok();
+
+  await takeScreenshot('filter-method-with-case-sensitive-2.png', dataGrid.element);
+
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => createWidget('dxDataGrid', {
+  dataSource: {
+    store: [
+      { ID: 1, text: 'true' },
+      { ID: 2, text: 'True' },
+    ],
+    langParams: {
+      locale: 'en-US',
+      collatorOptions: {
+        sensitivity: 'case',
+      },
+    },
+  },
+  keyExpr: 'ID',
+  showBorders: true,
+}));
+
+test('Data should be filtered if True is selected via the option method when case sensitive is enabled', async (t) => {
+  // arrange
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+  const dataGrid = new DataGrid(GRID_CONTAINER);
+
+  // assert
+  await t.expect(dataGrid.isReady()).ok();
+
+  await takeScreenshot('filtering-via-option-method-with-case-sensitive-1.png', dataGrid.element);
+
+  // act
+  await dataGrid.option('columns', ['ID', { dataField: 'text', filterValue: 'True' }]);
+
+  // assert
+  await t.expect(dataGrid.isReady()).ok();
+
+  await takeScreenshot('filtering-via-option-method-with-case-sensitive-2.png', dataGrid.element);
+
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => createWidget('dxDataGrid', {
+  dataSource: {
+    store: [
+      { ID: 1, text: 'true' },
+      { ID: 2, text: 'True' },
+    ],
+    langParams: {
+      locale: 'en-US',
+      collatorOptions: {
+        sensitivity: 'case',
+      },
+    },
+  },
+  keyExpr: 'ID',
+  showBorders: true,
+  columns: ['ID', {
+    dataField: 'text',
+    filterValue: 'true',
+  }],
+}));

e2e/testcafe-devextreme/tests/dataGrid/headerFilter/headerFilter.ts

@@ -234,3 +234,52 @@ test('DataGrid - Column Header filter does not properly work if the column capti
     'FirstName',
   ],
 }));
+
+test('Data should be filtered if True is selected in the header filter when case sensitive is enabled (T1273020)', async (t) => {
+  // arrange
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+  const dataGrid = new DataGrid(GRID_CONTAINER);
+  const headerCell = dataGrid.getHeaders().getHeaderRow(0).getHeaderCell(1);
+  const filterIconElement = headerCell.getFilterIcon();
+  const headerFilter = new HeaderFilter();
+  const buttons = headerFilter.getButtons();
+  const list = headerFilter.getList();
+
+  // act
+  await t
+    .click(filterIconElement)
+    .click(list.getItem(0).element) // Select first item with value 'true'
+    .click(buttons.nth(0)); // Click OK
+
+  await takeScreenshot('T1273020-header-filter-with-case-sensitive-1.png', dataGrid.element);
+
+  // act
+  await t
+    .click(filterIconElement)
+    .click(list.getItem(0).element) // Deselect first item with value 'true'
+    .click(list.getItem(1).element) // Select second item with value 'True'
+    .click(buttons.nth(0)); // Click OK
+
+  await takeScreenshot('T1273020-header-filter-with-case-sensitive-2.png', dataGrid.element);
+
+  // assert
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => createWidget('dxDataGrid', {
+  dataSource: {
+    store: [
+      { ID: 1, text: 'true' },
+      { ID: 2, text: 'True' },
+    ],
+    langParams: {
+      locale: 'en-US',
+      collatorOptions: {
+        sensitivity: 'case',
+      },
+    },
+  },
+  keyExpr: 'ID',
+  showBorders: true,
+  headerFilter: { visible: true },
+}));

packages/devextreme/js/__internal/grids/grid_core/columns_controller/m_columns_controller.ts

@@ -1238,6 +1238,8 @@ export class ColumnsController extends modules.Controller {
   }
 
   private _updateChanges(dataSource, parameters) {
+    const langParams = dataSource?.loadOptions?.()?.langParams;
+
     if (dataSource) {
       this.updateColumnDataTypes(dataSource);
       this._dataSourceApplied = true;
@@ -1251,7 +1253,7 @@ export class ColumnsController extends modules.Controller {
     }
 
     if (this._dataController
-      && !gridCoreUtils.equalFilterParameters(parameters.filtering, this._dataController.getCombinedFilter())) {
+      && !gridCoreUtils.equalFilterParameters(parameters.filtering, this._dataController.getCombinedFilter(), langParams)) {
       updateColumnChanges(this, 'filtering');
     }
     updateColumnChanges(this, 'columns');

packages/devextreme/js/__internal/grids/grid_core/data_controller/m_data_controller.ts

@@ -1309,15 +1309,16 @@ export class DataController extends DataHelperMixin(modules.Controller) {
 
   private filter(filterExpr) {
     const dataSource = this._dataSource;
-    const filter = dataSource && dataSource.filter();
+    const filter = dataSource?.filter();
+    const langParams = dataSource?.loadOptions?.()?.langParams;
 
     if (arguments.length === 0) {
       return filter;
     }
 
     filterExpr = arguments.length > 1 ? Array.prototype.slice.call(arguments, 0) : filterExpr;
 
-    if (gridCoreUtils.equalFilterParameters(filter, filterExpr)) {
+    if (gridCoreUtils.equalFilterParameters(filter, filterExpr, langParams)) {
       return;
     }
     if (dataSource) {

packages/devextreme/js/__internal/grids/grid_core/data_source_adapter/m_data_source_adapter_utils.ts

@@ -26,7 +26,7 @@ export const calculateOperationTypes = function (loadOptions, lastLoadOptions, i
       sorting: !gridCoreUtils.equalSortParameters(loadOptions.sort, lastLoadOptions.sort),
       grouping: !gridCoreUtils.equalSortParameters(loadOptions.group, lastLoadOptions.group, true),
       groupExpanding: !gridCoreUtils.equalSortParameters(loadOptions.group, lastLoadOptions.group) || lastLoadOptions.groupExpand,
-      filtering: !gridCoreUtils.equalFilterParameters(loadOptions.filter, lastLoadOptions.filter),
+      filtering: !gridCoreUtils.equalFilterParameters(loadOptions.filter, lastLoadOptions.filter, loadOptions.langParams),
       pageIndex: loadOptions.pageIndex !== lastLoadOptions.pageIndex,
       skip: loadOptions.skip !== lastLoadOptions.skip,
       take: loadOptions.take !== lastLoadOptions.take,

packages/devextreme/js/__internal/grids/grid_core/m_utils.ts

@@ -137,24 +137,24 @@ const getWidgetInstance = function ($element) {
   return widgetName && editorData[widgetName];
 };
 
-const equalFilterParameters = function (filter1, filter2) {
+const equalFilterParameters = function (filter1, filter2, langParams?) {
   if (Array.isArray(filter1) && Array.isArray(filter2)) {
     if (filter1.length !== filter2.length) {
       return false;
     }
     for (let i = 0; i < filter1.length; i++) {
-      if (!equalFilterParameters(filter1[i], filter2[i])) {
+      if (!equalFilterParameters(filter1[i], filter2[i], langParams)) {
         return false;
       }
     }
 
     return true;
   } if (isFunction(filter1) && filter1.columnIndex >= 0 && isFunction(filter2) && filter2.columnIndex >= 0) {
     return filter1.columnIndex === filter2.columnIndex
-            && toComparable(filter1.filterValue) === toComparable(filter2.filterValue)
-            && toComparable(filter1.selectedFilterOperation) === toComparable(filter2.selectedFilterOperation);
+      && toComparable(filter1.filterValue, undefined, langParams) === toComparable(filter2.filterValue, undefined, langParams)
+      && toComparable(filter1.selectedFilterOperation, undefined, langParams) === toComparable(filter2.selectedFilterOperation, undefined, langParams);
   }
-  return toComparable(filter1) == toComparable(filter2); // eslint-disable-line eqeqeq
+  return toComparable(filter1, undefined, langParams) == toComparable(filter2, undefined, langParams); // eslint-disable-line eqeqeq
 };
 
 const createPoint = <T extends ColumnPoint>(options: T): ColumnPoint => ({

packages/testcafe-models/dataGrid/index.ts

@@ -411,6 +411,15 @@ export default class DataGrid extends Widget {
     return this.element.find(`.${this.addWidgetPrefix(CLASS.columnChooserButton)}`);
   }
 
+  apiFilter(filter: any[]): Promise<void> {
+    const { getInstance } = this;
+
+    return ClientFunction(
+      () => (getInstance() as any).filter(filter),
+      { dependencies: { getInstance, filter } },
+    )();
+  }
+
   apiClearFilter(): Promise<void> {
     const { getInstance } = this;