Implemented readonly support for date and selectOne types #225

AtlasOfLivingAustralia · Jan 12, 2024 · ebd3b26 · ebd3b26
1 parent 1f4a668
commit ebd3b26
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 2 deletions.
diff --git a/grails-app/assets/javascripts/forms-knockout-bindings.js b/grails-app/assets/javascripts/forms-knockout-bindings.js
@@ -1252,5 +1252,23 @@
         }
     };
 
+    ko.bindingHandlers['disableClick'] = {
+        'update': function (element, valueAccessor) {
+            var value = ko.utils.unwrapObservable(valueAccessor());
+            if (value) {
+                this.eventHandler = $(element).on('mousedown.disableClick keydown.disableClick touchstart.disableClick', function(e) {
+                    e.preventDefault();
+                    return false;
+                });
+            }
+            else {
+                if (this.eventHandler) {
+                    $(element).off('mousedown.disableClick keydown.disableClick touchstart.disableClick');
+                }
+            }
+
+        }
+    };
+
 })();
 
diff --git a/grails-app/assets/javascripts/knockout-dates.js b/grails-app/assets/javascripts/knockout-dates.js
@@ -18,16 +18,22 @@
                 $element.data('date', initialDateStr);
             }
 
-            var defaults = {format: 'dd-mm-yyyy', autoclose: true};
+            var defaults = {format: 'dd-mm-yyyy', autoclose: true, enableOnReadonly: false};
             var options = _.defaults(allBindingsAccessor().datepickerOptions || {}, defaults);
 
+            $element.click(function() {
+                if ($element.prop('disabled') && $element.prop('readonly')) {
+                    e.preventDefault();
+                }
+            });
+
             //initialize datepicker with some optional options
             $element.datepicker(options);
 
             // if the parent container holds any element with the class 'open-datepicker'
             // then add a hook to do so
             $element.parent().find('.open-datepicker').click(function () {
-                if (!$element.prop('disabled')) {
+                if (!$element.prop('disabled') && !$element.prop('readonly')) {
                     $element.datepicker('show');
                 }
             });

diff --git a/src/main/groovy/au/org/ala/ecodata/forms/EditModelWidgetRenderer.groovy b/src/main/groovy/au/org/ala/ecodata/forms/EditModelWidgetRenderer.groovy
@@ -116,6 +116,9 @@ public class EditModelWidgetRenderer implements ModelWidgetRenderer {
 
         context.databindAttrs.add 'optionsCaption', '"Please select"'
         context.attributes.addSpan("form-control form-control-sm")
+        if (isReadOnly(context)) { // HTML Select elements don't support the readonly attribute so we add disabled.  This will break validation though.
+            context.databindAttrs.add('disableClick', 'true')
+        }
 
         context.writer <<  "<select${context.attributes.toString()} class=\"select form-control form-control-sm\" data-bind='${context.databindAttrs.toString()}'${context.validationAttr}></select>"
     }