FIO-8951: Updated conditions for selectData and added logic to clear selectData

src/components/select/editForm/Select.edit.data.js

@@ -30,16 +30,20 @@ const setSelectData = (context) => {
   // Wait before downloadedResources will be set
   setTimeout(() => {
     const { instance, data } = context;
-    const selectDataComponent = instance?.root.getComponent('selectData');
+    const selectDataComponent = instance?.root?.getComponent('selectData');
+    // clear selectData if conditions are not met or clearing default value
+    if (selectDataComponent && (!selectDataComponent.visible || !data.defaultValue)) {
+      selectDataComponent.setValue(null, { resetValue: true});
+      return;
+    }
     // nothing can set if don't have downloaded resources
     if (!selectDataComponent || !instance.getValue() || !instance.downloadedResources?.length) {
       return;
     }
-    // if valueProperty is not provided, we have entire object
     const shouldCalculateUrlData = data.dataSrc === 'url' && data.data.url && data.valueProperty;
     const shouldCalculateResourceData = data.dataSrc === 'resource' && data.data.resource && data.valueProperty;
-    const newValue = shouldCalculateUrlData || shouldCalculateResourceData ? calculateSelectData(context) : undefined;
-    selectDataComponent.setValue(newValue);
+    const newValue = shouldCalculateUrlData || shouldCalculateResourceData ? calculateSelectData(context) : null;
+    selectDataComponent.setValue(newValue, { resetValue: newValue === null});
   }, 0);
 };
 
@@ -683,10 +687,25 @@ export default [
   {
     key: 'selectData',
     conditional: {
-      json: { 'and': [
-        { '!==': [{ var: 'data.valueProperty' }, null] },
-        { '!==': [{ var: 'data.valueProperty' }, ''] },
-      ] },
+      json: {
+        and: [
+          { var: 'data.valueProperty' },
+          { '===': [{ var: 'data.lazyLoad' }, true]},
+          { '!==': [{ var: 'data.widget' }, 'html5'] },
+          {
+            or: [
+              { '===': [{ var: 'data.dataSrc' }, 'url'] },
+              {
+                and: [
+                  { '===': [{ var: 'data.dataSrc' }, 'resource'] },
+                  // 'data' means entire object from resource will be used
+                  { '!==': [{ var: 'data.valueProperty' }, 'data'] },
+                ],
+              }
+            ]
+          }
+        ]
+      },
     },
   },
   {

test/unit/WebformBuilder.unit.js

@@ -441,6 +441,91 @@ describe('Select Component selectData property', () => {
     }).catch(done);
   });
 
+  it('Should remove selectData property if conditions are not met', (done) => {
+    const builder = Harness.getBuilder();
+    builder.setForm({}).then(() => {
+      Harness.buildComponent('select');
+
+      setTimeout(() => {
+        const dataSrc = builder.editForm.getComponent('dataSrc');
+        dataSrc.setValue('url');
+        const url = builder.editForm.getComponent(['data.url']);
+        const valueProperty = builder.editForm.getComponent('valueProperty');
+        url.setValue('htts//fakeurl.com');
+        valueProperty.setValue('value');
+
+        setTimeout(() => {
+          const defaultValue = builder.editForm.getComponent('defaultValue');
+          defaultValue.setValue('value1');
+          defaultValue.updateItems(null, true);
+
+          setTimeout(() => {
+            assert.deepEqual(builder.editForm.data.selectData, {
+              label: 'Label 1',
+            });
+
+            setTimeout(() => {
+              const widget = builder.editForm.getComponent('widget');
+              widget.updateValue('html5', { modified: true });
+
+              setTimeout(() => {
+                assert.equal(builder.editForm.data.selectData, null);
+
+                Harness.saveComponent();
+                setTimeout(() => {
+                  done();
+                }, 150);
+              }, 300);
+            }, 150);
+          }, 250);
+        }, 250);
+      }, 150);
+    }).catch(done);
+  });
+
+
+
+  it('Should remove selectData property when clearing defaultValue', (done) => {
+    const builder = Harness.getBuilder();
+    builder.setForm({}).then(() => {
+      Harness.buildComponent('select');
+
+      setTimeout(() => {
+        const dataSrc = builder.editForm.getComponent('dataSrc');
+        dataSrc.setValue('url');
+        const url = builder.editForm.getComponent(['data.url']);
+        const valueProperty = builder.editForm.getComponent('valueProperty');
+        url.setValue('htts//fakeurl.com');
+        valueProperty.setValue('value');
+
+        setTimeout(() => {
+          const defaultValue = builder.editForm.getComponent('defaultValue');
+          defaultValue.setValue('value1');
+          defaultValue.updateItems(null, true);
+
+          setTimeout(() => {
+            assert.deepEqual(builder.editForm.data.selectData, {
+              label: 'Label 1',
+            });
+
+            setTimeout(() => {
+              defaultValue.updateValue('', { modified: true });
+
+              setTimeout(() => {
+                assert.equal(builder.editForm.data.selectData, null);
+
+                Harness.saveComponent();
+                setTimeout(() => {
+                  done();
+                }, 150);
+              }, 300);
+            }, 150);
+          }, 250);
+        }, 250);
+      }, 150);
+    }).catch(done);
+  });
+
   it('Should calculate multiple selectData property for url dataSource', (done) => {
     const builder = Harness.getBuilder();
     builder.setForm({}).then(() => {