Skip to content

Commit 1cc5d1b

Browse files
brendanbondbrendanbond
authored
Merge pull request #6201 from formio/sync-from-monorepo-pr-340
syncing commit from monorepo. PR: 340, Title: FIO-10396: Fixes an issue where data of conditionally shown nested form inside nested form inside DataGrid is not passed to the root form
2 parents e06b215 + d7d789b commit 1cc5d1b

File tree

6 files changed

+247
-4
lines changed

6 files changed

+247
-4
lines changed

‎src/components/datagrid/DataGrid.js‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -587,7 +587,13 @@ export default class DataGridComponent extends NestedArrayComponent {
587587
const formComp = getComponent(this.component.components, changed.component.key)
588588
_.set(formComp, 'components', changed.component.components);
589589
}
590-
this.triggerChange({ modified });
590+
// If we're in a nested form we need to ensure our changes are triggered upstream
591+
if (changed.instance.root?.id && (this.root?.id !== changed.instance.root.id)) {
592+
changed.instance.root.triggerChange(flags, changed, modified);
593+
}
594+
else {
595+
this.triggerChange({ modified });
596+
}
591597
}
592598

593599
let columnComponent;

‎test/unit/DataGrid.unit.js‎

Lines changed: 62 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,8 @@ import {
2929
withAllowCalculateOverride,
3030
twoWithAllowCalculatedOverride, withCheckboxes,
3131
withReorder,
32-
wizardWithDataGridWithNestedForm
32+
wizardWithDataGridWithNestedForm,
33+
dataGridWithNestedFormWithNestedForm, dataGridChildForm, dataGridGrandChildForm,
3334
} from './fixtures/datagrid';
3435

3536
describe('DataGrid Component', () => {
@@ -1173,6 +1174,12 @@ describe('Wizard Form with Grid with Nested Form validation', () => {
11731174
if (type === 'form' && method === 'get' && url.includes('6800c965a969b07fbd8d7077')) {
11741175
return Promise.resolve(_.cloneDeep(nestedForm));
11751176
}
1177+
if (type === 'form' && method === 'get' && url.includes('child')) {
1178+
return Promise.resolve(_.cloneDeep(dataGridChildForm));
1179+
}
1180+
if (type === 'form' && method === 'get' && url.includes('grandChild')) {
1181+
return Promise.resolve(_.cloneDeep(dataGridGrandChildForm));
1182+
}
11761183
return Promise.resolve();
11771184
};
11781185
});
@@ -1197,4 +1204,58 @@ describe('Wizard Form with Grid with Nested Form validation', () => {
11971204
}, 300);
11981205
}).catch(done);
11991206
});
1207+
1208+
it('Should validate DataGrid with nested form inside Nested Wizard before going to the next page', function (done) {
1209+
Formio.createForm(document.createElement('div'), dataGridWithNestedFormWithNestedForm)
1210+
.then((form) => {
1211+
const selectToShowChildForm = form.getComponent(['dataGrid', 0, 'select']);
1212+
selectToShowChildForm.setValue('show', { modified: true });
1213+
setTimeout(() => {
1214+
const selectToShowGrandChildForm = form.getComponent(['dataGrid', 0, 'form', 'data', 'selectnested']);
1215+
selectToShowGrandChildForm.setValue('dog', { modified: true });
1216+
setTimeout(() => {
1217+
const grandChildTextField = form.getComponent(['dataGrid', 0, 'form', 'data', 'form', 'data', 'textField']);
1218+
grandChildTextField.setValue('Test', { modified: true });
1219+
setTimeout(() => {
1220+
assert.equal(grandChildTextField.dataValue, 'Test', 'Should set the value properly');
1221+
const submissionData = {
1222+
dataGrid: [
1223+
{
1224+
select: 'show',
1225+
form: {
1226+
data: {
1227+
selectnested: 'dog',
1228+
form: {
1229+
data: {
1230+
textField: 'Test',
1231+
},
1232+
},
1233+
},
1234+
metadata: {
1235+
selectData: {
1236+
dataGrid: [
1237+
{
1238+
form: {
1239+
data: {
1240+
selectnested: {
1241+
label: 'dog',
1242+
},
1243+
},
1244+
},
1245+
},
1246+
],
1247+
},
1248+
},
1249+
},
1250+
},
1251+
],
1252+
submit: false,
1253+
};
1254+
assert.deepEqual(form.submission.data, submissionData, 'Should set all the nested values to submission object properly');
1255+
done();
1256+
}, 500);
1257+
}, 500);
1258+
}, 500);
1259+
}).catch(done);
1260+
});
12001261
});

