Merge pull request #16940 from IgniteUI/ganastasov/fix-16897-21.0.x

fix(simple-combo): prevent simple combo from clearing on blur - 21.0.x

Author: ChronosSF

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

@@ -2103,6 +2103,34 @@ describe('IgxSimpleCombo', () => {
 
             expect(document.activeElement).not.toBe(input.nativeElement);
         }));
+
+        it('should sync searchValue/filterValue on writeValue and keep selection on blur', fakeAsync(() => {
+            combo.searchValue = combo.filterValue = 'zzz';
+
+            combo.writeValue('Connecticut');
+            tick();
+            fixture.detectChanges();
+
+            expect(combo.displayValue).toEqual('Connecticut');
+            expect(combo.searchValue).toEqual('Connecticut');
+            expect(combo.filterValue).toEqual('Connecticut');
+
+            combo.close();
+            tick();
+            fixture.detectChanges();
+
+            input.triggerEventHandler('focus', {});
+            fixture.detectChanges();
+
+            UIInteractions.triggerEventHandlerKeyDown('Tab', input);
+            tick();
+            fixture.detectChanges();
+
+            expect(combo.selection).toBeDefined();
+            expect(combo.selection.field).toEqual('Connecticut');
+            expect(combo.displayValue).toEqual('Connecticut');
+            expect(input.nativeElement.value).toEqual('Connecticut');
+        }));
     });
 
     describe('Form control tests: ', () => {

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

@@ -187,7 +187,7 @@ export class IgxSimpleComboComponent extends IgxComboBaseDirective implements Co
         this.cdr.markForCheck();
         this._displayValue = this.createDisplayText(super.selection, oldSelection);
         this._value = this.valueKey ? super.selection.map(item => item[this.valueKey]) : super.selection;
-        this.filterValue = this._displayValue?.toString() || '';
+        this.searchValue = this.filterValue = this._displayValue?.toString() || '';
     }
 
     /** @hidden @internal */