Fix for #12 - Coral Select with multiple values (#13)

Co-authored-by: Brounsr, Robin <[email protected]> Co-authored-by: Stefan Seifert <[email protected]>
wcm-io · Mar 20, 2024 · 22ef678 · 22ef678
1 parent 46e8663
commit 22ef678
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 9 deletions.
diff --git a/changes.xml b/changes.xml
@@ -24,6 +24,9 @@
   <body>
 
     <release version="1.10.4" date="not released">
+      <action type="update" dev="rubnig" issue="13">
+        Granite UI Show/Hide: Support multiple options for Coral select component.
+      </action>
       <action type="fix" dev="sseifert" issue="10">
         DummyPageContext: Wrap existing servlet response writer for provided JspWriter.
       </action>

diff --git a/src/main/webapp/app-root/clientlibs/io.wcm.ui.granite.showhidedialogfields/js/showhide.js b/src/main/webapp/app-root/clientlibs/io.wcm.ui.granite.showhidedialogfields/js/showhide.js
@@ -44,9 +44,9 @@
     });
   }
 
-  function includesCommaSeparated(valuesString, value) {
+  function includesCommaSeparated(valuesString, values) {
     if (valuesString) {
-      return valuesString.split(",").find(item => item === value) != undefined
+      return valuesString.split(",").find(item => values.includes(item)) != undefined;
     }
     return false
   }
@@ -75,25 +75,28 @@
       $target = $(target);
     }
 
-    var value;
+    var values = [];
     if ($element.is("coral-checkbox") && typeof component.checked !== "undefined") {
-      value = component.checked ? "true" : "false";
+      values.push(component.checked ? "true" : "false");
     }
     else if ($element.is("coral-select")) {
-      value = $element.children('coral-select-item[selected]').val() || "";
+      $element.children("coral-select-item[selected]").each(function(index, element) {
+        var value = $(element).val() || ""
+        values.push(value);
+      });
     }
     else if (typeof component.value !== "undefined") {
-      value = component.value;
+      values.push(component.value);
     }
     else if (typeof component.getValue === "function") {
-      value = component.getValue();
+      values.push(component.getValue());
     }
 
     $target.each(function(index, element) {
       // make sure all unselected target elements are hidden.
       // unhide the target element that contains the selected value as data-showhidetargetvalue attribute
-      var show = element && (element.dataset.showhidetargetvalue === value
-          || includesCommaSeparated(element.dataset.showhidetargetvalues, value));
+      var show = element && (values.includes(element.dataset.showhidetargetvalue)
+          || includesCommaSeparated(element.dataset.showhidetargetvalues, values));
       setVisibilityAndHandleFieldValidation($(element), show);
     });
   }