Merge pull request #14946 from IgniteUI/mkirkova/fix-14906

Filter grid correctly with case insensitive duplicate records - 18.2.x

Author: kdinev

projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-filtering.component.ts

@@ -221,13 +221,13 @@ export class IgxGridExcelStyleFilteringComponent extends BaseFilteringComponent
 
     /**
      * Gets the minimum height.
-     * 
-     * Setting value in template: 
+     *
+     * Setting value in template:
      * ```ts
-     * [minHeight]="'<number><unit (px|rem|etc..)>'" 
+     * [minHeight]="'<number><unit (px|rem|etc..)>'"
      * ```
-     * 
-     * Example for setting a value: 
+     *
+     * Example for setting a value:
      * ```ts
      * [minHeight]="'700px'"
      * ```
@@ -258,13 +258,13 @@ export class IgxGridExcelStyleFilteringComponent extends BaseFilteringComponent
 
     /**
      * Gets the maximum height.
-     * 
-     * Setting value in template: 
+     *
+     * Setting value in template:
      * ```ts
-     * [maxHeight]="'<number><unit (px|rem|etc..)>'" 
+     * [maxHeight]="'<number><unit (px|rem|etc..)>'"
      * ```
-     * 
-     * Example for setting a value: 
+     *
+     * Example for setting a value:
      * ```ts
      * [maxHeight]="'700px'"
      * ```
@@ -509,6 +509,11 @@ export class IgxGridExcelStyleFilteringComponent extends BaseFilteringComponent
     private renderValues() {
         this.filterValues = this.generateFilterValues();
         this.generateListData();
+        this.expressionsList.forEach(expr => {
+            if (this.column.dataType === GridColumnDataType.String && this.column.filteringIgnoreCase && expr.expression.searchVal) {
+                this.modifyExpression(expr);
+            }
+        });
     }
 
     private generateFilterValues() {
@@ -539,6 +544,16 @@ export class IgxGridExcelStyleFilteringComponent extends BaseFilteringComponent
         return filterValues;
     }
 
+    private modifyExpression(expr: ExpressionUI) {
+        const lowerCaseFilterValues = new Set(Array.from(expr.expression.searchVal).map((value: string) => value.toLowerCase()));
+
+        this.grid.data.forEach(item => {
+            if (lowerCaseFilterValues.has(item[this.column.field]?.toLowerCase())) {
+                expr.expression.searchVal.add(item[this.column.field]);
+            }
+        });
+    }
+
     private generateListData() {
         this.listData = new Array<FilterListItem>();
         const shouldUpdateSelection = this.areExpressionsSelectable();

projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts

@@ -5829,6 +5829,32 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
             expect(gridCellValues).toEqual(listItems);
         }));
 
+        it('Should filter grid correctly with case insensitive duplicates', fakeAsync(() => {
+            grid.data = SampleTestData.excelFilteringDataDuplicateValues();
+            fix.detectChanges();
+            // Open excel style custom filtering dialog.
+            GridFunctions.clickExcelFilterIconFromCode(fix, grid, 'AnotherField');
+
+            // Type string in search box.
+            const searchComponent = GridFunctions.getExcelStyleSearchComponent(fix);
+            const inputNativeElement = GridFunctions.getExcelStyleSearchComponentInput(fix, searchComponent);
+            UIInteractions.clickAndSendInputElementValue(inputNativeElement, 'cust', fix);
+            tick(100);
+            fix.detectChanges();
+
+            // Click 'apply' button to apply filter.
+            GridFunctions.clickApplyExcelStyleFiltering(fix);
+            tick(100);
+            fix.detectChanges();
+
+            // Get the results and verify their count.
+            const gridCellValues = GridFunctions.getColumnCells(fix, 'AnotherField')
+                .map(c => c.nativeElement.innerText)
+                .sort();
+
+            expect(gridCellValues.length).toEqual(5);
+        }));
+
         it('Should disable the apply button when there are no results.', fakeAsync(() => {
             GridFunctions.clickExcelFilterIconFromCode(fix, grid, 'Downloads');
 

projects/igniteui-angular/src/lib/test-utils/sample-test-data.spec.ts

@@ -1988,6 +1988,75 @@ export class SampleTestData {
         }
     ]);
 
+    public static excelFilteringDataDuplicateValues = () => ([
+        {
+            Downloads: 254,
+            ID: 1,
+            ProductName: 'Ignite UI for JavaScript',
+            ReleaseDate: SampleTestData.timeGenerator.timedelta(SampleTestData.today, 'day', 1),
+            ReleaseDateTime: SampleTestData.timeGenerator.timedelta(SampleTestData.todayFullDate, 'hour', 1),
+            ReleaseTime: SampleTestData.timeGenerator.timedelta(SampleTestData.todayFullDate, 'hour', 1),
+            Released: false,
+            AnotherField: 'a',
+            Revenue: 100000
+        },
+        {
+            Downloads: 702,
+            ID: 2,
+            ProductName: 'Some other item with Script',
+            ReleaseDate: SampleTestData.timeGenerator.timedelta(SampleTestData.today, 'day', 1),
+            ReleaseDateTime: SampleTestData.timeGenerator.timedelta(SampleTestData.todayFullDate, 'second', 20),
+            ReleaseTime: SampleTestData.timeGenerator.timedelta(SampleTestData.todayFullDate, 'second', 20),
+            Released: null,
+            AnotherField: 'Custom',
+            Revenue: 60000
+        },
+        {
+            Downloads: 0,
+            ID: 3,
+            ProductName: null,
+            ReleaseDate: SampleTestData.timeGenerator.timedelta(SampleTestData.today, 'month', 1),
+            ReleaseDateTime: SampleTestData.timeGenerator.timedelta(SampleTestData.todayFullDate, 'minute', +10),
+            ReleaseTime: SampleTestData.timeGenerator.timedelta(SampleTestData.todayFullDate, 'minute', +10),
+            Released: true,
+            AnotherField: 'custoM',
+            Revenue: 10000
+        },
+        {
+            Downloads: 1000,
+            ID: 4,
+            ProductName: null,
+            ReleaseDate: SampleTestData.today,
+            ReleaseDateTime: SampleTestData.todayFullDate,
+            ReleaseTime: SampleTestData.todayFullDate,
+            Released: undefined,
+            AnotherField: 'custom',
+            Revenue: 50000
+        },
+        {
+            Downloads: 1000,
+            ID: 5,
+            ProductName: null,
+            ReleaseDate: SampleTestData.today,
+            ReleaseDateTime: SampleTestData.todayFullDate,
+            ReleaseTime: SampleTestData.todayFullDate,
+            Released: undefined,
+            AnotherField: 'custom_1',
+            Revenue: 50000
+        },
+        {
+            Downloads: 1000,
+            ID: 6,
+            ProductName: null,
+            ReleaseDate: SampleTestData.today,
+            ReleaseDateTime: SampleTestData.todayFullDate,
+            ReleaseTime: SampleTestData.todayFullDate,
+            Released: undefined,
+            AnotherField: 'custom_A',
+            Revenue: 50000
+        }
+    ]);
+
     /* Data fields: Price: number, Brand: string, Model: string, Edition: string */
     public static exportGroupedDataColumns = () => ([
         { Price: 75000, Brand: 'Tesla', Model: 'Model S', Edition: 'Sport' },