fix(combo knockout): update ds when new ds length is the same #1852

IgniteUI · Dec 7, 2018 · 86e4590 · 86e4590
1 parent e7db5e7
commit 86e4590
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 38 deletions.
diff --git a/src/js/extensions/infragistics.ui.combo.knockout-extensions.js b/src/js/extensions/infragistics.ui.combo.knockout-extensions.js
@@ -55,6 +55,49 @@
         }
     }
 
+    function applyListItemsBindings(valueAccessor) {
+        var combo = valueAccessor().combo,
+            $comboList = combo.igCombo("listItems"),
+            options = valueAccessor().options,
+            dataSource = ko.utils.unwrapObservable(valueAccessor().dataSource),
+            i;
+         if (dataSource) {
+            for (i = 0; i < dataSource.length; i++) {
+                if (ko.isObservable(dataSource[ i ])) {
+                    ko.applyBindingsToNode($comboList[ i ], {
+                        igComboItem: {
+                            combo: combo,
+                            value: dataSource[ i ],
+                            index: i,
+                            options: options
+                        }
+                    }, dataSource[ i ]);
+                }
+            }
+        }
+    }
+
+    function isNewDataSource(valueAccessor) {
+        var combo = $(valueAccessor().combo),
+            listLength = combo.igCombo("listItems").length,
+            valueKey = combo.igCombo("option", "valueKey"),
+            viewModelDataSource = ko.utils.unwrapObservable(valueAccessor().dataSource),
+            comboDataSource = ko.utils.unwrapObservable(combo.igCombo("option", "dataSource").data()),
+            index;
+             if (listLength === viewModelDataSource.length && valueKey !== undefined) {
+            comboDataSource =
+                ko.utils.unwrapObservable(combo.igCombo("option", "dataSource").data());
+            for (index = 0; index < comboDataSource.length; index++) {
+                if (comboDataSource[ index ][ valueKey ] !==
+                        viewModelDataSource[ index ][ valueKey ]) {
+                    return true;
+                }
+            }
+            return false;
+       }
+       return true;
+   }
+
     ko.bindingHandlers.igCombo = {
         init: function (element, valueAccessor) {
             var combo = $(element),
@@ -148,53 +191,19 @@
 
     ko.bindingHandlers.igComboList = {
         init: function (element, valueAccessor) {
-            var combo = valueAccessor().combo,
-				$comboList = combo.igCombo("listItems"),
-				options = valueAccessor().options,
-                dataSource = ko.utils.unwrapObservable(valueAccessor().dataSource),
-				i;
-
-            if (dataSource) {
-                for (i = 0; i < dataSource.length; i++) {
-                    if (ko.isObservable(dataSource[ i ])) {
-                        ko.applyBindingsToNode($comboList[ i ], {
-                            igComboItem: {
-                                combo: combo,
-                                value: dataSource[ i ],
-                                index: i,
-                                options: options
-                            }
-                        }, dataSource[ i ]);
-                    }
-                }
-            }
+            applyListItemsBindings(valueAccessor);
         },
         update: function (element, valueAccessor) {
             var combo = $(valueAccessor().combo),
 				listLength = combo.igCombo("listItems").length,
 				options = valueAccessor().options,
                 dataSource = ko.utils.unwrapObservable(valueAccessor().dataSource),
                 dropDownScroller = combo.data("igCombo")._options.$dropDownScrollCont,
-                lastScrollTop = dropDownScroller ? dropDownScroller.scrollTop() : 0,
-				$comboList, i;
+                lastScrollTop = dropDownScroller ? dropDownScroller.scrollTop() : 0;
 
-            if (listLength !== dataSource.length) {
+            if (isNewDataSource(valueAccessor)) {
                 combo.one("igcomboitemsrendered", function () {
-                    $comboList = combo.igCombo("listItems");
-                    if (dataSource) {
-                        for (i = 0; i < dataSource.length; i++) {
-                            if (ko.isObservable(dataSource[ i ])) {
-                                ko.applyBindingsToNode($comboList[ i ], {
-                                    igComboItem: {
-                                        combo: combo,
-                                        value: dataSource[ i ],
-                                        index: i,
-                                        options: options
-                                    }
-                                }, dataSource[ i ]);
-                            }
-                        }
-                    }
+                    applyListItemsBindings(valueAccessor);
                     selectItems(combo, valueAccessor().selectedItems);
                 });
 

diff --git a/tests/unit/knockout/combo/combo-test.js b/tests/unit/knockout/combo/combo-test.js
@@ -55,6 +55,8 @@ QUnit.module("Knockout unit tests for igComboEditor", {
 		this.nameList = ko.observableArray(tmp);		
 		this.selectedItemsValue = ko.observableArray(["value2"]);
 		this.selectedItemsWhole = ko.observableArray([{ name: "name2", value: "value2" }]);
+
+		this.oneItemData = ko.observable([{id: 0, name: 'Item 0'}]);
 	},
 	applyBindings: function () {
 		ko.applyBindings(this.model, this.qunitFixture[0]);
@@ -452,6 +454,18 @@ QUnit.test("[ID13] Combo editor test big data", function (assert) {
 	assert.ok(end - start < 5000, "Binding big data should take less than 5 seconds");
 });
 
+QUnit.test('Changing data source with data source with the same length but different items', function (assert) {
+	assert.expect(1);
+	var comboCont = $(this.divTag).appendTo(this.qunitFixture);
+
+	comboCont.append($("<span id='combo'></span>").attr("data-bind", "igCombo: { dataSource: oneItemData, textKey: 'name', valueKey: 'id', width: '200', mode: 'dropdown', enableClearButton: false }")).appendTo(".test-container");
+	ko.cleanNode(comboCont[0]);
+	ko.applyBindings(this.model, comboCont[0]);
+	this.model.oneItemData([{id: 6, name: "Item 6"}]);
+	assert.equal($("#combo").igCombo("option", "dataSource").data()[0].id, 6, "data source not updated");
+	comboCont.remove();
+});
+