fix(combo): fix error in searchvalue handling, #8018

Author: ViktorSlavov

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

@@ -51,7 +51,7 @@
         [style.maxHeight.px]="itemsMaxHeight" [igxDropDownItemNavigation]="dropdown" (focus)="dropdown.onFocus()"
         [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:filteringOptions
+            | comboFiltering:filterValue:displayKey:filterable:filteringOptions
             | 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.spec.ts

@@ -3,7 +3,7 @@ import { async, TestBed, tick, fakeAsync } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { FormGroup, FormControl, Validators, FormBuilder, ReactiveFormsModule, FormsModule, NgControl } from '@angular/forms';
-import { IgxComboComponent, IgxComboModule, IComboSelectionChangeEventArgs, IgxComboState } from './combo.component';
+import { IgxComboComponent, IgxComboModule, IComboSelectionChangeEventArgs, IgxComboState, IComboSearchInputEventArgs } from './combo.component';
 import { IgxComboItemComponent } from './combo-item.component';
 import { IgxComboDropDownComponent } from './combo-dropdown.component';
 import { IgxComboAddItemComponent } from './combo-add-item.component';
@@ -586,7 +586,7 @@ describe('igxCombo', () => {
 
             combo.handleInputChange('Item1');
             expect(combo.onSearchInput.emit).toHaveBeenCalledTimes(1);
-            expect(matchSpy).toHaveBeenCalledTimes(0);
+            expect(matchSpy).toHaveBeenCalledTimes(1);
         });
     });
     describe('Initialization and rendering tests: ', () => {
@@ -2432,6 +2432,17 @@ describe('igxCombo', () => {
             fixture.detectChanges();
             expect([...combo.filteredData]).toEqual(combo.data.filter(e => e['field'].includes('M')));
         });
+        it('Should NOT filter the data when onSearchInput is canceled', () => {
+            const cancelSub = combo.onSearchInput.subscribe((event: IComboSearchInputEventArgs) => event.cancel = true);
+            combo.toggle();
+            fixture.detectChanges();
+            const searchInput = fixture.debugElement.query(By.css('input[name=\'searchInput\']'));
+            UIInteractions.triggerInputEvent(searchInput, 'Test');
+            fixture.detectChanges();
+            expect(combo.filteredData.length).toEqual(combo.data.length);
+            expect(combo.searchValue).toEqual('Test');
+            cancelSub.unsubscribe();
+        });
     });
     describe('Form control tests: ', () => {
         describe('Reactive form tests: ', () => {

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

@@ -165,12 +165,15 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
     public filteringOptions: IComboFilteringOptions = {
         caseSensitive: false
     };
+    /** @hidden @internal */
+    public filterValue = '';
     protected stringFilters = IgxStringFilteringOperand;
     protected booleanFilters = IgxBooleanFilteringOperand;
     protected _groupKey = '';
     protected _displayKey: string;
     protected _prevInputValue = '';
     private _dataType = '';
+    private _searchValue = '';
     private ngControl: NgControl = null;
     private destroy$ = new Subject<any>();
     private _data = [];
@@ -894,7 +897,14 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
     /**
      * @hidden @internal
      */
-    public searchValue = '';
+    public get searchValue(): string {
+        return this._searchValue;
+    }
+
+    public set searchValue(val: string) {
+        this.filterValue = val;
+        this._searchValue = val;
+    }
 
     /**
      * @hidden @internal
@@ -1036,8 +1046,7 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
             };
             this.onSearchInput.emit(args);
             if (args.cancel) {
-                this.searchValue = null;
-                return;
+                this.filterValue = null;
             }
         }
         this.checkMatch();