feat(combo): Exported filter strategy for non-diacritic filter (#13071) (#13298)

Author: ChronosSF

CHANGELOG.md

@@ -34,6 +34,9 @@ All notable changes for each version of this project will be documented in this
      ```html
         <igx-badge icon="heart-monitor" iconSet="imx-icons"></igx-badge>
      ```
+- `IgxCombo`:
+    - Exposed `comboIgnoreDiacriticsFilter` filter function which normalizes diacritics to their base representation.
+    When the combo components are configured with it, filtering for **"resume"** will match both **"resume"** and **"résumé"**.
 
 ### General
 - `IgxStepper`:
@@ -48,11 +51,11 @@ All notable changes for each version of this project will be documented in this
 - All Ignite UI for Angular components are now exported as `standalone` components. The library still exports `NgModules`, which have been preserved for backward compatibility, but they no longer declare any of the Ignite UI for Angular components, instead they just import and export the `standalone` components. The `standalone` components are still in a preview stage. Some utility directive exports may change in the future and may be missing from the documentation in the initial release, hence the `preview` state of the feature.
 
   Now you can do:
-  
+
   ```typescript
   // IGX_GRID_DIRECTIVES exports all grid related components and directives
   import { IGX_GRID_DIRECTIVES } from 'igniteui-angular';
-  
+
   @Component({
       selector: 'app-grid-sample',
       styleUrls: ['grid.sample.scss'],
@@ -61,13 +64,13 @@ All notable changes for each version of this project will be documented in this
       imports: [IGX_GRID_DIRECTIVES, AsyncPipe]
   })
   ```
-  
+
   or
-  
+
   ```typescript
   // Single import of only the <igx-grid> component.
   import { IgxGridComponent } from 'igniteui-angular';
-  
+
   @Component({
       selector: 'app-grid-sample',
       styleUrls: ['grid.sample.scss'],
@@ -76,13 +79,13 @@ All notable changes for each version of this project will be documented in this
       imports: [IgxGridComponent, AsyncPipe]
   })
   ```
-  
+
   or still
-  
+
   ```typescript
   // `NgModule` import of the `IgxGridModule` module, which is equivalent to IGX_GRID_DIRECTIVES in terms of exported components and directives.
   import { IgxGridModule } from 'igniteui-angular';
-  
+
   @Component({
       selector: 'app-grid-sample',
       styleUrls: ['grid.sample.scss'],

projects/igniteui-angular/src/lib/combo/combo.component.spec.ts

@@ -27,7 +27,7 @@ import {
     IComboItemAdditionEvent, IComboSearchInputEventArgs, IComboSelectionChangingEventArgs, IgxComboComponent
 } from './combo.component';
 import { IgxComboFooterDirective, IgxComboHeaderDirective, IgxComboItemDirective } from './combo.directives';
-import { IgxComboFilteringPipe } from './combo.pipes';
+import { IgxComboFilteringPipe, comboIgnoreDiacriticsFilter } from './combo.pipes';
 import { IgxDropDownItemBaseDirective } from '../drop-down/drop-down-item.base';
 
 const CSS_CLASS_COMBO = 'igx-combo';
@@ -307,7 +307,7 @@ describe('igxCombo', () => {
             };
             combo.comboInput = {
                 nativeElement: {
-                    focus: () => {}
+                    focus: () => { }
                 }
             } as any;
             combo.handleOpening(inputEvent);
@@ -1195,9 +1195,9 @@ describe('igxCombo', () => {
                 expect(comboData).toEqual(data);
             });
             it('should remove undefined from array of primitive data', () => {
-                combo.data = ['New York', 'Sofia', undefined, 'Istanbul','Paris'];
+                combo.data = ['New York', 'Sofia', undefined, 'Istanbul', 'Paris'];
 
-                expect(combo.data).toEqual(['New York', 'Sofia', 'Istanbul','Paris']);
+                expect(combo.data).toEqual(['New York', 'Sofia', 'Istanbul', 'Paris']);
             });
             it('should render empty template when combo data source is not set', () => {
                 combo.data = [];
@@ -2031,7 +2031,7 @@ describe('igxCombo', () => {
                 item1.triggerEventHandler('click', UIInteractions.getMouseEvent('click'));
                 fixture.detectChanges();
                 expect(combo.value).toBe('0');
-                expect(combo.selection).toEqual([ 0 ]);
+                expect(combo.selection).toEqual([0]);
 
                 combo.open();
                 fixture.detectChanges();
@@ -2041,7 +2041,7 @@ describe('igxCombo', () => {
                 item2.triggerEventHandler('click', UIInteractions.getMouseEvent('click'));
                 fixture.detectChanges();
                 expect(combo.value).toBe('0, false');
-                expect(combo.selection).toEqual([ 0, false ]);
+                expect(combo.selection).toEqual([0, false]);
 
                 combo.open();
                 fixture.detectChanges();
@@ -2051,7 +2051,7 @@ describe('igxCombo', () => {
                 item3.triggerEventHandler('click', UIInteractions.getMouseEvent('click'));
                 fixture.detectChanges();
                 expect(combo.value).toBe('0, false, ');
-                expect(combo.selection).toEqual([ 0, false, '' ]);
+                expect(combo.selection).toEqual([0, false, '']);
 
                 combo.open();
                 fixture.detectChanges();
@@ -2061,7 +2061,7 @@ describe('igxCombo', () => {
                 item4.triggerEventHandler('click', UIInteractions.getMouseEvent('click'));
                 fixture.detectChanges();
                 expect(combo.value).toBe('0, false, , null');
-                expect(combo.selection).toEqual([ 0, false, '', null ]);
+                expect(combo.selection).toEqual([0, false, '', null]);
 
                 combo.open();
                 fixture.detectChanges();
@@ -2071,7 +2071,7 @@ describe('igxCombo', () => {
                 item5.triggerEventHandler('click', UIInteractions.getMouseEvent('click'));
                 fixture.detectChanges();
                 expect(combo.value).toBe('0, false, , null, NaN');
-                expect(combo.selection).toEqual([ 0, false, '', null, NaN ]);
+                expect(combo.selection).toEqual([0, false, '', null, NaN]);
 
                 combo.open();
                 fixture.detectChanges();
@@ -2081,7 +2081,7 @@ describe('igxCombo', () => {
                 item6.triggerEventHandler('click', UIInteractions.getMouseEvent('click'));
                 fixture.detectChanges();
                 expect(combo.value).toBe('0, false, , null, NaN');
-                expect(combo.selection).toEqual([ 0, false, '', null, NaN ]);
+                expect(combo.selection).toEqual([0, false, '', null, NaN]);
             });
             it('should select falsy values except "undefined" with "writeValue" method', () => {
                 combo.valueKey = 'value';
@@ -2429,6 +2429,32 @@ describe('igxCombo', () => {
                 expect(combo.addition.emit).toHaveBeenCalledTimes(1);
                 expect(combo.data[combo.data.length - 1]).toEqual('myItem');
             });
+
+            it('should support filtering strings containing diacritic characters', fakeAsync(() => {
+                combo.filterFunction = comboIgnoreDiacriticsFilter;
+                combo.displayKey = null;
+                combo.valueKey = null;
+                combo.filteringOptions = { caseSensitive: false, filterable: true, filteringKey: undefined };
+                combo.data = ['José', 'Óscar', 'Ángel', 'Germán', 'Niño', 'México', 'Méxícó', 'Mexico', 'Köln', 'München'];
+                combo.toggle();
+                fixture.detectChanges();
+
+                const searchInput = fixture.debugElement.query(By.css(`input[name="searchInput"]`));
+
+                const verifyFilteredItems = (term: string, expected: number) => {
+                    UIInteractions.triggerInputEvent(searchInput, term);
+                    fixture.detectChanges();
+                    const list = fixture.debugElement.query(By.css(`.${CSS_CLASS_CONTAINER}`)).nativeElement;
+                    const items = list.querySelectorAll(`.${CSS_CLASS_DROPDOWNLISTITEM}`);
+                    expect(items.length).toEqual(expected);
+                };
+
+                verifyFilteredItems('jose', 1);
+                verifyFilteredItems('mexico', 3);
+                verifyFilteredItems('o', 7);
+                verifyFilteredItems('é', 7);
+            }));
+
             it('should filter the dropdown items when typing in the search input', fakeAsync(() => {
                 let dropdownList;
                 let dropdownItems;
@@ -2513,8 +2539,8 @@ describe('igxCombo', () => {
                 const searchInput = fixture.debugElement.query(By.css(CSS_CLASS_SEARCHINPUT));
 
                 const verifyFilteredItems = (inputValue: string,
-                                            expectedDropdownItemsNumber: number,
-                                            expectedFilteredItemsNumber: number) => {
+                    expectedDropdownItemsNumber: number,
+                    expectedFilteredItemsNumber: number) => {
                     UIInteractions.triggerInputEvent(searchInput, inputValue);
                     fixture.detectChanges();
                     dropdownList = fixture.debugElement.query(By.css(`.${CSS_CLASS_CONTAINER}`)).nativeElement;
@@ -2768,7 +2794,7 @@ describe('igxCombo', () => {
                     return collection.filter(i => filteringOptions.caseSensitive ?
                         i[filteringOptions.filteringKey]?.includes(searchTerm) :
                         i[filteringOptions.filteringKey]?.toString().toLowerCase().includes(searchTerm))
-                    }
+                }
                 combo.open();
                 tick();
                 fixture.detectChanges();
@@ -2806,7 +2832,7 @@ describe('igxCombo', () => {
                     return collection.filter(i => filteringOptions.caseSensitive ?
                         i[filteringOptions.filteringKey]?.includes(searchTerm) :
                         i[filteringOptions.filteringKey]?.toString().toLowerCase().includes(searchTerm))
-                    }
+                }
                 combo.open();
                 tick();
                 fixture.detectChanges();

projects/igniteui-angular/src/lib/combo/combo.pipes.ts

@@ -70,18 +70,45 @@ export class IgxComboGroupingPipe implements PipeTransform {
     }
 }
 
-function defaultFilterFunction (collection: any[], searchValue: any, filteringOptions: IComboFilteringOptions): any[] {
+function defaultFilterFunction<T>(collection: T[], searchValue: string, filteringOptions: IComboFilteringOptions): T[] {
     if (!searchValue) {
         return collection;
     }
-    const searchTerm = filteringOptions.caseSensitive ? searchValue : searchValue.toLowerCase();
-    if (filteringOptions.filteringKey != null) {
-        return collection.filter(e => filteringOptions.caseSensitive ?
-            e[filteringOptions.filteringKey]?.includes(searchTerm) :
-            e[filteringOptions.filteringKey]?.toString().toLowerCase().includes(searchTerm));
-    } else {
-        return collection.filter(e => filteringOptions.caseSensitive ?
-            e?.includes(searchTerm) :
-            e?.toString().toLowerCase().includes(searchTerm));
+
+    const { caseSensitive, filteringKey } = filteringOptions;
+    const term = caseSensitive ? searchValue : searchValue.toLowerCase();
+
+    return collection.filter(item => {
+        const str = filteringKey ? `${item[filteringKey]}` : `${item}`;
+        return (caseSensitive ? str : str.toLowerCase()).includes(term);
+    });
+}
+
+function normalizeString(str: string, caseSensitive = false): string {
+    return (caseSensitive ? str : str.toLocaleLowerCase())
+        .normalize('NFKD')
+        .replace(/\p{M}/gu, '');
+}
+
+/**
+ * Combo filter function which does not distinguish between accented letters and their base letters.
+ * For example, when filtering for "resume", this function will match both "resume" and "résumé".
+ *
+ * @example
+ * ```html
+ * <igx-combo [filterFunction]="comboIgnoreDiacriticFilterFunction"></igx-combo>
+ * ```
+ */
+export function comboIgnoreDiacriticsFilter<T>(collection: T[], searchValue: string, filteringOptions: IComboFilteringOptions): T[] {
+    if (!searchValue) {
+        return collection;
     }
+
+    const { caseSensitive, filteringKey } = filteringOptions;
+    const term = normalizeString(searchValue, caseSensitive);
+
+    return collection.filter(item => {
+        const str = filteringKey ? `${item[filteringKey]}` : `${item}`;
+        return normalizeString(str, caseSensitive).includes(term);
+    });
 }

projects/igniteui-angular/src/lib/combo/public_api.ts

@@ -17,6 +17,7 @@ import {
 export { IComboFilteringOptions } from './combo.common';
 export * from './combo.component';
 export * from './combo.directives';
+export { comboIgnoreDiacriticsFilter } from './combo.pipes';
 
 /* NOTE: Combo directives collection for ease-of-use import in standalone components scenario */
 export const IGX_COMBO_DIRECTIVES = [