Merge pull request #12037 from IgniteUI/mkirkova/fix-11884

Preserve selection on blur when having a match and a partial match

Author: kdinev

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

@@ -1236,7 +1236,8 @@ export abstract class IgxComboBaseDirective extends DisplayDensityBase implement
 
     protected findMatch = (element: any): boolean => {
         const value = this.displayKey ? element[this.displayKey] : element;
-        return value?.toString().toLowerCase() === this.searchValue.trim().toLowerCase();
+        const searchValue = this.searchValue || this.comboInput?.value;
+        return value?.toString().toLowerCase() === searchValue.trim().toLowerCase();
     };
 
     protected manageRequiredAsterisk(): void {

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

@@ -609,6 +609,9 @@ describe('igxCombo', () => {
             combo.ngOnInit();
             combo.data = data;
             combo.dropdown = dropdown;
+            combo.comboInput = {
+                value: '',
+            } as any;
             combo.filterable = true;
             const matchSpy = spyOn<any>(combo, 'checkMatch').and.callThrough();
             spyOn(combo.searchInputUpdate, 'emit');

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

@@ -796,7 +796,8 @@ describe('IgxSimpleCombo', () => {
         beforeAll(waitForAsync(() => {
             TestBed.configureTestingModule({
                 declarations: [
-                    IgxSimpleComboSampleComponent
+                    IgxSimpleComboSampleComponent,
+                    IgxComboInContainerTestComponent
                 ],
                 imports: [
                     IgxSimpleComboModule,
@@ -1051,6 +1052,30 @@ describe('IgxSimpleCombo', () => {
             expect(combo.value).toBeFalsy();
         });
 
+        it('should not clear the selection and input on blur with a match', () => {
+            fixture = TestBed.createComponent(IgxComboInContainerTestComponent);
+            combo = fixture.componentInstance.combo;
+            fixture.detectChanges();
+
+            input = fixture.debugElement.query(By.css(`.${CSS_CLASS_COMBO_INPUTGROUP}`));
+            combo.data = ['Apples', 'Apple'];
+
+            combo.select(combo.data[1]);
+            fixture.detectChanges();
+
+            expect(combo.selection.length).toBe(1);
+            expect(combo.selection[0]).toEqual('Apple');
+
+            combo.open();
+            fixture.detectChanges();
+
+            UIInteractions.triggerEventHandlerKeyDown('Tab', input);
+            fixture.detectChanges();
+
+            expect(combo.value).toEqual('Apple');
+            expect(combo.selection.length).toEqual(1);
+        });
+
         it('should empty any invalid item values', () => {
             combo.valueKey = 'key';
             combo.displayKey = 'value';

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

@@ -448,18 +448,16 @@ export class IgxSimpleComboComponent extends IgxComboBaseDirective implements Co
     }
 
     private clearOnBlur(): void {
-        const filtered = this.filteredData.find(this.findAllMatches);
-        if (filtered === undefined || filtered === null || this.selectionService.size(this.id) === 0) {
+        const filtered = this.filteredData.find(this.findMatch);
+        if (filtered === undefined || filtered === null || this.getElementKey(filtered) !== this.selectedItem) {
             this.clearAndClose();
             return;
         }
-        if (this.isPartialMatch(filtered) || this.getElementVal(filtered) !== this._internalFilter) {
-            this.clearAndClose();
-        }
     }
 
-    private isPartialMatch(filtered: any): boolean {
-        return !!this._internalFilter && this._internalFilter.length !== this.getElementVal(filtered).length;
+    private getElementKey(element: any): any {
+        const elementVal = this.valueKey ? element[this.valueKey] : element;
+        return elementVal;
     }
 
     private getElementVal(element: any): string {