‎test/unit/fixtures/datagrid/dataGridWithNestedFormWithNestedForm.js‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
export default {
2+
title: 'FD61237 Parent',
3+
name: 'fd61237Parent',
4+
path: 'fd61237parent',
5+
type: 'form',
6+
display: 'form',
7+
components: [
8+
{
9+
label: 'Data Grid',
10+
reorder: false,
11+
addAnotherPosition: 'bottom',
12+
layoutFixed: false,
13+
enableRowGroups: false,
14+
initEmpty: false,
15+
tableView: false,
16+
defaultValue: [{}],
17+
validateWhenHidden: false,
18+
key: 'dataGrid',
19+
type: 'datagrid',
20+
input: true,
21+
components: [
22+
{
23+
label: 'Select',
24+
widget: 'choicesjs',
25+
tableView: true,
26+
data: {
27+
values: [
28+
{
29+
label: 'show',
30+
value: 'show',
31+
}, {
32+
label: 'no show',
33+
value: 'noShow',
34+
},
35+
],
36+
},
37+
validateWhenHidden: false,
38+
key: 'select',
39+
type: 'select',
40+
input: true,
41+
}, {
42+
label: 'Form',
43+
tableView: true,
44+
form: 'child',
45+
useOriginalRevision: false,
46+
key: 'form',
47+
conditional: {
48+
show: true,
49+
conjunction: 'any',
50+
conditions: [
51+
{
52+
component: 'dataGrid.select',
53+
operator: 'isEqual',
54+
value: 'show',
55+
},
56+
],
57+
},
58+
type: 'form',
59+
input: true,
60+
},
61+
],
62+
}, {
63+
type: 'button',
64+
label: 'Submit',
65+
key: 'submit',
66+
disableOnInvalid: true,
67+
input: true,
68+
tableView: false,
69+
},
70+
],
71+
};

‎test/unit/fixtures/datagrid/fd61237Child.js‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
export default {
2+
title: 'FD61237 child',
3+
type: 'form',
4+
name: 'fd61237Child',
5+
path: 'fd61237child',
6+
pdfComponents: [],
7+
display: 'form',
8+
tags: [
9+
'common',
10+
],
11+
settings: {},
12+
components: [
13+
{
14+
label: 'Select',
15+
widget: 'choicesjs',
16+
tableView: true,
17+
data: {
18+
values: [
19+
{
20+
label: 'dog',
21+
value: 'dog',
22+
},
23+
{
24+
label: 'cat',
25+
value: 'cat',
26+
},
27+
{
28+
label: 'horse',
29+
value: 'horse',
30+
},
31+
],
32+
},
33+
validate: {
34+
required: true,
35+
},
36+
validateWhenHidden: false,
37+
key: 'selectnested',
38+
type: 'select',
39+
input: true,
40+
},
41+
{
42+
label: 'Form',
43+
tableView: true,
44+
form: 'grandChild',
45+
useOriginalRevision: false,
46+
key: 'form',
47+
conditional: {
48+
show: true,
49+
conjunction: 'all',
50+
conditions: [
51+
{
52+
component: 'selectnested',
53+
operator: 'isEqual',
54+
value: 'dog',
55+
},
56+
],
57+
},
58+
type: 'form',
59+
input: true,
60+
},
61+
{
62+
type: 'button',
63+
label: 'Submit',
64+
key: 'submit',
65+
disableOnInvalid: true,
66+
input: true,
67+
tableView: false,
68+
},
69+
],
70+
};

‎test/unit/fixtures/datagrid/fd61237GrandChild.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
export default {
2+
title: 'Grand Child Form',
3+
name: 'grandChildForm',
4+
path: 'grandchildform',
5+
type: 'form',
6+
display: 'form',
7+
components: [
8+
{
9+
label: 'Text Field',
10+
applyMaskOn: 'change',
11+
tableView: true,
12+
validate: { required: true },
13+
validateWhenHidden: false,
14+
key: 'textField',
15+
type: 'textfield',
16+
input: true,
17+
}, {
18+
type: 'button',
19+
label: 'Submit',
20+
key: 'submit',
21+
disableOnInvalid: true,
22+
input: true,
23+
tableView: false,
24+
},
25+
],
26+
};

‎test/unit/fixtures/datagrid/index.js‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,15 @@ import withAllowCalculateOverride from './comp-with-allow-calculate-override';
2020
import twoWithAllowCalculatedOverride from './two-comp-with-allow-calculate-override';
2121
import withCheckboxes from './comp-with-checkboxes';
2222
import withReorder from './comp-with-reorder';
23-
import wizardWithDataGridWithNestedForm from './wizardWithDataGridWithNestedForm'
24-
export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8, comp9, comp10, comp11, comp12, withCollapsibleRowGroups, withConditionalFieldsAndValidations, withDefValue, withLogic, withRowGroupsAndDefValue, modalWithRequiredFields, withAllowCalculateOverride, twoWithAllowCalculatedOverride, withCheckboxes, withReorder,wizardWithDataGridWithNestedForm };
23+
import wizardWithDataGridWithNestedForm from './wizardWithDataGridWithNestedForm';
24+
import dataGridWithNestedFormWithNestedForm from './dataGridWithNestedFormWithNestedForm';
25+
import dataGridChildForm from './fd61237Child';
26+
import dataGridGrandChildForm from './fd61237GrandChild';
27+
28+
export {
29+
comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8, comp9, comp10, comp11, comp12, withCollapsibleRowGroups,
30+
withConditionalFieldsAndValidations, withDefValue, withLogic, withRowGroupsAndDefValue, modalWithRequiredFields,
31+
withAllowCalculateOverride, twoWithAllowCalculatedOverride, withCheckboxes, withReorder,
32+
wizardWithDataGridWithNestedForm, dataGridWithNestedFormWithNestedForm, dataGridChildForm, dataGridGrandChildForm
33+
};
2534

0 commit comments

Comments
 (0)