From 77d7e75202aa1ce34e04f6e24a4b8d2b45b380f3 Mon Sep 17 00:00:00 2001
From: alexandraRamanenka <sasha@form.io>
Date: Mon, 8 Apr 2024 16:56:20 +0300
Subject: [PATCH] FIO-3703: Fixes an issue where NestedData components with
 modal view do not render values inside Layout components in modal preview
 table

---
 .../nestedarray/NestedArrayComponent.js       |  2 +-
 .../nesteddata/NestedDataComponent.js         |  2 +-
 .../nesteddata/NestedDataComponent.unit.js    | 30 ++++++++++-
 ...nestedDataWithModalViewAndLayoutComponents | 54 +++++++++++++++++++
 4 files changed, 85 insertions(+), 3 deletions(-)
 create mode 100644 test/forms/nestedDataWithModalViewAndLayoutComponents

diff --git a/src/components/_classes/nestedarray/NestedArrayComponent.js b/src/components/_classes/nestedarray/NestedArrayComponent.js
index d718fd606a..5b4cedfeaa 100644
--- a/src/components/_classes/nestedarray/NestedArrayComponent.js
+++ b/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 [];
       }
diff --git a/src/components/_classes/nesteddata/NestedDataComponent.js b/src/components/_classes/nesteddata/NestedDataComponent.js
index b88ab3307b..c6a4271c72 100644
--- a/src/components/_classes/nesteddata/NestedDataComponent.js
+++ b/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 += (`
diff --git a/src/components/_classes/nesteddata/NestedDataComponent.unit.js b/src/components/_classes/nesteddata/NestedDataComponent.unit.js
index c0931c4da0..77c92e6dda 100644
--- a/src/components/_classes/nesteddata/NestedDataComponent.unit.js
+++ b/src/components/_classes/nesteddata/NestedDataComponent.unit.js
@@ -1,10 +1,13 @@
 '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', () => {
-  it('Should create a new NestedDataComponent class', () => {
+  it('Should create a new NestedDataComponent class', (done) => {
     return Harness.testCreate(NestedDataComponent, {
       // key: 'nested',
       components: [
@@ -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', () => {
+    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.geComponent(['dataGrid']);
+        dataGrid.setValue([
+          {
+            textField: 'test'
+          },
+          {
+            textField: 'test2'
+          }
+        ]);
+
+        setTimeout(() => {
+          const modalPreviewValues = form.element.querySelector('.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);
+  });
 });
diff --git a/test/forms/nestedDataWithModalViewAndLayoutComponents b/test/forms/nestedDataWithModalViewAndLayoutComponents
new file mode 100644
index 0000000000..565257984c
--- /dev/null
+++ b/test/forms/nestedDataWithModalViewAndLayoutComponents
@@ -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
+    }
+  ],
+}