FIO-7206: Fixes an issue where API keys of the removed components are… (

#5634) * FIO-7206: Fixes an issue where API keys of the removed components are not removed from the Data Grid defaultValue * Refactoring
formio · Jun 12, 2024 · 470c030 · 470c030
1 parent 63ffbeb
commit 470c030
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 34 deletions.
diff --git a/src/WebformBuilder.js b/src/WebformBuilder.js
@@ -1131,8 +1131,14 @@ export default class WebformBuilder extends Component {
       else if (parent.formioComponent && parent.formioComponent.removeChildComponent) {
         parent.formioComponent.removeChildComponent(component);
       }
-      if (component.input && componentInstance && componentInstance.parent) {
-        _.unset(componentInstance._data, componentInstance.key);
+      if (component.input && componentInstance && parent.formioComponent) {
+        const parentDefaultValue = _.get(parent.formioComponent, 'component.defaultValue', null);
+        if (Array.isArray(parentDefaultValue)) {
+          parentDefaultValue.forEach(v => _.unset(v, componentInstance.key));
+        }
+        else if (typeof parentDefaultValue === 'object') {
+          _.unset(parentDefaultValue, componentInstance.key);
+        }
       }
       const rebuild = parent.formioComponent.rebuild() || Promise.resolve();
       rebuild.then(() => {

diff --git a/src/WebformBuilder.unit.js b/src/WebformBuilder.unit.js
@@ -257,40 +257,53 @@ describe('WebformBuilder tests', function() {
 
   it('Should remove deleted components keys from default value', (done) => {
     const builder = Harness.getBuilder();
-    builder.setForm({}).then(() => {
-      Harness.buildComponent('datagrid');
+    builder.setForm({
+      display: 'form',
+      type: 'form',
+      components: [
+        {
+          label: 'Data Grid',
+          reorder: false,
+          addAnotherPosition: 'bottom',
+          layoutFixed: false,
+          enableRowGroups: false,
+          initEmpty: false,
+          tableView: false,
+          defaultValue: [
+            {
+              textField: '',
+            },
+          ],
+          validateWhenHidden: false,
+          key: 'dataGrid',
+          type: 'datagrid',
+          input: true,
+          components: [
+            {
+              label: 'Text Field',
+              applyMaskOn: 'change',
+              tableView: true,
+              validateWhenHidden: false,
+              key: 'textField',
+              type: 'textfield',
+              input: true,
+            },
+          ],
+        },
+      ],
+    }).then(() => {
+      const textField = builder.webform.getComponent(['dataGrid', 'textField'])[0];
+      textField.refs.removeComponent.dispatchEvent( new MouseEvent('click', {
+        view: window,
+        bubbles: true,
+        cancelable: true
+      }));
 
       setTimeout(() => {
-        const dataGridDefaultValue = builder.editForm.getComponent('defaultValue');
-        dataGridDefaultValue.removeRow(0);
-
-        setTimeout(() => {
-          Harness.saveComponent();
-          setTimeout(() => {
-            const dataGridContainer = builder.webform.element.querySelector('[ref="dataGrid-container"]');
-            Harness.buildComponent('textfield', dataGridContainer);
-
-            setTimeout(() => {
-              Harness.saveComponent();
-
-              setTimeout(() => {
-                const textField = builder.webform.getComponent(['dataGrid', 'textField'])[0];
-                textField.refs.removeComponent.dispatchEvent( new MouseEvent('click', {
-                  view: window,
-                  bubbles: true,
-                  cancelable: true
-                }));
-
-                setTimeout(() => {
-                  const dataGrid = builder.webform.getComponent(['dataGrid']);
-                  assert.deepEqual(dataGrid.schema.defaultValue, [{}], 'Should remove TextField key');
-                  done();
-                }, 300);
-              });
-            }, 300);
-          }, 300);
-        }, 350);
-      }, 350);
+        const dataGrid = builder.webform.getComponent(['dataGrid']);
+        assert.deepEqual(dataGrid.schema.defaultValue, [{}], 'Should remove TextField key');
+        done();
+      }, 300);
     }).catch(done);
   });
 });