From 606556f7e6c84174ef1b9c4afbedaa43eededa35 Mon Sep 17 00:00:00 2001
From: Roman Letsuk <romaletsuk@gmail.com>
Date: Tue, 3 Dec 2024 09:25:25 +0200
Subject: [PATCH] FIO-8724: fixed firing change event for DataGrid component

---
 src/components/datagrid/DataGrid.js |  4 ++
 test/unit/DataGrid.unit.js          | 91 ++++++++++++++++++++++++++++-
 test/unit/Webform.unit.js           |  4 +-
 3 files changed, 95 insertions(+), 4 deletions(-)

diff --git a/src/components/datagrid/DataGrid.js b/src/components/datagrid/DataGrid.js
index 0fd9523511..b9aa6e569b 100644
--- a/src/components/datagrid/DataGrid.js
+++ b/src/components/datagrid/DataGrid.js
@@ -491,6 +491,7 @@ export default class DataGridComponent extends NestedArrayComponent {
     });
     this.checkConditions();
     this.triggerChange();
+    this.triggerChange({ modified: true });
     this.redraw().then(() => {
       this.focusOnNewRowElement(this.rows[index]);
     });
@@ -578,6 +579,9 @@ export default class DataGridComponent extends NestedArrayComponent {
       const options = _.clone(this.options);
       options.name += `[${rowIndex}]`;
       options.row = `${rowIndex}-${colIndex}`;
+      options.onChange = (flags, changed, modified) => {
+        this.triggerChange({ modified });
+      }
 
       let columnComponent;
 
diff --git a/test/unit/DataGrid.unit.js b/test/unit/DataGrid.unit.js
index 2677611c38..7e03aa81ab 100644
--- a/test/unit/DataGrid.unit.js
+++ b/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(() => {
diff --git a/test/unit/Webform.unit.js b/test/unit/Webform.unit.js
index 145d157693..0161903698 100644
--- a/test/unit/Webform.unit.js
+++ b/test/unit/Webform.unit.js
@@ -814,7 +814,7 @@ describe('Webform tests', function() {
             done();
           }, 300);
         }, 300);
-      }, 300);
+      }, 450);
     }).catch((err) => done(err));
   });
 
@@ -3717,7 +3717,7 @@ describe('Webform tests', function() {
                   assert.equal(radio.dataValue, calculatedValues.radio);
                   document.body.innerHTML = '';
                   done();
-                }, 300);
+                }, 350);
               }, 300);
             }, 300);
           }, 300);