From 6a893cbc6ede556c11458e3363620a63f45caabd Mon Sep 17 00:00:00 2001
From: Anna Dabrowska <dabrowska@cosmocode.de>
Date: Thu, 5 Dec 2024 18:34:18 +0100
Subject: [PATCH] Enable readonly state for select fields

Simulates disabled state but keeps input values in the form
---
 doc/formelements.md |  2 +-
 public/css/app.css  | 13 ++++++++++++-
 view/checklist.twig |  4 ++--
 view/dropdown.twig  |  2 +-
 view/radioset.twig  |  4 ++--
 5 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/doc/formelements.md b/doc/formelements.md
index 5504cd1..dba8d2f 100644
--- a/doc/formelements.md
+++ b/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>:
diff --git a/public/css/app.css b/public/css/app.css
index d33ab2e..03cf007 100644
--- a/public/css/app.css
+++ b/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
  */
diff --git a/view/checklist.twig b/view/checklist.twig
index eaa3966..5dadc0e 100644
--- a/view/checklist.twig
+++ b/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' -%}
diff --git a/view/dropdown.twig b/view/dropdown.twig
index b580a36..f2f5ceb 100644
--- a/view/dropdown.twig
+++ b/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' }}>
 
diff --git a/view/radioset.twig b/view/radioset.twig
index 595350e..f96567e 100644
--- a/view/radioset.twig
+++ b/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 }}