MultiSelect issue with updating observable array fixed

riganti · Feb 19, 2025 · 85c44ca · 85c44ca
1 parent 7972151
commit 85c44ca
Show file tree

Hide file tree

Showing 6 changed files with 103 additions and 59 deletions.
diff --git a/src/Framework/Framework/Resources/Scripts/knockout-latest.debug.js b/src/Framework/Framework/Resources/Scripts/knockout-latest.debug.js
@@ -5117,6 +5117,9 @@ ko.bindingHandlers['selectedOptions'] = {
                 previousScrollTop = element.scrollTop;
 
             if (newValue && typeof newValue.length == "number") {
+                // touch all array elements
+                ko.utils.arrayForEach(newValue, ko.unwrap);
+
                 ko.utils.arrayForEach(element.getElementsByTagName("option"), function(node) {
                     var isSelected = ko.utils.arrayIndexOf(newValue, ko.selectExtensions.readValue(node), true) >= 0;
                     if (node.selected != isSelected) {      // This check prevents flashing of the select element in IE

diff --git a/src/Framework/Framework/Resources/Scripts/knockout-latest.js b/src/Framework/Framework/Resources/Scripts/knockout-latest.js
diff --git a/src/Samples/Common/ViewModels/ControlSamples/MultiSelect/MultiSelectViewModel.cs b/src/Samples/Common/ViewModels/ControlSamples/MultiSelect/MultiSelectViewModel.cs
@@ -1,17 +1,28 @@
 using System.Collections.Generic;
+using System;
 
 namespace DotVVM.Samples.Common.ViewModels.ControlSamples.MultiSelect
 {
-    public class MultiSelectViewModel
-    {
-        public IEnumerable<string> SelectedValues { get; set; }
-        public IEnumerable<string> Values => new[] { "Praha", "Brno", "Napajedla" };
+	public class MultiSelectViewModel
+	{
+		public IEnumerable<string> SelectedValues { get; set; }
+		public IEnumerable<string> Values => new[] { "Praha", "Brno", "Napajedla" };
 
-        public int ChangedCount { get; set; }
+		public int ChangedCount { get; set; }
 
-        public void OnSelectionChanged()
-        {
-            ChangedCount++;
+		public void OnSelectionChanged()
+		{
+			ChangedCount++;
+		}
+
+		public void ChangeSelection()
+		{
+			SelectedValues = ["Brno", "Napajedla"];
+		}
+
+		public void ChangeSelectionHardcoded()
+		{
+            SelectedValues = ["2", "3"];
         }
     }
 }
diff --git a/src/Samples/Common/Views/ControlSamples/MultiSelect/binded.dothtml b/src/Samples/Common/Views/ControlSamples/MultiSelect/binded.dothtml
@@ -25,5 +25,7 @@
         </dot:Repeater>
     </div>
     <dot:Literal Text="{value: ChangedCount}" data-ui="changed-count"></dot:Literal>
+
+    <dot:Button data-ui="change-from-server" Text="Set from server" Click="{command: ChangeSelection()}" />
 </body>
 </html>
diff --git a/src/Samples/Common/Views/ControlSamples/MultiSelect/hardcoded.dothtml b/src/Samples/Common/Views/ControlSamples/MultiSelect/hardcoded.dothtml
@@ -26,5 +26,7 @@
         </dot:Repeater>
     </div>
     <dot:Literal Text="{value: ChangedCount}" data-ui="changed-count"></dot:Literal>
+
+    <dot:Button data-ui="change-from-server" Text="Set from server" Click="{command: ChangeSelectionHardcoded()}" />
 </body>
 </html>
diff --git a/src/Samples/Tests/Tests/Control/MultiSelectTests.cs b/src/Samples/Tests/Tests/Control/MultiSelectTests.cs
@@ -36,6 +36,19 @@ public void Control_MultiSelect_Bound()
                 multiselect.Children[0].Click();
                 multiselect.Children[1].Click();
                 AssertUI.InnerTextEquals(selectedValues, "Napajedla");
+
+                // select first two options
+                multiselect.Children[0].Click();
+                multiselect.Children[1].Click();
+                multiselect.Children[2].Click();
+                AssertUI.InnerTextEquals(selectedValues, "Praha Brno");
+
+                // change selection from the server
+                browser.First("change-from-server", SelectByDataUi).Click();
+                AssertUI.IsNotSelected(multiselect.Children[0]);
+                AssertUI.IsSelected(multiselect.Children[1]);
+                AssertUI.IsSelected(multiselect.Children[2]);
+                AssertUI.InnerTextEquals(selectedValues, "Brno Napajedla");
             });
         }
 
@@ -63,6 +76,19 @@ public void Control_MultiSelect_Hardcoded()
                 multiselect.Children[0].Click();
                 multiselect.Children[1].Click();
                 AssertUI.InnerTextEquals(selectedValues, "3");
+
+                // select first two options
+                multiselect.Children[0].Click();
+                multiselect.Children[1].Click();
+                multiselect.Children[2].Click();
+                AssertUI.InnerTextEquals(selectedValues, "1 2");
+
+                // change selection from the server
+                browser.First("change-from-server", SelectByDataUi).Click();
+                AssertUI.IsNotSelected(multiselect.Children[0]);
+                AssertUI.IsSelected(multiselect.Children[1]);
+                AssertUI.IsSelected(multiselect.Children[2]);
+                AssertUI.InnerTextEquals(selectedValues, "2 3");
             });
         }
     }