Merge branch 'master' of github.com:formio/formio.js into refactor-co…

…mponent-paths
formio · Nov 25, 2024 · 4a2b20b · 4a2b20b
2 parents abffa05 + 0b7cea4
commit 4a2b20b
Show file tree

Hide file tree

Showing 5 changed files with 160 additions and 19 deletions.
diff --git a/Changelog.md b/Changelog.md
@@ -114,6 +114,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
  - FIO-7195: Fixes an issue where Radio/SelectBoxes will show values instead of labels on View tab and in DataTable
  - FIO-9217 Fix: allow moment.js datetime custom default values in calendar widget-text field components
  - FIO-8677: Fixes an issue where its possible to draweon Signature on the View tab of PDF form
+ - FIO-9314: made select data property a hidden component and changed hidden component empty value to null
+ - FIO-9347: fixed select preview issue in form builder
+ - FIO-8518: fixed adding checkbox with radio type to pdf design page
 
 ### New Features
 

diff --git a/src/WebformBuilder.js b/src/WebformBuilder.js
@@ -933,32 +933,20 @@ export default class WebformBuilder extends Component {
     const compKey = (group === 'resource') ? `component-${key}` : key;
     const draggableComponent = this.groups[group]?.components[compKey] || {};
 
-    if (draggableComponent.disableSiblings) {
+    if (draggableComponent.disableSiblings || draggableComponent.uniqueComponent) {
       let isCompAlreadyExists = false;
       eachComponent(this.webform.components, (component) => {
-        if (component.type === draggableComponent.schema.type) {
-          isCompAlreadyExists = true;
-          return;
-        }
-      }, true);
-      if (isCompAlreadyExists) {
-        this.webform.redraw();
-        this.webform.setAlert('danger', `You cannot add more than one ${draggableComponent.key} component to one page.`);
-        return;
-      }
-    }
-
-    if (draggableComponent.uniqueComponent) {
-      let isCompAlreadyExists = false;
-      eachComponent(this.webform.components, (component) => {
-        if (component.key === draggableComponent.schema.key) {
+        if (
+          (draggableComponent.disableSiblings && component.type === draggableComponent.schema.type) ||
+          (draggableComponent.uniqueComponent && component.component.key === draggableComponent.schema.key)
+        ) {
           isCompAlreadyExists = true;
           return;
         }
       }, true);
       if (isCompAlreadyExists) {
         this.webform.redraw();
-        this.webform.setAlert('danger', `You cannot add more than one ${draggableComponent.title} component to one page.`);
+        this.webform.setAlert('danger', `You cannot add more than one ${_.get(draggableComponent, draggableComponent.uniqueComponent ? 'title' : 'key')} component to one page.`);
         return;
       }
     }
@@ -1350,6 +1338,7 @@ export default class WebformBuilder extends Component {
 
       const rebuild = parentComponent.rebuild() || Promise.resolve();
       return rebuild.then(() => {
+        parentComponent.resetValue();
         const schema = parentContainer ? parentContainer[index] : (comp ? comp.schema : []);
         this.emitSaveComponentEvent(
           schema,

diff --git a/src/components/hidden/Hidden.js b/src/components/hidden/Hidden.js
@@ -51,7 +51,7 @@ export default class HiddenComponent extends Input {
   }
 
   get emptyValue() {
-    return '';
+    return null;
   }
 
   setValue(value, flags = {}) {

diff --git a/src/components/select/editForm/Select.edit.data.js b/src/components/select/editForm/Select.edit.data.js
@@ -686,6 +686,7 @@ export default [
   },
   {
     key: 'selectData',
+    type: 'hidden',
     conditional: {
       json: {
         and: [

diff --git a/test/unit/WebformBuilder.unit.js b/test/unit/WebformBuilder.unit.js
@@ -602,6 +602,154 @@ describe('Select Component selectData property', () => {
     }).catch(done);
   });
 
+  it('Should show correct default value for select component in form builder', (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');
+          assert.equal(defaultValue.type, 'select');
+          defaultValue.setValue('value1');
+          defaultValue.updateItems(null, true);
+
+          setTimeout(() => {
+            assert.deepEqual(builder.editForm.data.selectData, {
+              label: 'Label 1',
+            });
+            Harness.saveComponent();
+            setTimeout(() => {
+              assert.equal(
+                builder.webform.getComponent('select').element.querySelector('[aria-selected="true"] span').innerHTML,
+                'Label 1',
+              );
+
+              const click = new MouseEvent('click', {
+                view: window,
+                bubbles: true,
+                cancelable: true
+              });
+
+              builder.webform.getComponent('select').element
+                .querySelector('.component-settings-button-edit')
+                .dispatchEvent(click);
+
+              setTimeout(() => {
+                const defaultValue = builder.editForm.getComponent('defaultValue');
+                assert.equal(defaultValue.type, 'select');
+                defaultValue.setValue('value2');
+                defaultValue.updateItems(null, true);
+
+                setTimeout(() => {
+                  assert.deepEqual(builder.editForm.data.selectData, {
+                    label: 'Label 2',
+                  });
+                  Harness.saveComponent();
+                  setTimeout(() => {
+                    assert.equal(
+                      builder.webform.getComponent('select').element.querySelector('[aria-selected="true"] span').innerHTML,
+                      'Label 2',
+                    );
+                    done();
+                  }, 150);
+                }, 250);
+              }, 500);
+            }, 150);
+          }, 250);
+        }, 250);
+      }, 150);
+    }).catch(done);
+  });
+
+  it('Should show correct default value for multiple select component in form builder', (done) => {
+    const builder = Harness.getBuilder();
+    builder.setForm({}).then(() => {
+      Harness.buildComponent('select');
+
+      setTimeout(() => {
+        const multiple = builder.editForm.getComponent('multiple');
+        multiple.setValue(true);
+        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');
+          assert.equal(defaultValue.type, 'select');
+          defaultValue.setValue(['value1', 'value3']);
+          defaultValue.updateItems(null, true);
+
+          setTimeout(() => {
+            assert.deepEqual(builder.editForm.data.selectData, {
+              value1: {
+                label: 'Label 1',
+              },
+              value3: {
+                label: 'Label 3',
+              },
+            });
+            Harness.saveComponent();
+            setTimeout(() => {
+              const elements = builder.webform.getComponent('select').element.querySelectorAll('.choices__list--multiple span');
+              assert.deepEqual(
+                Array.prototype.map.call(elements, (element) => element.innerHTML),
+                ['Label 1', 'Label 3'],
+              );
+
+              const click = new MouseEvent('click', {
+                view: window,
+                bubbles: true,
+                cancelable: true
+              });
+
+              builder.webform.getComponent('select').element
+                .querySelector('.component-settings-button-edit')
+                .dispatchEvent(click);
+
+              setTimeout(() => {
+                const defaultValue = builder.editForm.getComponent('defaultValue');
+                assert.equal(defaultValue.type, 'select');
+                defaultValue.setValue(['value2', 'value3']);
+                defaultValue.updateItems(null, true);
+
+                setTimeout(() => {
+                  assert.deepEqual(builder.editForm.data.selectData, {
+                    value2: {
+                      label: 'Label 2',
+                    },
+                    value3: {
+                      label: 'Label 3',
+                    },
+                  });
+                  Harness.saveComponent();
+                  setTimeout(() => {
+                    const elements = builder.webform.getComponent('select').element.querySelectorAll('.choices__list--multiple span');
+                    assert.deepEqual(
+                      Array.prototype.map.call(elements, (element) => element.innerHTML),
+                      ['Label 2', 'Label 3'],
+                    );
+                    done();
+                  }, 150);
+                }, 250);
+              }, 500);
+            }, 150);
+          }, 250);
+        }, 250);
+      }, 150);
+    }).catch(done);
+  });
+
   after((done) => {
     Formio.makeRequest = originalMakeRequest;
     Harness.builderAfter(done);
-Original file line number
+Diff line change
@@ Expand Up / @@ -686,6 +686,7 @@ export default [ @@
       },
       {
         key: 'selectData',
+        type: 'hidden',
         conditional: {
           json: {
             and: [
@@ Expand Down @@