Merge pull request #294 from IgniteUI/dkamburov/fix-291

Update the model on input event. Fix #291

Author: mpavlinov

src/igcombo/igcombo.component.ts

@@ -41,13 +41,29 @@ export class IgComboComponent extends IgControlBase<IgCombo> implements ControlV
         super.ngOnInit();
 
         if (this._model) {
+            if (this.options.allowCustomValue) {
+                jQuery(this._el).on("input", function (evt) {
+                    that._model.viewToModelUpdate(evt.target.value);
+                });
+    
+                jQuery(this._el).closest(".ui-igcombo-wrapper").find(".ui-igcombo-clear").on("click", function() {
+                    if (that.options.multiSelection && that.options.multiSelection.enabled) {
+                        that._model.viewToModelUpdate([]);
+                    } else {
+                        that._model.viewToModelUpdate(null);
+                    }
+                });
+            }
+
             // D.P. #244 only attach selectionchanged handler if there's a model to update
             jQuery(this._el).on(this._widgetName.toLowerCase() + "selectionchanged", function (evt, ui) {
                 var items = ui.items;
                 const valueKey = ui.owner.options.valueKey;
 
                 if (items.length <= 0 && !ui.owner.options.multiSelection.enabled) {
-                    that._model.viewToModelUpdate(null);
+                    if (!ui.owner.options.allowCustomValue) {
+                        that._model.viewToModelUpdate(null);
+                    }
                     return;
                 }
 

tests/unit/igcombo/combo.spec.ts

@@ -179,6 +179,35 @@ export function main() {
             });
         });
 
+        it('the ngModel should be updated correctly if the combo is allowing custom values', (done) => {
+            var template = '<div><ig-combo [(widgetId)]="comboID" [(options)]="options" [(ngModel)]="combo.value1" [dataSource]="northwind" [allowCustomValue]="true"></ig-combo></div>';
+            TestBed.overrideComponent(TestComponent, {
+                set: {
+                    template: template
+                }
+            });
+            TestBed.compileComponents().then(() => {
+                let fixture = TestBed.createComponent(TestComponent);
+                fixture.detectChanges();
+                setTimeout(function () {
+                    //var elem = $("#combo1").igCombo("itemsFromIndex", 0)["element"];
+                    //$("#combo1").igCombo("select", elem, {}, true);
+                    $(fixture.debugElement.nativeElement).find("#combo1").val("foo").trigger("input");
+                    fixture.detectChanges();
+                    setTimeout(function () {
+                        expect(fixture.componentInstance.combo.value1).toEqual("foo");
+                        //clear
+                        $("#combo1").parents("ig-combo").find(".ui-igcombo-clearicon").click();
+                        fixture.detectChanges();
+                        setTimeout(function () {
+                            expect(fixture.componentInstance.combo.value1).toBeNull();
+                            done();
+                        }, 10);
+                    }, 10);
+                }, 100);
+            });
+        });
+
         it('the ngModel should be updated correctly if the combo selection is updated and multiple items are selected', (done) => {
             var template = '<div><ig-combo [(widgetId)]="comboID" [dataSource]="northwind" [(options)]="optionsMultipleSelection" [(ngModel)]="combo.value1"></ig-combo></div>';
             TestBed.overrideComponent(TestComponent, {

tests/unit/igeditors/editors.spec.ts

@@ -550,7 +550,7 @@ export function main() {
 					fixture.detectChanges();
 					setTimeout(() => {
 						expect($(fixture.debugElement.nativeElement).find("#editor1").igTimePicker("displayValue")).toBe("5:50 AM");
-						$(fixture.debugElement.nativeElement).find("#editor1").focus().trigger("focus").val("06:00 PM").blur().trigger("blur");
+						$(fixture.debugElement.nativeElement).find("#editor1").focus().trigger("focus").val("06:00 AM").blur().trigger("blur");
 						setTimeout(() => {
 							expect(fixture.debugElement.componentInstance.val.getHours()).toBe(6);
 							expect(fixture.debugElement.componentInstance.val.getMinutes()).toBe(0);