FIO-3703: Fixes an issue where NestedData components with modal view …

…do not render values inside Layout components in modal preview table (#5558)

* FIO-3703: Fixes an issue where NestedData components with modal view do not render values inside Layout components in modal preview table

* Fixed tests

* Fixed typo

* Update NestedDataComponent.unit.js

src/components/_classes/nestedarray/NestedArrayComponent.js

@@ -207,7 +207,7 @@ export default class NestedArrayComponent extends NestedDataComponent {
   }
 
   getComponents(rowIndex) {
-    if (rowIndex !== undefined) {
+    if (rowIndex !== undefined && rowIndex !== null) {
       if (!this.iteratableRows[rowIndex]) {
         return [];
       }

src/components/_classes/nesteddata/NestedDataComponent.js

@@ -80,7 +80,7 @@ export default class NestedDataComponent extends NestedComponent {
 
     const htmlTagRegExp = new RegExp('<(.*?)>');
 
-    this.components.forEach((component) => {
+    this.everyComponent((component) => {
       if (component.isInputComponent && component.visible && !component.skipInEmail) {
         const componentValue = component.getView(component.dataValue, options);
         result += (`

src/components/_classes/nesteddata/NestedDataComponent.unit.js

@@ -1,6 +1,9 @@
 'use strict';
+import { Formio } from '../../../Formio';
 import NestedDataComponent from './NestedDataComponent';
 import Harness from '../../../../test/harness';
+import assert from 'power-assert';
+import nestedDataCompWithModalPreview from '../../../../test/forms/nestedDataWithModalViewAndLayoutComponents';
 
 let component = null;
 describe('NestedDataComponent class', () => {
@@ -25,4 +28,29 @@ describe('NestedDataComponent class', () => {
       Harness.testElements(component, 'input[name="data[lastName]"]', 1);
     });
   });
+  it('Should show preview of the modal view component properly', (done) => {
+    Formio.createForm(document.createElement('div'), nestedDataCompWithModalPreview)
+      .then((form) => {
+        const openModalBtn = form.element.querySelector('.open-modal-button');
+        const openModalBtnRows = openModalBtn.querySelectorAll('tr');
+        assert.equal(openModalBtnRows.length, 1);
+
+        const dataGrid = form.getComponent(['dataGrid']);
+        dataGrid.setValue([
+          {
+            textField: 'test'
+          },
+          {
+            textField: 'test2'
+          }
+        ]);
+
+        setTimeout(() => {
+          const modalPreviewValues = form.element.querySelectorAll('.open-modal-button tr td input');
+          assert.equal(modalPreviewValues.length, 2);
+          assert.deepEqual(Array.prototype.map.call(modalPreviewValues, (i) => i.value), ['test', 'test2']);
+          done();
+        }, 300);
+      }).catch(done);
+  });
 });

test/forms/nestedDataWithModalViewAndLayoutComponents.json

@@ -0,0 +1,54 @@
+{
+  "name": "fio3703",
+  "path": "fio3703",
+  "type": "form",
+  "display": "form",
+  "components": [
+    {
+      "label": "Data Grid",
+      "reorder": false,
+      "addAnotherPosition": "bottom",
+      "layoutFixed": false,
+      "enableRowGroups": false,
+      "initEmpty": false,
+      "tableView": true,
+      "modalEdit": true,
+      "defaultValue": [
+        {
+          "textField": ""
+        }
+      ],
+      "key": "dataGrid",
+      "type": "datagrid",
+      "input": true,
+      "components": [
+        {
+          "collapsible": false,
+          "key": "panel",
+          "type": "panel",
+          "label": "Panel",
+          "input": false,
+          "tableView": false,
+          "components": [
+            {
+              "label": "Text Field",
+              "applyMaskOn": "change",
+              "tableView": true,
+              "key": "textField",
+              "type": "textfield",
+              "input": true
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "type": "button",
+      "label": "Submit",
+      "key": "submit",
+      "disableOnInvalid": true,
+      "input": true,
+      "tableView": false
+    }
+  ]
+}