Fix for #51

Author: chrisala

grails-app/assets/javascripts/forms-knockout-bindings.js

@@ -531,8 +531,15 @@
         };
     };
 
+    /**
+     * Provides support for applying https://select2.org for options selection.
+     * The value supplied to this binding will be passed through as options to the select2
+     * widget.  It is expected this binding will be used in conjunction with the value binding
+     * so that updates to the view model will be reflected in the select 2 component.
+     * @type {{init: ko.bindingHandlers.select2.init}}
+     */
     ko.bindingHandlers.select2 = {
-        init: function(element, valueAccessor) {
+        init: function(element, valueAccessor, allBindings) {
             var defaults = {
                 placeholder:'Please select...',
                 dropdownAutoWidth:true,
@@ -547,6 +554,15 @@
             }
             $(element).select2(options);
             applySelect2ValidationCompatibility(element);
+
+            // Listen for changes to the view model and ensure the select2 component is
+            // updated to reflect the change.
+            var valueBinding = allBindings.get('value');
+            if (ko.isObservable(valueBinding)) {
+                valueBinding.subscribe(function() {
+                    $(element).trigger('change');
+                });
+            }
         }
     };
 

test/functional/au/org/ala/ecodata/forms/Select2Spec.groovy

@@ -13,15 +13,66 @@ class Select2Spec extends GebReportingSpec {
         title == "Preview Select2 example"
         page.model != null
 
+        and: "configured placeholders are displayed"
+        def item1 = page.findFieldByModelName("item1")
+        item1.next().find(".select2-selection__placeholder").text() == "Please select..."
+        def item2 = page.findFieldByModelName("item2")
+        item2.next().find(".select2-selection__placeholder").text() == "Custom placeholder"
+        def item3 = page.findFieldByModelName("item3")
+        item3.next().find("input.select2-search__field").attr("placeholder") == "Custom placeholder"
+        def item4 = page.findFieldByModelName("item4")
+        item4.next().find(".select2-selection__placeholder").text() == "Please select..."
+        def item5 = page.findFieldByModelName("item5")
+        item5.next().find(".select2-selection__placeholder").text() == "Custom placeholder"
+        def item6 = page.findFieldByModelName("item6")
+        item6.next().find("input.select2-search__field").attr("placeholder") == "Select all that apply..."
+
         when: "We enter data into the fields"
         page.findFieldByModelName("item1").value("value 1")
         page.findFieldByModelName("item2").value("value 2")
         page.findFieldByModelName("item3").value(["value 1", "value 3"])
+        page.findFieldByModelName("item4").value("this is a much longer value")
+        page.findFieldByModelName("item5").value("value 2")
+        page.findFieldByModelName("item6").value(["value 2", "value 3"])
+
 
         then: "The model has been updated with the selected values"
         page.model.data.item1 == "value 1"
         page.model.data.item2 == "value 2"
         page.model.data.item3 == ["value 1", "value 3"]
+        page.model.data.nested[0].item4 == "this is a much longer value"
+        page.model.data.nested[0].item5 == "value 2"
+        page.model.data.nested[0].item6 == ["value 2", "value 3"]
+    }
+
+    def "Select2 components will display existing data in the model when the page loads"() {
+        when:
+        to ([name:'select2Example', data:'select2-view-data'], PreviewPage)
+
+        then:
+        title == "Preview Select2 example"
+        page.model != null
+
+        and: "The values from the data model are displayed"
+
+        page.findFieldByModelName("item1").next().find("span.select2-selection__rendered").text().contains("value 1")
+        page.findFieldByModelName("item2").next().find("span.select2-selection__rendered").text().contains("value 2")
+        page.findFieldByModelName("item3").next().find("li.select2-selection__choice")*.attr("title") == ["value 1", "value 3"]
+        page.findFieldByModelName("item4").next().find("span.select2-selection__rendered")*.attr("title") == ["this is a much longer value", "value 3"]
+        page.findFieldByModelName("item5").next().find("span.select2-selection__rendered")*.attr("title") == ["value 2", "value 1"]
+        page.findFieldByModelName("item6").next().find("li.select2-selection__choice")*.attr("title") == ["value 3", "value 1", "value 2", "value 3", "tag"]
+
+
+        then: "The model hasn't been changed"
+        page.model.data.item1 == "value 1"
+        page.model.data.item2 == "value 2"
+        page.model.data.item3 == ["value 1", "value 3"]
+        page.model.data.nested[0].item4 == "this is a much longer value"
+        page.model.data.nested[0].item5 == "value 2"
+        page.model.data.nested[0].item6 == ["value 3"]
+        page.model.data.nested[1].item4 == "value 3"
+        page.model.data.nested[1].item5 == "value 1"
+        page.model.data.nested[1].item6 == ["value 1", "value 2", "value 3", "tag"]
 
     }
 
@@ -36,6 +87,9 @@ class Select2Spec extends GebReportingSpec {
         $("span[data-bind*=item1").text() == "value 1"
         $("span[data-bind*=item2").text() == "value 2"
         $("span[data-bind*=item3").text() == "value 1, value 3"
+        $("span[data-bind*=item4")*.text() == ["this is a much longer value", "value 3"]
+        $("span[data-bind*=item5")*.text() == ["value 2", "value 1"]
+        $("span[data-bind*=item6")*.text() ==  ["value 3", "value 1, value 2, value 3, tag"]
 
     }
 }