Implemented readonly support for date and selectOne types #225

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');
+ }
+ }
+
+ }
+ };
+
 })();
 

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');
  }
  });

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>"
  }