diff --git a/projects/igniteui-angular/src/lib/combo/combo.component.html b/projects/igniteui-angular/src/lib/combo/combo.component.html
index e53ab15574c..cce3cdc81fc 100644
--- a/projects/igniteui-angular/src/lib/combo/combo.component.html
+++ b/projects/igniteui-angular/src/lib/combo/combo.component.html
@@ -41,7 +41,7 @@
aria-autocomplete="both" [attr.aria-owns]="dropdown.id" [attr.aria-labelledby]="ariaLabelledBy" />
+ (click)="toggleCaseSensitive()">
@@ -51,7 +51,7 @@
[style.maxHeight.px]="itemsMaxHeight" [igxDropDownItemNavigation]="dropdown" (focus)="dropdown.onFocus()"
[tabindex]="dropdown.collapsed ? -1 : 0" role="listbox" [attr.id]="dropdown.id">
diff --git a/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts b/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts
index 0042ce6d203..caedcec1633 100644
--- a/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts
+++ b/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts
@@ -2005,7 +2005,7 @@ describe('igxCombo', () => {
combo.searchValue = 'New ';
combo.handleInputChange();
fixture.detectChanges();
- expect(filterSpy).toHaveBeenCalledTimes(2);
+ expect(filterSpy).toHaveBeenCalledTimes(1);
expect(combo.filteredData.length).toBeLessThan(initialData.length);
firstFilter = [...combo.filteredData];
@@ -2013,14 +2013,14 @@ describe('igxCombo', () => {
combo.handleInputChange();
fixture.detectChanges();
expect(combo.filteredData.length).toBeLessThan(initialData.length);
- expect(filterSpy).toHaveBeenCalledTimes(4);
+ expect(filterSpy).toHaveBeenCalledTimes(2);
combo.searchValue = '';
combo.handleInputChange();
fixture.detectChanges();
expect(combo.filteredData.length).toEqual(initialData.length);
expect(combo.filteredData.length).toBeGreaterThan(firstFilter.length);
- expect(filterSpy).toHaveBeenCalledTimes(6);
+ expect(filterSpy).toHaveBeenCalledTimes(3);
expect(combo.filteredData.length).toEqual(initialData.length);
});
it('should properly select/deselect filteredData', () => {
@@ -2033,7 +2033,7 @@ describe('igxCombo', () => {
combo.searchValue = 'New ';
combo.handleInputChange();
fixture.detectChanges();
- expect(filterSpy).toHaveBeenCalledTimes(2);
+ expect(filterSpy).toHaveBeenCalledTimes(1);
expect(combo.filteredData.length).toBeLessThan(initialData.length);
expect(combo.filteredData.length).toEqual(4);
diff --git a/projects/igniteui-angular/src/lib/combo/combo.component.ts b/projects/igniteui-angular/src/lib/combo/combo.component.ts
index a73a48c92ef..d1140fbcf2c 100644
--- a/projects/igniteui-angular/src/lib/combo/combo.component.ts
+++ b/projects/igniteui-angular/src/lib/combo/combo.component.ts
@@ -165,6 +165,10 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
public filteringOptions: IComboFilteringOptions = {
caseSensitive: false
};
+ /**
+ * @hidden @internal
+ */
+ public filteringPipeTrigger = 0;
protected stringFilters = IgxStringFilteringOperand;
protected booleanFilters = IgxBooleanFilteringOperand;
protected _groupKey = '';
@@ -1578,6 +1582,14 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
public handleClosed() {
this.onClosed.emit();
}
+
+ /**
+ * @hidden @internal
+ */
+ public toggleCaseSensitive() {
+ this.filteringOptions.caseSensitive = !this.filteringOptions.caseSensitive;
+ this.filteringPipeTrigger++;
+ }
}
/**
diff --git a/projects/igniteui-angular/src/lib/combo/combo.pipes.ts b/projects/igniteui-angular/src/lib/combo/combo.pipes.ts
index 1e3a707c41b..22e14e0c6e7 100644
--- a/projects/igniteui-angular/src/lib/combo/combo.pipes.ts
+++ b/projects/igniteui-angular/src/lib/combo/combo.pipes.ts
@@ -11,12 +11,11 @@ import { IComboFilteringOptions } from './combo.component';
* @hidden
*/
@Pipe({
- name: 'comboFiltering',
- pure: false
+ name: 'comboFiltering'
})
export class IgxComboFilteringPipe implements PipeTransform {
public transform(collection: any[], searchValue: any, displayKey: any,
- shouldFilter: boolean, filteringOptions: IComboFilteringOptions) {
+ shouldFilter: boolean, filteringOptions: IComboFilteringOptions, pipeTrigger: number) {
if (!collection) {
return [];
}