fix(combobox): use diacritic-insensitive search to filter items (#1217)

This is a port f520e7f (#1210) to 16.x. CDE-1649 closes #1209 Co-authored-by: Kevin Buhmann <[email protected]>
vmware-clarity · Feb 8, 2024 · fa70530 · fa70530
1 parent d45ac90
commit fa70530
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 6 deletions.
diff --git a/projects/angular/src/forms/combobox/option-items.directive.spec.ts b/projects/angular/src/forms/combobox/option-items.directive.spec.ts
@@ -118,14 +118,23 @@ export default function (): void {
         expect(this.clarityDirective.iterableProxy._ngForOf).toEqual([1, 12]);
       });
 
-      it('has case insensive filter', function () {
+      it('has case-insensitive filter', function () {
         const optionService: OptionSelectionService<any> = TestBed.get(OptionSelectionService);
         optionService.showAllOptions = false;
         this.testComponent.numbers.push('Room', 'Broom');
         optionService.currentInput = 'ro';
         this.fixture.detectChanges();
         expect(this.clarityDirective.iterableProxy._ngForOf).toEqual(['Room', 'Broom']);
       });
+
+      it('has diacritic-insensitive filter', function () {
+        const optionService: OptionSelectionService<any> = TestBed.get(OptionSelectionService);
+        optionService.showAllOptions = false;
+        this.testComponent.numbers.push('Ardèche', 'Ardennes', 'Ariège');
+        optionService.currentInput = 'arde';
+        this.fixture.detectChanges();
+        expect(this.clarityDirective.iterableProxy._ngForOf).toEqual(['Ardèche', 'Ardennes']);
+      });
     });
 
     describe('handles arrays of simple data correctly', () => {
@@ -205,6 +214,24 @@ export default function (): void {
           this.fixture.detectChanges();
         }).not.toThrow();
       });
+
+      it('has case-insensitive filter', function () {
+        const optionService: OptionSelectionService<any> = TestBed.get(OptionSelectionService);
+        optionService.showAllOptions = false;
+        this.testComponent.numbers.push({ a: 'Room' }, { a: 'Broom' });
+        optionService.currentInput = 'ro';
+        this.fixture.detectChanges();
+        expect(this.clarityDirective.iterableProxy._ngForOf).toEqual([{ a: 'Room' }, { a: 'Broom' }]);
+      });
+
+      it('has diacritic-insensitive filter', function () {
+        const optionService: OptionSelectionService<any> = TestBed.get(OptionSelectionService);
+        optionService.showAllOptions = false;
+        this.testComponent.numbers.push({ a: 'Ardèche' }, { a: 'Ardennes' }, { a: 'Ariège' });
+        optionService.currentInput = 'arde';
+        this.fixture.detectChanges();
+        expect(this.clarityDirective.filteredItems).toEqual([{ a: 'Ardèche' }, { a: 'Ardennes' }]);
+      });
     });
   });
 }
diff --git a/projects/angular/src/forms/combobox/option-items.directive.ts b/projects/angular/src/forms/combobox/option-items.directive.ts
@@ -87,27 +87,36 @@ export class ClrOptionItems<T> implements DoCheck, OnDestroy {
     if (!this._rawItems || this.filter === undefined || this.filter === null) {
       return;
     }
+
+    const normalizedFilterValue = normalizeValue(this.filter);
+
     if (this.optionService.showAllOptions) {
       this.filteredItems = this._rawItems;
     } else if (this._filterField) {
       this.filteredItems = this._rawItems.filter(item => {
         const objValue = (item as any)[this._filterField];
-        return objValue ? objValue.toString().toLowerCase().indexOf(this.filter.toLowerCase().toString()) > -1 : false;
+        return objValue ? normalizeValue(objValue).includes(normalizedFilterValue) : false;
       });
     } else {
       // Filter by all item object values
       this.filteredItems = this._rawItems.filter(item => {
         if (typeof item !== 'object') {
-          return item.toString().toLowerCase().indexOf(this.filter.toString().toLowerCase()) > -1;
+          return normalizeValue(item).includes(normalizedFilterValue);
         }
         const objValues = Object.values(item).filter(value => {
-          return value !== null && value !== undefined
-            ? value.toString().toLowerCase().indexOf(this.filter.toString().toLowerCase()) > -1
-            : false;
+          return value !== null && value !== undefined ? normalizeValue(value).includes(normalizedFilterValue) : false;
         });
         return objValues.length > 0;
       });
     }
     this.iterableProxy.ngForOf = this.filteredItems;
   }
 }
+
+function normalizeValue(value: any) {
+  return value
+    .toString()
+    .normalize('NFD')
+    .replace(/\p{Diacritic}/gu, '')
+    .toLowerCase();
+}