Handle dropdown state on initial render

Make sure to set first option as value, if this is what is displayed on first view. Essential for conditional visibility checks before state gets updated.

Author: annda

cypress/e2e/visible.cy.js

@@ -3,6 +3,10 @@ describe('Conditional Visibility Tests', () => {
         cy.visit('/visible');
     });
 
+    afterEach(() => {
+        cy.clearOPFS();
+    });
+
     it('should show/hide text fields based on input conditions', () => {
         // Initially, the third field should be hidden
         cy.get('[name="fset1.text3"]').should('not.exist');
@@ -53,6 +57,10 @@ describe('Conditional Visibility Tests', () => {
         cy.get('[name="fset2.text4"]').should('not.exist');
     });
 
+    it('should show field based on initial value of dropdown, state not changed yet', () => {
+        cy.get('markdown-component').contains('I am visible when first dropdown says').should('be.visible');
+    });
+
     it('should show/hide fields based on mathematical conditions', () => {
         // Initially, the secret number field should be hidden
         cy.get('[name="fset3.num3"]').should('not.exist');

cypress/yaml/visible/config.yaml

@@ -34,6 +34,10 @@ form:
           - hide
           - show
           - unhide
+      static1:
+        type: markdown
+        markdown: I am visible when first dropdown says **hide**
+        visible: fset2.drop1 == 'hide'
       text4:
         type: textinput
         label: "Sixth"

doc/conditional.md

@@ -1,6 +1,8 @@
 # Conditional visibility
 
-Visibility can be configured for most elements. The configuration option `visible` defines a condition that must be met if the elements is to be displayed.
+Visibility can be configured for most elements. The configuration option `visible` defines a condition that must be met if the element is to be displayed.
+
+**Current limitation:** at present all visibility checks are conducted just before an element is rendered for the first time and then on every state change - when some value is updated. So on initial form view, before any interactions, you can only query fields that come **before** your element. 
 
 ## YAML
 
@@ -33,6 +35,8 @@ visible: full.dotted.elementId + full.dotted.another.elementId > 100
 
 Fields contained in a table may not be dependent on other table fields. That would potentially break the table, because the columns would not be identical (some columns could have extra conditional fields).
 
+Also, field names in tables are created dynamically, so you cannot use them in visibility conditions. This affects conditional options in dropdowns, too. Their visibility may not depend on a field in a table.
+
 A field in a table can depend on a field outside the table. If the visibility condition is met, a new row will be displayed in all columns.
 
 ## Exception: Clone

doc/formelements.md

@@ -364,7 +364,7 @@ Representation of a select input.
 
 Options:
 * **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`!
+*  **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`! Refer to [Conditional visibility](conditional.md) for explanation and limitations.
 * `empty_label` _(optional)_ - a placeholder text shown if no value has been chosen (e.g. "Please select"). **Note:** this is not a real option and has no value that could be saved. In multiselect fields it is irrelevant and ignored.
 * `multiselect` _(optional)_ - enables selecting multiple options
 * `size` _(optional)_ - if multiselect is turned on this defines the number of rows shown, otherwise ignored

js_src/components/DropdownComponent.js

@@ -159,6 +159,11 @@ export class DropdownComponent extends BaseComponent {
             myState.value = config.default;
         }
 
+        // without empty_label config, first option is the value
+        if (!myState.value && !config.empty_label && !config.multiselect) {
+            myState.value = config.choices[0];
+        }
+
         if (config.multiselect) {
             myState.value = U.stateMultivalue(myState.value);