feat(combo): Add caseSensitive option and make onSearchInput cancelable

#7282

projects/igniteui-angular/src/lib/combo/combo.component.html

@@ -39,6 +39,11 @@
             [(ngModel)]="searchValue" (ngModelChange)="handleInputChange($event)" (keyup)="handleKeyUp($event)"
             (keydown)="handleKeyDown($event)" (focus)="dropdown.onBlur($event)" [attr.placeholder]="searchPlaceholder"
             aria-autocomplete="both" [attr.aria-owns]="dropdown.id" [attr.aria-labelledby]="ariaLabelledBy" />
+            <igx-suffix igxButton="icon" (click)="caseSensitive=!caseSensitive">
+                <igx-icon fontSet="material">
+                    {{ caseSensitive ? 'format_size' : 'format_clear'}}
+                </igx-icon>
+            </igx-suffix>
     </igx-input-group>
     <ng-container *ngTemplateOutlet="headerTemplate">
     </ng-container>
@@ -47,7 +52,7 @@
         [tabindex]="dropdown.collapsed ? -1 : 0" role="listbox" [attr.id]="dropdown.id">
         <igx-combo-item role="option" [itemHeight]='itemHeight'
             *igxFor="let item of data
-            | comboFiltering:searchValue:displayKey:filterable
+            | comboFiltering:searchValue:displayKey:filterable:caseSensitive
             | comboGrouping:groupKey:valueKey;
             index as rowIndex; containerSize: itemsMaxHeight; scrollOrientation: 'vertical'; itemSize: itemHeight"
             [value]="item" [isHeader]="item.isHeader" [index]="rowIndex">

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

@@ -103,6 +103,12 @@ export interface IComboItemAdditionEvent extends IBaseEventArgs {
     newCollection: any[];
 }
 
+/** Event emitted when the igx-combo's search input changes */
+export interface IComboSearchInputEventArgs extends CancelableEventArgs {
+    /** The change that has been made to the search input */
+    change: string;
+}
+
 /**
  * When called with sets A & B, returns A - B (as array);
  * @hidden
@@ -484,7 +490,7 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
      * ```
      */
     @Output()
-    public onSearchInput = new EventEmitter();
+    public onSearchInput = new EventEmitter<IComboSearchInputEventArgs>();
 
     /**
      * Emitted when new chunk of data is loaded from the virtualization
@@ -692,6 +698,22 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
     @Input()
     public searchPlaceholder = 'Enter a Search Term';
 
+    /**
+     * Sets the caseSensitive option of the combo filtering
+     *
+     * ```typescript
+     * // get
+     * let myComboCaseSensitiveFilter = this.combo.caseSensitive;
+     * ```
+     *
+     * ```html
+     * <!--set-->
+     * <igx-combo [caseSensitive]='true'></igx-combo>
+     * ```
+     */
+    @Input()
+    public caseSensitive = false;
+
     /**
      * Combo data source.
      *
@@ -982,8 +1004,16 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
      */
     public handleInputChange(event?: string) {
         if (event !== undefined) {
-            this.onSearchInput.emit(event);
+        const args: IComboSearchInputEventArgs = {
+            change: event,
+            cancel: false
+        };
+        this.onSearchInput.emit(args);
+        if (args.cancel) {
+            this.searchValue = null;
+            return;
         }
+    }
         this.checkMatch();
     }
 
@@ -1437,8 +1467,8 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
     /** Returns a string that should be populated in the combo's text box */
     private concatDisplayText(selection: any[]): string {
         const value = this.displayKey !== null && this.displayKey !== undefined ?
-        this.convertKeysToItems(selection).map(entry => entry[this.displayKey]).join(', ') :
-        selection.join(', ');
+            this.convertKeysToItems(selection).map(entry => entry[this.displayKey]).join(', ') :
+            selection.join(', ');
         return value;
     }
 

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

@@ -13,18 +13,19 @@ import { DefaultSortingStrategy } from '../data-operations/sorting-strategy';
     name: 'comboFiltering'
 })
 export class IgxComboFilteringPipe implements PipeTransform {
-    public transform(collection: any[], searchValue: any, displayKey: any, shouldFilter: boolean) {
+    public transform(collection: any[], searchValue: any, displayKey: any, shouldFilter: boolean, caseSensitive: boolean) {
         if (!collection) {
             return [];
         }
         if (!searchValue || !shouldFilter) {
             return collection;
         } else {
-            const searchTerm = searchValue.toLowerCase().trim();
+            const searchTerm = caseSensitive ? searchValue.trim() : searchValue.toLowerCase().trim();
             if (displayKey != null) {
-                return collection.filter(e => e[displayKey].toLowerCase().includes(searchTerm));
+                return collection.filter(e => caseSensitive ? e[displayKey].includes(searchTerm) :
+                                         e[displayKey].toLowerCase().includes(searchTerm));
             } else {
-                return collection.filter(e => e.toLowerCase().includes(searchTerm));
+                return collection.filter(e => caseSensitive ? e.includes(searchTerm) : e.toLowerCase().includes(searchTerm));
             }
         }
     }

src/app/combo/combo.sample.html

@@ -23,6 +23,7 @@
                             [allowCustomValues]="customValuesFlag"
                             [displayDensity]="'comfortable'"
                             [autoFocusSearch]="autoFocusSearch"
+                            (onSearchInput)="handleSearchInputEvent($event)"
                             [filterable]="filterableFlag" [displayKey]="valueKeyVar" [valueKey]="valueKeyVar"
                                 [groupKey]="valueKeyVar ? 'region' : ''" [width]="'100%'">
                     <ng-template *ngIf="currentDataType !== 'primitive'" #itemTemplate let-display let-key="valueKey">

src/app/combo/combo.sample.ts

@@ -1,7 +1,7 @@
 import { Component, ViewChild, OnInit, TemplateRef, AfterViewInit, ElementRef } from '@angular/core';
 import { IgxComboComponent, IComboSelectionChangeEventArgs,
     DisplayDensity, OverlaySettings, AutoPositionStrategy, VerticalAlignment, HorizontalAlignment, GlobalPositionStrategy,
-    scaleInCenter, scaleOutCenter, ElasticPositionStrategy
+    scaleInCenter, scaleOutCenter, ElasticPositionStrategy, CancelableEventArgs
 } from 'igniteui-angular';
 import { take } from 'rxjs/operators';
 import { cloneDeep } from 'lodash';
@@ -156,9 +156,10 @@ export class ComboSampleComponent implements OnInit, AfterViewInit {
             console.log('Closed log!');
         });
 
-        this.igxCombo.onSearchInput.subscribe((e) => {
-            console.log(e);
-        });
+        // this.igxCombo.onSearchInput.subscribe((e) => {
+        //     e.cancel = true;
+        //     console.log(e);
+        // });
     }
 
     ngAfterViewInit() {
@@ -194,4 +195,8 @@ export class ComboSampleComponent implements OnInit, AfterViewInit {
     handleSelectionChange(event: IComboSelectionChangeEventArgs) {
         console.log(event);
     }
+
+    handleSearchInputEvent(event: CancelableEventArgs) {
+        // event.cancel = true;
+    }
 }