Merge pull request #180 from d-georgiev-91/ig-combo-issue-172

Fixed igCombo bug #172 - model does not get updated when multiple sel…

Author: mpavlinov

src/igniteui.angular2.ts

@@ -2319,7 +2319,9 @@ export class IgComboComponent extends IgControlBase<IgCombo> implements ControlV
 		jQuery(this._el).on(this._widgetName.toLowerCase() + "selectionchanged", function (evt, ui) {
 			var items = ui.items;
 			if (items.length > 0 && that._model) {
-				that._model.viewToModelUpdate(items[0].data[that._config.valueKey]);
+				that._model.viewToModelUpdate(items.map(function(item) {
+					return item.data[that._config.valueKey];
+				}));
 			}
 		});
 		this._dataSource = jQuery.extend(true, [], this._config.dataSource);

tests/unit/igcombo/combo.spec.ts

@@ -82,7 +82,29 @@ export function main() {
                 $("#combo1").igCombo("select", elem, {}, true);
                 fixture.detectChanges();
                 setTimeout(function () {
-                    expect(fixture.componentInstance.combo.value1).toBe(1);
+                    expect(fixture.componentInstance.combo.value1).toEqual([1]);
+                    done();
+                }, 10);
+            });
+        });
+
+        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" [(options)]="optionsMultipleSelection" [changeDetectionInterval]="cdi" [(ngModel)]="combo.value1"></ig-combo></div>';
+            TestBed.overrideComponent(TestComponent, {
+                set: {
+                    template: template
+                }
+            });
+            TestBed.compileComponents().then(() => {
+                let fixture = TestBed.createComponent(TestComponent);
+                fixture.detectChanges();
+                var $firstThreeItems = $(".ui-igcombo-listitem:lt(3)");
+
+                $("#combo1").igCombo("select", $firstThreeItems, {}, true);
+
+                fixture.detectChanges();
+                setTimeout(function () {
+                    expect(fixture.componentInstance.combo.value1).toEqual([1, 2, 3]);
                     done();
                 }, 10);
             });
@@ -142,6 +164,7 @@ export function main() {
 })
 class TestComponent {
     private options: IgCombo;
+    private optionsMultipleSelection: IgCombo;
     public northwind: any;
     public combo: any;
     private comboID: string
@@ -158,6 +181,16 @@ class TestComponent {
             dataSource: this.northwind,
             width: "100%"
         };
+
+        this.optionsMultipleSelection = $.extend({
+            multiSelection: {
+                enabled: true,
+                addWithKeyModifier: false,
+                showCheckboxes: true,
+                itemSeparator: ', '
+            }
+        }, this.options);
+
         this.combo = {
             value1: 20
         }