Enable readonly state for select fields

Simulates disabled state but keeps input values in the form

doc/formelements.md

@@ -152,7 +152,7 @@ They are required by default.
 
 Options:
 * `validation` _(optional)_ - used to apply [validation](validation.md)
-* `readonly` _(optional)_ - Disables user input. Available only for fields where users type in values. Useful when values are pre-filled from `values.yaml`
+* `readonly` _(optional)_ - Disables user input but keeps any pre-filled values intact. Fields where users type in values get an actual HTML attribute `readonly`. Select fields like dropdowns and radios, where this property is not allowed, are visually toned down and are non-interactive. Useful when values are pre-filled from `values.yaml`
 
 ```yaml
   <id>:

public/css/app.css

@@ -302,12 +302,23 @@ div.label-smaller {
 }
 
 /**
- * Readonly field looking more a like disabled one
+ * Readonly field looking more like disabled ones,
+ * simulate readonly look for inputs that have no HTML readonly attribute
  */
 input[readonly] {
     cursor: not-allowed;
 }
 
+select.readonly-select {
+    pointer-events:none;
+    background: var(--bulma-input-disabled-placeholder-color);
+}
+
+.readonly-choices {
+    pointer-events:none;
+    opacity: 0.7;
+}
+
 /**
  ** Bulma overrides
  */

view/checklist.twig

@@ -13,14 +13,14 @@
         <div class="control">
             <div class="grouped-form-elements" id="{{ id }}">
                 {%- for choice in choices -%}
-                    <label class="checkbox {{ labelsmall is not empty ? 'label-smaller' }}">
+                    <label class="checkbox {{ labelsmall is not empty ? 'label-smaller' }}{% if is_readonly%} readonly-choices{% endif %}">
                         <input
                                 type="checkbox"
                                 id="{{ id~'['~loop.index0~']' }}"
                                 name="{{ id~'['~loop.index0~']' }}"
                                 value="{{ choice }}"
                                 {{ choice in value ? 'checked' }}
-                                class="checkbox-input form-input" />
+                                class="checkbox-input form-input{% if is_readonly%} readonly-choices{% endif %}" />
                                 {{- transformed_choices[loop.index0] | raw -}}
                     </label>
                     {%- if alignment is defined and alignment == 'vertical' -%}

view/dropdown.twig

@@ -15,7 +15,7 @@
                 <select
                         id="{{ id }}"
                         name="{{ id }}[]"
-                        class="form-input"
+                        class="form-input{% if is_readonly%} readonly-select{% endif %}"
                         {{ size is defined ? 'size='~size }}
                         {{ multiselect is defined and multiselect ? 'multiple' }}>
 

view/radioset.twig

@@ -13,12 +13,12 @@
         <div class="control">
             <div class="grouped-form-elements" id="{{ id }}">
                 {%- for choice in choices -%}
-                    <label class="radio {{ labelsmall is not empty ? 'label-smaller' }}">
+                    <label class="radio {{ labelsmall is not empty ? 'label-smaller' }}{% if is_readonly%} readonly-choices{% endif %}">
                         <input
                                 type="radio"
                                 id="{{ id~'['~loop.index0~']' }}"
                                 name="{{ id }}"
-                                class="form-input"
+                                class="form-input{% if is_readonly%} readonly-choices{% endif %}"
                                 value="{{ choice }}"
                                 {{ value == choice ? 'checked' }} />
                         {{ choice }}