From 23a55aa6ed91b50fedb622fc925cf88d7e11978c Mon Sep 17 00:00:00 2001
From: Anna Dabrowska <dabrowska@cosmocode.de>
Date: Mon, 8 Jul 2024 09:25:05 +0200
Subject: [PATCH] Finish conditional choices

---
 doc/formelements.md | 23 ++++++++++++++++++++---
 public/js/toggle.js |  5 +++++
 view/dropdown.twig  |  2 +-
 3 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/doc/formelements.md b/doc/formelements.md
index 3f7dd21..608055a 100644
--- a/doc/formelements.md
+++ b/doc/formelements.md
@@ -308,11 +308,12 @@ Options:
 Representation of a select input.  
 
 Options:
-* `choices` _(required)_ - defines available options. Markdown ist supported.
+* **EITHER** `choices` _(optionally required)_ - defines available options. Markdown is supported.
+*  **OR** `conditional_choices` _(optionally required)_ - defines options available if a condition is met (depending on the value of another form field). This option has priority over `choices`!
 * `empty_label` _(optional)_ - a placeholder text shown if no value was chosen (e.g. "Please select"). **Note:** this is not a real option and has no value that could be saved.
 * `multiselect` _(optional)_ - enables selecting multiple options
 * `size` _(optional)_ - if multiselect is turned on this defines the number of rows shown, otherwise ignored
-* `default` _(optional)_ : Preselects a choice. This is just triggered if the form was never saved before. **Preselect in toggles are not supported yet.** **BREAKING CHANGE until version 1.0.4 this parameter was used for empty_label**
+* `default` _(optional)_ : Preselects a choice. This is only triggered if the form was never saved before. **Preselect in toggles are not supported yet.**
 
 ```yaml
   <id>:
@@ -327,9 +328,25 @@ Options:
       - second choice
 ```
 
+```yaml
+    conditional_choices:
+      -
+        field: fieldsetLevel1.FieldsetLevel2.myFieldname
+        value: 'Value A'
+        choices:
+          - A1
+          - A2
+      - field: fieldsetLevel1.FieldsetLevel2.myFieldname
+        value: 'Value B'
+        choices:
+          - 10 B
+          - 20 B
+          - 30 B
+```
+
 ### Checklist
 
-Representation of a checkbox group.  
+Representation of a checkbox group.
 
 Options:
 * `alignment` _(optional)_ - sets the alignment of the checkboxes, possible values are `vertical` or `horizontal` (default)
diff --git a/public/js/toggle.js b/public/js/toggle.js
index e388cef..744810c 100644
--- a/public/js/toggle.js
+++ b/public/js/toggle.js
@@ -13,8 +13,10 @@ export function initToggles() {
     function resetConditional(option, parent, triggerElement, toggleValue) {
         if (toggleValue.includes(getFormInputValue(triggerElement))) {
             option.removeAttribute('disabled');
+            option.removeAttribute('hidden');
         } else {
             option.setAttribute('disabled', true);
+            option.setAttribute('hidden', true);
             option.setAttribute('selected', false);
             option.setAttribute('checked', false);
         }
@@ -46,6 +48,9 @@ export function initToggles() {
 
         if (toggleValue.includes(getFormInputValue(triggerElement))) {
             option.removeAttribute('disabled');
+            option.removeAttribute('hidden');
+        } else {
+            option.removeAttribute('selected');
         }
 
         triggerElement.addEventListener('change', function(e) {
diff --git a/view/dropdown.twig b/view/dropdown.twig
index 81eca67..b580a36 100644
--- a/view/dropdown.twig
+++ b/view/dropdown.twig
@@ -24,7 +24,7 @@
                     {% if conditional_choices is not empty %}
                     {%- for select in conditional_choices -%}
                         {%- for choice in select.choices -%}
-                            <option disabled {{ choice in value ? 'selected' }} data-toggle-id="{{ select.field}}" data-toggle-value="{{ select.value }}">{{ choice }}</option>
+                            <option hidden disabled {{ choice in value ? 'selected' }} data-toggle-id="{{ select.field}}" data-toggle-value="{{ select.value }}">{{ choice }}</option>
                         {%- endfor -%}
                     {%- endfor -%}
                     {% else %}