Merge pull request #5855 from formio/FIO-9184-fix-edit-grid-new-row-v…

…alidation

FIO-9184: Fixed edit grid row validation for new row

src/components/editgrid/EditGrid.js

@@ -15,6 +15,7 @@ import {
 const EditRowState = {
   New: 'new',
   Editing: 'editing',
+  Saving: 'saving',
   Saved: 'saved',
   Viewing: 'viewing',
   Removed: 'removed',
@@ -939,6 +940,11 @@ export default class EditGridComponent extends NestedArrayComponent {
       editRow.components.forEach((comp) => comp.setPristine(false));
     }
 
+    // Mark the row with a 'Saving' state to trigger validation for future row changes
+    if (editRow.state === EditRowState.New) {
+      editRow.state = EditRowState.Saving;
+    }
+
     const errors = this.validateRow(editRow, true);
 
     if (!this.component.rowDrafts) {
@@ -953,7 +959,7 @@ export default class EditGridComponent extends NestedArrayComponent {
         this.root.focusedComponent = null;
       }
       switch (editRow.state) {
-        case EditRowState.New: {
+        case EditRowState.Saving: {
           const newIndex = dataValue.length;
           dataValue.push(editRow.data);
           editRow.components.forEach(component=>component.rowIndex = newIndex);
@@ -1147,7 +1153,7 @@ export default class EditGridComponent extends NestedArrayComponent {
 
   shouldValidateRow(editRow, dirty) {
     return this.shouldValidateDraft(editRow) ||
-      editRow.state === EditRowState.New ||
+      editRow.state === EditRowState.Saving ||
       editRow.state === EditRowState.Editing ||
       editRow.alerts ||
       dirty;
@@ -1261,6 +1267,7 @@ export default class EditGridComponent extends NestedArrayComponent {
           }
           else if (errorContainer) {
             errorContainer.textContent = '';
+            this.removeClass(errorContainer,  'help-block' );
           }
         }
       }

src/components/editgrid/EditGrid.unit.js

@@ -1239,7 +1239,7 @@ describe('EditGrid Component', () => {
           setTimeout(() => {
             assert.equal(!!firstRowTextField.errors, true);
             assert.equal(editGrid.editRows[0].errors.length, 1);
-            assert.equal(editGrid.editRows[0].state, 'new');
+            assert.equal(editGrid.editRows[0].state, 'saving');
 
             document.innerHTML = '';
             done();
@@ -1412,6 +1412,47 @@ describe('EditGrid Component', () => {
       }, 300);
     }).catch(done);
   });
+
+  it('Should not show validation in new row with required conditional fields before attempt to save', (done) => {
+    const form = _.cloneDeep(comp12);
+    const element = document.createElement('div');
+
+    Formio.createForm(element, form).then(form => {
+      const editGrid = form.getComponent('editGrid');
+      const clickEvent = new Event('click');
+      editGrid.refs['editgrid-editGrid-addRow'][0].dispatchEvent(clickEvent);
+
+      setTimeout(() => {
+        const firstRowContainer = editGrid.components[0];
+        const firstRowNumber = firstRowContainer.components[0];
+        const firstRowTextField = firstRowContainer.components[1];
+
+        assert.equal(firstRowTextField.visible, false);
+
+        const inputEvent = new Event('input');
+        const numberInput = firstRowNumber.refs.input[0];
+
+        numberInput.value = 5;
+        numberInput.dispatchEvent(inputEvent);
+
+        setTimeout(() => {
+          assert.equal(firstRowTextField.visible, true);
+          assert.equal(editGrid.editRows[0].errors.length, 0);
+
+          editGrid.refs['editgrid-editGrid-saveRow'][0].dispatchEvent(clickEvent);
+
+          setTimeout(() => {
+            assert.equal(!!firstRowTextField.errors, true);
+            assert.equal(editGrid.editRows[0].errors.length, 1);
+            assert.equal(editGrid.editRows[0].state, 'saving');
+
+            document.innerHTML = '';
+            done();
+          }, 200);
+        }, 250);
+      }, 300);
+    }).catch(done);
+  });
 
   it('Should not allow to save invalid row when there are required components inside columns in the editGrod row', (done) => {
     const formElement = document.createElement('div');
@@ -1430,8 +1471,7 @@ describe('EditGrid Component', () => {
             setTimeout(() => {
               assert.equal(editGrid.editRows.length, 1);
               assert.equal(editGrid.editRows[0].errors?.length, 1);
-              assert.equal(editGrid.editRows[0].state, 'new');
-
+              assert.equal(editGrid.editRows[0].state, 'saving');
               done();
             }, 300);
           }, 300);