FIO-8270: panel component closing on logic event trigger

src/components/_classes/component/Component.js

@@ -3870,6 +3870,10 @@ export default class Component extends Element {
 
               // Change states which won't be recalculated during redrawing
               if (this.visible !== visible) {
+                // If the logic is triggered by an event and the action sets the hidden state then the original
+                // component definition must be changed so that the components hidden state does not get flipped back by
+                // the fieldLogic function
+                this.originalComponent.hidden = !visible;
                 this.visible = visible;
               }
               if (this.disabled !== disabled) {

src/components/_classes/component/Component.unit.js

@@ -5,11 +5,8 @@ import sinon from 'sinon';
 import Component from './Component';
 import Webform from '../../../Webform';
 import Harness from '../../../../test/harness';
-import { comp1, comp6 } from './fixtures';
+import { comp1, comp4, comp3, comp5, comp6, comp7 } from './fixtures';
 import _merge from 'lodash/merge';
-import comp3 from './fixtures/comp3';
-import comp4 from './fixtures/comp4';
-import comp5 from './fixtures/comp5';
 
 describe('Component', () => {
   it('Should create a Component', (done) => {
@@ -394,4 +391,22 @@ describe('Component', () => {
       },200);
     }).catch(done);
   });
+
+  it('Should set the state of hidden permanently if a logic event action sets the hidden state', (done) => {
+    Formio.createForm(document.createElement('div'), comp7, {}).then((form) => {
+      const showButtonComponent = form.getComponent('show');
+      const textFieldComponent = form.getComponent('textField1');
+      const panelComponent = form.getComponent('panel');
+      showButtonComponent.refs.button.click();
+      setTimeout(()=>{
+        textFieldComponent.refs.input[0].value = "test"
+        textFieldComponent.refs.input[0].dispatchEvent(new Event('input'));
+        setTimeout(()=>{
+          assert.equal(panelComponent.component.hidden, false);
+          assert.equal(panelComponent.visible, true);
+          done();
+        },400);
+      },200);
+    });
+  });
 });

src/components/_classes/component/fixtures/comp7.js

@@ -0,0 +1,84 @@
+export default {
+  components: [
+    {
+      "label": "Show",
+      "action": "event",
+      "showValidations": false,
+      "tableView": false,
+      "key": "show",
+      "type": "button",
+      "event": "show",
+      "input": true
+    },
+    {
+      "label": "Hide",
+      "action": "event",
+      "showValidations": false,
+      "theme": "danger",
+      "tableView": false,
+      "key": "hide",
+      "type": "button",
+      "event": "hide",
+      "input": true
+    },
+    {
+      "collapsible": true,
+      "hidden": true,
+      "key": "panel",
+      "logic": [
+        {
+          "name": "ShowPanel",
+          "trigger": {
+            "type": "event",
+            "event": "show"
+          },
+          "actions": [
+            {
+              "name": "Show",
+              "type": "property",
+              "property": {
+                "label": "Hidden",
+                "value": "hidden",
+                "type": "boolean"
+              },
+              "state": false
+            }
+          ]
+        },
+        {
+          "name": "HidePanel",
+          "trigger": {
+            "type": "event",
+            "event": "hide"
+          },
+          "actions": [
+            {
+              "name": "Hide",
+              "type": "property",
+              "property": {
+                "label": "Hidden",
+                "value": "hidden",
+                "type": "boolean"
+              },
+              "state": true
+            }
+          ]
+        }
+      ],
+      "type": "panel",
+      "label": "Panel",
+      "collapsed": false,
+      "input": false,
+      "tableView": false,
+      "components": []
+    },
+    {
+      "label": "Text Field",
+      "applyMaskOn": "change",
+      "tableView": true,
+      "key": "textField1",
+      "type": "textfield",
+      "input": true
+    }
+  ]
+}

src/components/_classes/component/fixtures/index.js

@@ -4,4 +4,5 @@ import comp3 from './comp3';
 import comp4 from './comp4';
 import comp5 from './comp5';
 import comp6 from './comp6';
-export { comp1, comp2, comp3, comp4, comp5, comp6 };
+import comp7 from './comp7';
+export { comp1, comp2, comp3, comp4, comp5, comp6, comp7 };