Merge branch 'master' into FIO-7525-fixed-conditional-logic-for-selec…

…t-boxes

Changelog.md

@@ -4,7 +4,7 @@ All notable changes to this project will be documented in this file
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
-## [Unreleased: 5.0.0-rc.27]
+## [Unreleased: 5.0.0-rc.37]
 ### Fixed
  - FIO-5967: fixed issue with incorrect string representation for object type
  - FIO-7110: when 'use original revision' is enabled for nested form, submission still displays in current form revision pdfs
@@ -35,6 +35,20 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
  - FIO-7355: fixed issue with HTML5 select flickering on initial click
  - FIO-7530: added ability to pass onSetItems component setting as a string (needed for builder mode)
  - FIO-7528: Revert FIO-4405: fixed an issue where walidation error displays with empty value even if it is not required (#4746)
+ - FIO-7547: Container hidden with conditional logic still appears in submission #5401
+ - FIO-7550: Fixing choices css issue
+ - FIO-7074/FIO-7379: Fixes some issues caused by Wizzard was not always setting _data to submission data
+ - FIO-7208: Moved Tree component to the contrib library
+ - FIO-7406 Fixed plain Textarea interpolating data in readonly mode [#5396](https://github.com/formio/formio.js/pull/5383)
+ - FIO-7112: fixed issues with calendar widget display for value components in new simple conditionals ui
+ - FIO-7184 Fixed showing incorrect value for DateTime and Time components with multiple value enabled inside of the DataTable
+ - FIO-7553: Changed tooltip text for the Column Properties setting
+ - FIO-7602: fixed submission data for Radio with 0s values
+ - FIO-4235: fixed confirmation dialog popping up when the data is empty in EditGrid
+ - FIO-7577: add skipInEmail comp property to recaptcha
+ - FIO-7514: fixed an isse where new simple conditionals do not work when condition is based on the value of resource select with object value
+ - FIO-7637: add catch block to subform submission loading
+ - FIO-7710: fixed the radio component check that causes an error
 
 ### Changed
  - Add capability for adding sanitize profiles through sanitizeConfig in options

gulpfile.js

@@ -75,7 +75,7 @@ gulp.task('styles-builder', function builderStyles() {
 });
 gulp.task('styles-full', gulp.series('builder-fonts', function fullStyles() {
   return compileStyles([
-    './node_modules/@formio/choices.js/public/assets/styles/choices.min.css',
+    './node_modules/@formio/choices.js/public/assets/styles/choices.css',
     './node_modules/tippy.js/dist/tippy.css',
     './node_modules/dialog-polyfill/dialog-polyfill.css',
     './node_modules/dragula/dist/dragula.css',

package.json

@@ -78,7 +78,7 @@
   },
   "homepage": "https://github.com/formio/formio.js#readme",
   "dependencies": {
-    "@formio/bootstrap": "^3.0.0-rc.13",
+    "@formio/bootstrap": "^3.0.0-rc.20",
     "@formio/choices.js": "^10.2.0",
     "@formio/core": "1.3.0-rc.16",
     "@formio/text-mask-addons": "^3.8.0-formio.2",

src/Element.js

@@ -203,15 +203,15 @@ export default class Element {
    * @param persistent
    *   If this listener should persist beyond "destroy" commands.
    */
-  addEventListener(obj, type, func, persistent) {
+  addEventListener(obj, type, func, persistent, capture) {
     if (!obj) {
       return;
     }
     if (!persistent) {
       this.eventHandlers.push({ id: this.id, obj, type, func });
     }
     if ('addEventListener' in obj) {
-      obj.addEventListener(type, func, false);
+      obj.addEventListener(type, func, !!capture);
     }
     else if ('attachEvent' in obj) {
       obj.attachEvent(`on${type}`, func);

src/Webform.js

@@ -891,7 +891,10 @@ export default class Webform extends NestedDataComponent {
 
     this.addComponents();
     this.on('submitButton', options => {
-      this.submit(false, options).catch(e => e !== false && console.log(e));
+      this.submit(false, options).catch(e => {
+        options.instance.loading = false;
+        return e !== false && console.log(e);
+      });
     }, true);
 
     this.on('checkValidity', (data) => this.checkValidity(data, true, data), true);

src/Webform.unit.js

@@ -35,6 +35,7 @@ import {
   formWithCollapsedPanel,
   formWithCustomFormatDate,
   tooltipActivateCheckbox,
+  formWithObjectValueSelect
 } from '../test/formtest';
 import UpdateErrorClassesWidgets from '../test/forms/updateErrorClasses-widgets';
 import nestedModalWizard from '../test/forms/nestedModalWizard';
@@ -2677,6 +2678,94 @@ describe('Webform tests', function() {
         }, 300);
       }).catch((err) => done(err));
     });
+
+    it('Should show field when condition is based on the values of select resource with object value', (done) => {
+      const element = document.createElement('div');
+      const values = [
+        {
+          _id: '656daabeebc67ecca1141569',
+          form: '656daab0ebc67ecca1141226',
+          data: {
+            number: 4,
+            notes: 'notes 4',
+          },
+          project: '656daa20ebc67ecca1140e8d',
+          state: 'submitted',
+          created: '2023-12-04T10:32:30.821Z',
+          modified: '2023-12-06T14:25:00.886Z',
+        },
+        {
+          _id: '656daabbebc67ecca11414a7',
+          form: '656daab0ebc67ecca1141226',
+          data: {
+            number: 3,
+            notes: 'notes 3',
+          },
+          project: '656daa20ebc67ecca1140e8d',
+          state: 'submitted',
+          created: '2023-12-04T10:32:27.322Z',
+          modified: '2023-12-06T14:25:07.494Z',
+        },
+        {
+          _id: '656daab8ebc67ecca11413e5',
+          form: '656daab0ebc67ecca1141226',
+          data: {
+            number: 2,
+            notes: 'notes 2',
+          },
+          project: '656daa20ebc67ecca1140e8d',
+          state: 'submitted',
+          created: '2023-12-04T10:32:24.514Z',
+          modified: '2023-12-06T14:25:13.610Z',
+        },
+        {
+          _id: '656daab5ebc67ecca1141322',
+          form: '656daab0ebc67ecca1141226',
+          data: {
+            number: 1,
+            notes: 'notes 1',
+          },
+          project: '656daa20ebc67ecca1140e8d',
+          state: 'submitted',
+          created: '2023-12-04T10:32:21.205Z',
+          modified: '2023-12-06T14:25:20.930Z',
+        },
+      ];
+      const originalMakeRequest = Formio.makeRequest;
+      Formio.makeRequest = function() {
+        return new Promise(resolve => {
+          setTimeout(() => {
+            resolve(values);
+          }, 50);
+        });
+      };
+
+      Formio.createForm(element, formWithObjectValueSelect)
+        .then(form => {
+          const numberComp = form.getComponent('number');
+          assert.equal(numberComp.visible, false);
+
+          const selectRef = form.getComponent('selectRef');
+          selectRef.setValue(fastCloneDeep(values[3]));
+          const selectNoValuePropertyMult = form.getComponent('selectNoValueProperty');
+          selectNoValuePropertyMult.setValue([fastCloneDeep(values[2])]);
+          const selectEntireObject = form.getComponent('selectEntireObject');
+          selectEntireObject.setValue(fastCloneDeep(values[1].data));
+          const selectEntireObjectMult = form.getComponent('selectEntireObjectMult');
+          selectEntireObjectMult.setValue([fastCloneDeep(values[0].data)]);
+
+          setTimeout(() => {
+            assert.equal(numberComp.visible, true);
+            selectRef.setValue(fastCloneDeep(values[2]));
+              setTimeout(() => {
+                assert.equal(numberComp.visible, false);
+                Formio.makeRequest = originalMakeRequest;
+                done();
+              }, 400);
+          }, 400);
+        })
+        .catch(done);
+    });
   });
 
   describe('Calculate Value with allowed manual override', () => {

src/Wizard.js

@@ -897,25 +897,23 @@ export default class Wizard extends Webform {
   }
 
   setValue(submission, flags = {}, ignoreEstablishment) {
-    this._submission = submission;
-    if (
-      (flags && flags.fromSubmission && (this.options.readOnly || this.editMode) && !this.isHtmlRenderMode()) ||
-      (flags && flags.fromSubmission && (this.prefixComps.length || this.suffixComps.length) && submission._id) ||
-      (this.options.server && (this.prefixComps.length || this.suffixComps.length))
-    ) {
-      this._data = submission.data;
-    }
-
-    if (!ignoreEstablishment) {
-      this.establishPages(submission.data);
-    }
     const changed = this.getPages({ all: true }).reduce((changed, page) => {
       return this.setNestedValue(page, submission.data, flags, changed) || changed;
     }, false);
 
+    this.mergeData(this.data, submission.data);
+
     if (changed) {
       this.pageFieldLogic(this.page);
     }
+
+    submission.data = this.data;
+    this._submission = submission;
+
+    if (!ignoreEstablishment) {
+      this.establishPages(submission.data);
+    }
+
     this.setEditMode(submission);
 
     return changed;

src/components/_classes/component/Component.js

@@ -211,7 +211,12 @@ export default class Component extends Element {
     return {
       operators: ['isEqual', 'isNotEqual', 'isEmpty', 'isNotEmpty'],
       valueComponent() {
-        return { type: 'textfield' };
+        return {
+          type: 'textfield',
+          widget: {
+            type: 'input'
+          }
+        };
       }
     };
   }

src/components/_classes/list/ListComponent.js

@@ -1,6 +1,7 @@
 import Field from '../field/Field';
 import { Formio } from '../../../Formio';
 import _ from 'lodash';
+import { getItemTemplateKeys } from '../../../utils/utils';
 
 export default class ListComponent extends Field {
   static schema(...extend) {
@@ -50,18 +51,10 @@ export default class ListComponent extends Field {
   }
 
   getTemplateKeys() {
-    this.templateKeys = [];
-    if (this.options.readOnly && this.component.template) {
-      const keys = this.component.template.match(/({{\s*(.*?)\s*}})/g);
-      if (keys) {
-        keys.forEach((key) => {
-          const propKey = key.match(/{{\s*item\.(.*?)\s*}}/);
-          if (propKey && propKey.length > 1) {
-            this.templateKeys.push(propKey[1]);
-          }
-        });
-      }
-    }
+    const template = this.component.template;
+    this.templateKeys = this.options.readOnly && template
+      ? getItemTemplateKeys(template)
+      : [];
   }
 
   get requestHeaders() {

src/components/_classes/nested/NestedComponent.js

@@ -617,7 +617,7 @@ export default class NestedComponent extends Field {
   clearOnHide(show) {
     super.clearOnHide(show);
     if (this.component.clearOnHide) {
-      if (this.allowData && !this.hasValue()) {
+      if (this.allowData && !this.hasValue() && !(this.options.server && !this.visible)) {
         this.dataValue = this.defaultValue;
       }
       if (this.hasValue()) {

src/components/builder.js

@@ -37,7 +37,6 @@ import TagsForm from './tags/Tags.form';
 import TextAreaForm from './textarea/TextArea.form';
 import TextfieldForm from './textfield/TextField.form';
 import TimeForm from './time/Time.form';
-import TreeForm from './tree/Tree.form';
 import UnknownForm from './unknown/Unknown.form';
 import UrlForm from './url/Url.form';
 import WellForm from './well/Well.form';
@@ -80,7 +79,6 @@ Components.tags.editForm = TagsForm;
 Components.textarea.editForm = TextAreaForm;
 Components.textfield.editForm = TextfieldForm;
 Components.time.editForm = TimeForm;
-Components.tree.editForm = TreeForm;
 Components.unknown.editForm = UnknownForm;
 Components.url.editForm = UrlForm;
 Components.well.editForm = WellForm;

src/components/columns/editForm/Columns.edit.display.js

@@ -56,7 +56,7 @@ export default [
     key: 'columns',
     label: 'Column Properties',
     addAnother: 'Add Column',
-    tooltip: 'The width, offset, push, and pull settings for each column.',
+    tooltip: 'The size and width settings for each column. One row is equal to 12. (e.g., a row with two columns spanning the entire page should be 6 and 6)',
     reorder: true,
     components: [
       {

src/components/container/Container.unit.js

@@ -6,7 +6,8 @@ import ContainerComponent from './Container';
 import {
   comp1,
   comp2,
-  comp3
+  comp3,
+  comp4,
 } from './fixtures';
 
 import { Formio } from '../../Formio';
@@ -77,4 +78,23 @@ describe('Container Component', () => {
       }, 100);
     }).catch(done);
   });
+
+  it('Should not set the default value when clearOnHide during the server-side validation', (done) => {
+    const form = _.cloneDeep(comp4);
+    const element = document.createElement('div');
+
+    Formio.createForm(element, form, { server: true, noDefaults: true }).then(form => {
+      form.setValue({ data: { checkbox: false } }, {
+        sanitize: true,
+      }, true);
+
+      form.checkConditions();
+      form.clearOnHide();
+
+      setTimeout(() => {
+        assert.deepEqual(form._data, { checkbox: false }, 'Should not add Container\'s key');
+        done();
+      }, 200);
+    }).catch(done);
+  });
 });

src/components/container/fixtures/comp4.js

@@ -0,0 +1,43 @@
+export default {
+  type: 'form',
+  display: 'form',
+  components: [
+    {
+      label: 'Checkbox',
+      tableView: false,
+      key: 'checkbox',
+      type: 'checkbox',
+      input: true,
+    },
+    {
+      label: 'Container',
+      tableView: false,
+      key: 'container',
+      conditional: {
+        show: true,
+        when: 'checkbox',
+        eq: 'true',
+      },
+      type: 'container',
+      input: true,
+      components: [
+        {
+          label: 'Text Field',
+          applyMaskOn: 'change',
+          tableView: true,
+          key: 'textField',
+          type: 'textfield',
+          input: true,
+        },
+      ],
+    },
+    {
+      type: 'button',
+      label: 'Submit',
+      key: 'submit',
+      disableOnInvalid: true,
+      input: true,
+      tableView: false,
+    },
+  ],
+};

src/components/container/fixtures/index.js

@@ -1,4 +1,5 @@
 import comp1 from './comp1';
 import comp2 from './comp2';
 import comp3 from './comp3';
-export { comp1, comp2, comp3 };
+import comp4 from './comp4';
+export { comp1, comp2, comp3, comp4 };

src/components/datetime/DateTime.js

@@ -203,8 +203,15 @@ export default class DateTimeComponent extends Input {
     format += format.match(/z$/) ? '' : ' z';
     const timezone = this.timezone;
     if (value && !this.attached && timezone) {
+      if (Array.isArray(value) && this.component.multiple) {
+        return value.map(item => _.trim(FormioUtils.momentDate(item, format, timezone).format(format))).join(', ');
+      }
       return _.trim(FormioUtils.momentDate(value, format, timezone).format(format));
     }
+
+    if (Array.isArray(value) && this.component.multiple) {
+      return value.map(item => _.trim(moment(item).format(format))).join(', ');
+    }
     return (value ? _.trim(moment(value).format(format)) : value) || '';
   }
 }