fix(simple-combo): Update the model value only if selection is changed

Author: IvanKitanov17

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

@@ -1809,6 +1809,45 @@ describe('IgxSimpleCombo', () => {
                 expect(combo.valid).toEqual(IgxComboState.INVALID);
                 expect(combo.comboInput.valid).toEqual(IgxInputState.INVALID);
             });
+
+            it('Should update the model only if a selection is changing otherwise it should be undefiend when the user is filtering in templeted form', fakeAsync(() => {
+                input = fixture.debugElement.query(By.css(`.${CSS_CLASS_COMBO_INPUTGROUP}`));
+                let model;
+
+                combo.open();
+                fixture.detectChanges();
+                const item2 = fixture.debugElement.queryAll(By.css(`.${CSS_CLASS_DROPDOWNLISTITEM}`))[3];
+                item2.triggerEventHandler('click', UIInteractions.getMouseEvent('click'));
+                fixture.detectChanges();
+                model = fixture.componentInstance.values;
+
+                expect(combo.displayValue).toEqual(['Illinois']);
+                expect(combo.value).toEqual(['Illinois']);
+                expect(model).toEqual('Illinois');
+
+                combo.deselect();
+                fixture.detectChanges();
+                model = fixture.componentInstance.values;
+
+                expect(combo.selection).toEqual([]);
+                expect(model).toEqual(undefined);
+                expect(combo.displayValue).toEqual([]);
+
+                combo.focusSearchInput();
+                UIInteractions.simulateTyping('con', input);
+                fixture.detectChanges();
+                model = fixture.componentInstance.values;
+                expect(combo.comboInput.value).toEqual('con');
+                expect(model).toEqual(undefined);
+
+                UIInteractions.triggerKeyDownEvtUponElem('Enter', input.nativeElement);
+                fixture.detectChanges();
+                model = fixture.componentInstance.values;
+                expect(combo.selection).toBeDefined()
+                expect(combo.displayValue).toEqual(['Wisconsin']);
+                expect(combo.value).toEqual(['Wisconsin']);
+                expect(model).toEqual('Wisconsin');
+            }));
         });
         describe('Reactive form tests: ', () => {
             beforeAll(waitForAsync(() => {
@@ -2027,6 +2066,44 @@ describe('IgxSimpleCombo', () => {
                 expect((combo as any).inputGroup.element.nativeElement.classList.contains(CSS_CLASS_INPUT_GROUP_REQUIRED)).toBe(false);
             }));
         });
+
+        it('Should update the model only if a selection is changing otherwise it should be undefiend when the user is filtering in reactive form', fakeAsync(() => {
+            const form = (fixture.componentInstance as IgxSimpleComboInReactiveFormComponent).comboForm;
+            input = fixture.debugElement.query(By.css(`.${CSS_CLASS_COMBO_INPUTGROUP}`));
+
+            combo.open();
+            fixture.detectChanges();
+
+            const item2 = fixture.debugElement.queryAll(By.css(`.${CSS_CLASS_DROPDOWNLISTITEM}`))[3];
+            item2.triggerEventHandler('click', UIInteractions.getMouseEvent('click'));
+            fixture.detectChanges();
+
+
+            expect(combo.displayValue).toEqual(['Four']);
+            expect(combo.value).toEqual([4]);
+            expect(form.controls['comboValue'].value).toEqual([4]);
+
+            combo.deselect();
+            fixture.detectChanges();
+
+            expect(combo.selection).toEqual([]);
+            expect(form.controls['comboValue'].value).toEqual(undefined);
+            expect(combo.displayValue).toEqual([]);
+
+            combo.focusSearchInput();
+            UIInteractions.simulateTyping('on', input);
+            fixture.detectChanges();
+            expect(combo.comboInput.value).toEqual('on');
+            expect(form.controls['comboValue'].value).toEqual(undefined);
+
+            combo.select(combo.data[0][combo.valueKey]);
+            fixture.detectChanges();
+            expect(combo.selection).toBeDefined();
+            expect(combo.displayValue).toEqual(['One']);
+            expect(combo.value).toEqual([1]);
+            expect(form.controls['comboValue'].value).toEqual(1);
+        }));
+
     });
 
     describe('Selection tests: ', () => {

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

@@ -260,7 +260,6 @@ export class IgxSimpleComboComponent extends IgxComboBaseDirective implements Co
         if (event !== undefined) {
             this.filterValue = this.searchValue = typeof event === 'string' ? event : event.target.value;
         }
-        this._onChangeCallback(this.searchValue);
         if (this.collapsed && this.comboInput.focused) {
             this.open();
         }