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
formio · Oct 10, 2024 · bcf06c2 · bcf06c2
2 parents 7f6e2ec + ce20a28
commit bcf06c2
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 6 deletions.
diff --git a/src/components/editgrid/EditGrid.js b/src/components/editgrid/EditGrid.js
@@ -15,6 +15,7 @@ import {
 const EditRowState = {
   New: 'new',
   Editing: 'editing',
+  Saving: 'saving',
   Saved: 'saved',
   Viewing: 'viewing',
   Removed: 'removed',
@@ -951,6 +952,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) {
@@ -965,7 +971,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);
@@ -1159,7 +1165,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;
@@ -1273,6 +1279,7 @@ export default class EditGridComponent extends NestedArrayComponent {
           }
           else if (errorContainer) {
             errorContainer.textContent = '';
+            this.removeClass(errorContainer,  'help-block' );
           }
         }
       }

diff --git a/test/unit/EditGrid.unit.js b/test/unit/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();
@@ -1413,10 +1413,51 @@ describe('EditGrid Component', () => {
     }).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');
     const form = new Webform(formElement);
-  
+
     form.setForm(comp19).then(() => {
       const editGrid = form.components[0];
 
@@ -1430,12 +1471,12 @@ 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);
       }, 100);
+
     }).catch(done);
   });
 });