Skip to content

Commit

Permalink
logic events that trigger actions that set hidden will set hidden of …
Browse files Browse the repository at this point in the history
…original component
  • Loading branch information
ZenMasterJacob20011 committed Jul 5, 2024
1 parent 12a035b commit 625f434
Show file tree
Hide file tree
Showing 4 changed files with 109 additions and 5 deletions.
4 changes: 4 additions & 0 deletions src/components/_classes/component/Component.js
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
23 changes: 19 additions & 4 deletions src/components/_classes/component/Component.unit.js
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand Down Expand Up @@ -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);
});
});
});
84 changes: 84 additions & 0 deletions src/components/_classes/component/fixtures/comp7.js
Original file line number Diff line number Diff line change
@@ -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
}
]
}
3 changes: 2 additions & 1 deletion src/components/_classes/component/fixtures/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 };

0 comments on commit 625f434

Please sign in to comment.