diff --git a/src/components/editgrid/EditGrid.unit.js b/src/components/editgrid/EditGrid.unit.js index 90ddc9a7df..474490d16d 100644 --- a/src/components/editgrid/EditGrid.unit.js +++ b/src/components/editgrid/EditGrid.unit.js @@ -17,6 +17,7 @@ import { comp13, comp14, comp15, + comp16, withOpenWhenEmptyAndConditions, compOpenWhenEmpty, compWithCustomDefaultValue, @@ -1561,4 +1562,34 @@ describe('EditGrid Open when Empty', () => { }, 100); }).catch(done); }); + + it('Hide or show textfield and checkbox components inside of EditGrid conditionally', (done) => { + const formElement = document.createElement('div'); + Formio.createForm(formElement, comp16) + .then((form) => { + const editGrid = form.components[0]; + editGrid.addRow(); + const textField1 = editGrid.getComponent('textField1')[0]; + const checkBox1 = editGrid.getComponent('checkbox1')[0]; + checkBox1.setValue(true); + textField1.setValue('Some value'); + + setTimeout(() => { + const textField2 = editGrid.getComponent('textField2')[0]; + const checkBox2 = editGrid.getComponent('checkbox2')[0]; + assert.equal(textField2.visible, false); + assert.equal(checkBox2.visible, false); + textField1.setValue(''); + checkBox1.setValue(false); + + setTimeout(() => { + const textField2 = editGrid.getComponent('textField2')[0]; + const checkBox2 = editGrid.getComponent('checkbox2')[0]; + assert.equal(textField2.visible, true); + assert.equal(checkBox2.visible, true); + done(); + }, 300); + }, 300); + }).catch(done); + }); }); diff --git a/src/components/editgrid/fixtures/comp16.js b/src/components/editgrid/fixtures/comp16.js new file mode 100644 index 0000000000..851d2908f0 --- /dev/null +++ b/src/components/editgrid/fixtures/comp16.js @@ -0,0 +1,78 @@ +export default { + type: 'form', + display: 'form', + components: [ + { + label: 'Edit Grid', + tableView: false, + rowDrafts: false, + key: 'editGrid', + type: 'editgrid', + displayAsTable: false, + input: true, + components: [ + { + label: 'Text Field', + applyMaskOn: 'change', + tableView: true, + key: 'textField1', + type: 'textfield', + input: true + }, + { + label: 'Text Field', + applyMaskOn: 'change', + tableView: true, + key: 'textField2', + conditional: { + show: true, + conjunction: 'all', + conditions: [ + { + component: 'editGrid.textField1', + operator: 'isEmpty' + } + ] + }, + type: 'textfield', + input: true + }, + { + label: 'Checkbox', + tableView: false, + defaultValue: false, + key: 'checkbox1', + type: 'checkbox', + input: true + }, + { + label: 'Checkbox', + tableView: false, + defaultValue: false, + key: 'checkbox2', + conditional: { + show: true, + conjunction: 'all', + conditions: [ + { + component: 'editGrid.checkbox1', + operator: 'isEqual', + value: false + } + ] + }, + type: 'checkbox', + input: true + } + ] + }, + { + type: 'button', + label: 'Submit', + key: 'submit', + disableOnInvalid: true, + input: true, + tableView: false + } + ], +}; diff --git a/src/components/editgrid/fixtures/index.js b/src/components/editgrid/fixtures/index.js index 007b3841ec..343f045a57 100644 --- a/src/components/editgrid/fixtures/index.js +++ b/src/components/editgrid/fixtures/index.js @@ -13,7 +13,8 @@ import comp12 from './comp12'; import comp13 from './comp13'; import comp14 from './comp14'; import comp15 from './comp15'; +import comp16 from './comp16'; import withOpenWhenEmptyAndConditions from './comp-with-conditions-and-openWhenEmpty'; import compOpenWhenEmpty from './comp-openWhenEmpty'; import compWithCustomDefaultValue from './comp-with-custom-default-value'; -export { comp1, comp2, comp3, comp10, comp11, comp12, comp13, comp14, comp15, comp4, comp5, comp6, comp7, comp8, comp9, compOpenWhenEmpty, withOpenWhenEmptyAndConditions, compWithCustomDefaultValue }; +export { comp1, comp2, comp3, comp10, comp11, comp12, comp13, comp14, comp15, comp16, comp4, comp5, comp6, comp7, comp8, comp9, compOpenWhenEmpty, withOpenWhenEmptyAndConditions, compWithCustomDefaultValue }; diff --git a/src/utils/conditionOperators/IsEmptyValue.js b/src/utils/conditionOperators/IsEmptyValue.js index d1c280680f..222b342d7f 100644 --- a/src/utils/conditionOperators/IsEmptyValue.js +++ b/src/utils/conditionOperators/IsEmptyValue.js @@ -19,7 +19,7 @@ export default class IsEmptyValue extends ConditionOperator { if (instance && instance.root) { const conditionTriggerComponent = instance.root.getComponent(conditionComponentPath); - return conditionTriggerComponent ? conditionTriggerComponent.isEmpty() : isEmptyValue; + return conditionTriggerComponent?.isEmpty ? conditionTriggerComponent.isEmpty() : isEmptyValue; } return isEmptyValue;