FIO-8724: Fixed firing change event for DataGrid component

src/components/datagrid/DataGrid.js

@@ -490,6 +490,7 @@ export default class DataGridComponent extends NestedArrayComponent {
     });
     this.checkConditions();
     this.triggerChange();
+    this.triggerChange({ modified: true });
     this.redraw().then(() => {
       this.focusOnNewRowElement(this.rows[index]);
     });
@@ -577,6 +578,9 @@ export default class DataGridComponent extends NestedArrayComponent {
       options.name += `[${rowIndex}]`;
       options.row = `${rowIndex}-${colIndex}`;
       options.rowIndex = rowIndex;
+      options.onChange = (flags, changed, modified) => {
+        this.triggerChange({ modified });
+      }
 
       let columnComponent;
 

test/unit/DataGrid.unit.js

@@ -436,7 +436,7 @@ describe('DataGrid Component', () => {
                   done();
                 }).catch(done);
               }, 300);
-            }, 300);
+            }, 350);
           }, 300);
         }, 300);
       })
@@ -525,6 +525,93 @@ describe('DataGrid Component', () => {
       }, 300);
     }).catch((err) => done(err));
   });
+
+  it('Should trigger DataGrid change event when row component value changes', (done) => {
+    Formio.createForm(document.createElement('div'), {
+      type: 'form',
+      display: 'form',
+      components: [{
+        label: 'Datagrid',
+        key: 'dataGrid',
+        type: 'datagrid',
+        defaultValue: [{ }],
+        input: true,
+        components: [
+          {
+            label: 'Number',
+            key: 'number',
+            type: 'number',
+            input: true
+          },
+        ],
+      }],
+    }).then((form) => {
+      form.on('change', ({ changed }) => {
+        assert(changed.component.key, 'dataGrid');
+        done();
+      });
+      const numberComp = form.getComponent(['dataGrid', 0, 'number']);
+      numberComp.setValue(1);
+    }).catch((err) => done(err));
+  });
+
+  it('Should trigger DataGrid change event when adding a new row', (done) => {
+    Formio.createForm(document.createElement('div'), {
+      type: 'form',
+      display: 'form',
+      components: [{
+        label: 'Datagrid',
+        key: 'dataGrid',
+        type: 'datagrid',
+        defaultValue: [{ }],
+        input: true,
+        components: [
+          {
+            label: 'Number',
+            key: 'number',
+            type: 'number',
+            input: true
+          },
+        ],
+      }],
+    }).then((form) => {
+      form.on('change', ({ changed }) => {
+        assert(changed.component.key, 'dataGrid');
+        done();
+      });
+      const dataGrid = form.getComponent(['dataGrid']);
+      dataGrid.addRow();
+    }).catch((err) => done(err));
+  });
+
+  it('Should trigger DataGrid change event when removing the row', (done) => {
+    Formio.createForm(document.createElement('div'), {
+      type: 'form',
+      display: 'form',
+      components: [{
+        label: 'Datagrid',
+        key: 'dataGrid',
+        type: 'datagrid',
+        defaultValue: [{ }],
+        input: true,
+        components: [
+          {
+            label: 'Number',
+            key: 'number',
+            type: 'number',
+            input: true
+          },
+        ],
+      }],
+    }).then((form) => {
+      form.on('change', ({ changed }) => {
+        assert(changed.component.key, 'dataGrid');
+        done();
+      });
+      const dataGrid = form.getComponent(['dataGrid']);
+      dataGrid.removeRow(0);
+    }).catch((err) => done(err));
+  });
 });
 
 describe('DataGrid Panels', () => {
@@ -971,7 +1058,7 @@ describe('SaveDraft functionality', () => {
       {
         saveDraft: true,
         skipDraftRestore: true,
-        saveDraftThrottle: 100
+        saveDraftThrottle: 300
       }
     ).then((form) => {
       setTimeout(() => {

test/unit/Webform.unit.js

@@ -217,9 +217,9 @@ describe('Webform tests', function() {
             assert.equal(textArea.visible, true);
             assert.equal(textField.visible, true);
             done();
-          }, 300);
-        }, 300);
-      }, 300);
+          }, 400);
+        }, 400);
+      }, 400);
     });
   });
 
@@ -900,7 +900,7 @@ describe('Webform tests', function() {
             done();
           }, 300);
         }, 300);
-      }, 300);
+      }, 450);
     }).catch((err) => done(err));
   });
 
@@ -3805,7 +3805,7 @@ describe('Webform tests', function() {
                   assert.equal(radio.dataValue, calculatedValues.radio);
                   document.body.innerHTML = '';
                   done();
-                }, 300);
+                }, 350);
               }, 300);
             }, 300);
           }, 300);