Merge branch 'master' into FIO-7225-fix-value-property-values-for-rad…

…io-select-boxes

.vscode/launch.json

@@ -12,9 +12,9 @@
         "args": [
           "-b",
           "-t",
-          "20000",
+          "0",
           "--colors",
-          "${workspaceFolder}/src/**/*.unit.js",
+          "${workspaceFolder}/test/**/*.unit.js",
           "-t",
           "30000"
         ],

Changelog.md

@@ -76,6 +76,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
  - FIO-8234/FIO-7195: Fixes an issue where value properties are shown instead of labels for Select component with Resource/URL data sources in read only mode and for modal preview
  - FIO-8986: fixed setting default value for day component with hidden day and month
  - FIO-8719: fixed error message display for nested wizard components
+ - FIO-9086: time component with default value validation fix
  - FIO-9080 checkbox radio validation error
  - FIO-9147: fixed an issue where the simple conditionally visible component is not validated on change
  - FIO-9056: Fix enabling multiple values for address component
@@ -104,6 +105,18 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
  - FIO-8866-8864: fixed simple conditions operators for recaptcha
  - FIO-9158: fixed an issue where Password component error message persists to displayed in Edit page
  - FIO-9126: fixed display of value for Day component with hidden fields
+ - FIO-9158: fixed password component error in Edit page
+ - FIO-9127 fixed saving empty values for Day component with hidden fields
+ - FIO-9153-9154: fixed console errors when navigating tagpad validation errors
+ - FIO-9127 fixed saving an empty value for day component after deleting values
+ - FIO-9120: Fix issue with unchecking radio default value
+ - FIO-7195/FIO-8234: Fixes an issue where Select renders value properties instead of labels in DataTable
+ - 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
 
@@ -154,7 +167,7 @@ This is a **Breaking Change** so please see the section below for more informati
 The 5.x renderer incorporates our new Core validation engine found @ https://github.com/formio/core/tree/master/src/process. This process can be briefly described within the pull request notes @ https://github.com/formio/formio.js/pull/5317. This will also improve our Iso-morphic behavior for our renderer validation and significantly improve memory and processor consumption for server-side form validations. This feature does have a **Breaking Change** which is described below.
 
 #### Core SDK
-With the 5.x renderer, the Formio SDK is now part of our Core library found @ https://github.com/formio/core/tree/master/src/sdk.  It is now imported directly into the @formio/js library and is re-exported to support reverse compatability. Because of this, there should not be any code upgrade involved. 
+With the 5.x renderer, the Formio SDK is now part of our Core library found @ https://github.com/formio/core/tree/master/src/sdk.  It is now imported directly into the @formio/js library and is re-exported to support reverse compatability. Because of this, there should not be any code upgrade involved.
 
 For example, the following code still works.
 
@@ -195,7 +208,7 @@ With the 5.x version of the renderer/builder, there has been much effort into re
     - formio.form.min.js ~ 1.4mb => ~30% size reduction
     - formio.min.js (SDK) ~ 235k => ~50% size reduction
 
-#### New lazy-loading Embedding method. 
+#### New lazy-loading Embedding method.
 One of the more exciting new additions to the 5.x renderer is the new lazy-loading process for adding the renderer to your application. There is a new file that is included with the 5.x renderer called "formio.embed.js". This file is tiny coming in at ~10kb.  What this file does, however, is make it so that you can bundle a lazy-loading renderer within your application without increasing the build sizes of your application.
 
 To use the new lazy-loading features, you will need to change your imports from the following to the new embed source as the following illustrates.
@@ -267,6 +280,7 @@ Formio.createForm(document.getElementById('formio'), 'https://examples.form.io/e
 ```
 
 ### Breaking Changes
+ - Sketchpad imageType is being removed. All image types are now treated the same. You no longer need the imageType property in your form json
  - Bootstrap 5 Default Template - With the 5.x version of the renderer, the default template is now **Bootstrap 5** and is found @ https://github.com/formio/bootstrap repo.
  - Bootstrap Icons - Now, instead of Font Awesome being the default icon set for our renderer, we are using Bootstrap Icons as the default icon set which is compatible with Bootstrap 5. Of course, you can always change out icon sets, but this is now the default.
  - This version implements a new validation system. Within this, there are some changes that you should be aware of.
@@ -290,7 +304,7 @@ Formio.createForm(document.getElementById('formio'), 'https://examples.form.io/e
     ```js
     const isValid = form.getComponent('editgrid').validateRow().length === 0;
     ```
- 
+
   - In the 5.x renderer, the errors array will always be populated if there are errors in the form. They may not be displayed depending on the "pristine" state of the rendered form, but the error is always populated if there are form errors.  This is different in 4.x where the error property would only contain and error if an error is VISIBLE on the form. This means that it is difficult to determine if a form has errors without executing the checkValidity() method with the dirty flag set to "true". You no longer need to do this in the 5.x renderer.
 
     **4.x Renderer**
@@ -319,7 +333,7 @@ Formio.createForm(document.getElementById('formio'), 'https://examples.form.io/e
     console.log(textField.visibleErrors); // This is the equivalent of the 4.x renderer "errors" array.
     ```
 
-  - With the 5.x renderer, all templates are now stored within a separate repo, and are included as a dependency for this renderer. 
+  - With the 5.x renderer, all templates are now stored within a separate repo, and are included as a dependency for this renderer.
 
 ### Fixed
  - FIO-7525: fixed an issue where new conditional logic based on select boxes does not work
@@ -462,7 +476,7 @@ Formio.createForm(document.getElementById('formio'), 'https://examples.form.io/e
 
 ### Changed
  - Add capability for adding sanitize profiles through sanitizeConfig in options
-   
+
 ## 5.0.0-rc.26
 ### Changed
  - More improvements to the embed capabilities.
@@ -543,7 +557,7 @@ Formio.createForm(document.getElementById('formio'), 'https://examples.form.io/e
 ## 5.0.0-rc.6
 ### Added
  - FIO-5748: added collapsible preview for Form Builder
-  
+
 ### Fixed
  - FIO-6950: fixed test
  - FIO-6669: fixed tooltips cutting off in the component settings modal
@@ -555,7 +569,7 @@ Formio.createForm(document.getElementById('formio'), 'https://examples.form.io/e
  - FIO-6453: added sanitization inside error message container
  - FIO-6345: Add rel=noopener to Links to Docs / External Links
  - FIO-5042: Logout feature for OIDC
- 
+
 ### Fixed
  - FIO-6616: fixed issue where the select templates were not getting set correctly in selectData
  - FIO-6533: fixed an issue where file upload hash causing delays in file uploads
@@ -637,7 +651,7 @@ Formio.use(bootstrap4);
 ### Added
  - FIO-4429: Add support for pdf auto conversion fields assignment
  - Added basic keyboard accessibility for formbuilder
- 
+
 ### Fixed
  - FIO-6512: cannot drag and drop components on to pdf first forms using mac
  - FIO-6468: fixed an issue where Custom validation on Day component is confusing Day and Year
@@ -791,9 +805,9 @@ Formio.use(bootstrap4);
  - FIO-5069: API driven dataTable
  - FIO-5455: Fixes context variables not available in datetime custom disabled dates config
  - FIO-5544: added sticky property to the form components when building forms
- - Upgrade vanilla text mask and text-mask addons. 
+ - Upgrade vanilla text mask and text-mask addons.
  - FIO-3814: fixed fetch data several times when RefreshOnBlur
- 
+
 ## 4.15.0-rc.13
 ### Added
  - FIO-4836: hash was added to file
@@ -802,7 +816,7 @@ Formio.use(bootstrap4);
  - FIO-4942: fixed email submission: Custom PDF File Name is not respected
  - FIO-4997: extended check for execution on the server side for tabs component
  - FIO-4861: fixed restored revision node
- - FIO-4976: Fixes select resource data not showing on submission 
+ - FIO-4976: Fixes select resource data not showing on submission
  - FIO-5053: fixed an issue where select data with html5 widget type is not showing on view or pdf download after submission
  - FIO-5003: fixed that the radio with the value "false" is not displayed in different templates.
  - FIO-4970: reduced limit query parameter value for resource requests
@@ -916,7 +930,7 @@ Formio.use(bootstrap4);
  - FIO-4571: Fixea an issue where tooltips do not appear on hover in the component setting modal
  - FIO-2645: Made clicking on the error of Container component redirect to it.
  - FIO-4595, FIO-4364: Fixes Select with URL keeping default value on pdf submission
- - FIO-4362: Fixed issues with checkbox set as radio type. 
+ - FIO-4362: Fixed issues with checkbox set as radio type.
  - FIO-4615: Fixing issues with calendar widget with save as text.
 
 ## 4.15.0-rc.1
@@ -937,7 +951,7 @@ Formio.use(bootstrap4);
  - FIO-4443: Fixed signature not visible when generating a pdf.
  - FIO-4466: Fixed 'Save as reference' in Select resource
  - FIO-4496: fixed an issue where response from the resource does not display in the dropdown when more than one object is in the item template
- - FIO-4487: Protect the comp variable when iterating in wizards 
+ - FIO-4487: Protect the comp variable when iterating in wizards
  - FIO-4405: fixed an issue where form doesn't submit if hidden radio component has storage type as string
  - FIO-3715: fixed an issue where validation errors were shown with a submission in draft state if container component inside the form
  - FIO-4442: fixed an issue where date is showing the date prior to submitted date on view tab and data tab

package.json

@@ -82,8 +82,8 @@
   "dependencies": {
     "@formio/bootstrap": "3.0.0-dev.98.17ba6ea",
     "@formio/choices.js": "^10.2.1",
-    "@formio/core": "v2.1.0-dev.156.78a83fd",
-    "@formio/text-mask-addons": "^3.8.0-formio.2",
+    "@formio/core": "2.1.0-dev.191.8c609ab",
+    "@formio/text-mask-addons": "^3.8.0-formio.3",
     "@formio/vanilla-text-mask": "^5.1.1-formio.1",
     "abortcontroller-polyfill": "^1.7.5",
     "autocompleter": "^8.0.4",
@@ -183,7 +183,9 @@
     "branches": 63,
     "functions": 61,
     "lines": 64,
-    "include": ["src/**/*.js"],
+    "include": [
+      "src/**/*.js"
+    ],
     "exclude": [
       "src/**/fixtures"
     ],

src/Webform.js

@@ -838,7 +838,7 @@ export default class Webform extends NestedDataComponent {
     }
 
     saveDraft() {
-        if (!this.draftEnabled) {
+        if (!this.draftEnabled || this.parent?.component.reference === false) {
             return;
         }
         if (!this.formio) {
@@ -1423,7 +1423,12 @@ export default class Webform extends NestedDataComponent {
     onChange(flags, changed, modified, changes) {
         flags = flags || {};
         let isChangeEventEmitted = false;
-        super.onChange(flags, true);
+        if (this.parent?.subForm === this) {
+          super.onChange({ ...flags, modified }, false);
+        }
+        else {
+          super.onChange(flags, true);
+        }
         const value = _.clone(this.submission);
         flags.changed = value.changed = changed;
         flags.changes = changes;
@@ -1438,9 +1443,9 @@ export default class Webform extends NestedDataComponent {
             flags.fromIframe ||
             (flags.fromSubmission && this.rootPristine && this.pristine && flags.changed);
         const errors = shouldValidate
-            ? this.validate(value.data, { 
-                ...flags, 
-                noValidate: false, 
+            ? this.validate(value.data, {
+                ...flags,
+                noValidate: false,
                 process: 'change'
             })
             : [];

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;
       }
     }
@@ -1052,15 +1040,19 @@ export default class WebformBuilder extends Component {
     }
     this.keyboardActionsEnabled = keyboardActionsEnabled;
 
-    const isSubmitButton = (comp) => {
-      return (comp.type === 'button') && ((comp.action === 'submit') || !comp.action);
-    }
+    const { display, noAddSubmitButton, noDefaultSubmitButton } = this.options;
+    const { _id, components } = form;
 
-    const isShowSubmitButton = !this.options.noDefaultSubmitButton
-      && (!form.components.length || !form.components.find(comp => isSubmitButton(comp)));
+    const isSubmitButton = ({ type, action }) => type === 'button' && (action === 'submit' || !action);
+    const hasSubmitButton = components.some(isSubmitButton);
+    // Add submit button if form display was switched from wizard
+    // Don't add if there is noAddSubmitButton flag passed, or the form has id, or the form has a submit button already
+    const shouldAddSubmitButton =
+      (display === 'wizard' && !hasSubmitButton) ||
+      (!noAddSubmitButton && !_id && !hasSubmitButton);
 
-    // Ensure there is at least a submit button.
-    if (isShowSubmitButton) {
+      // Ensure there is at least a submit button.
+    if (!noDefaultSubmitButton && shouldAddSubmitButton) {
       form.components.push({
         type: 'button',
         label: 'Submit',
@@ -1224,6 +1216,7 @@ export default class WebformBuilder extends Component {
           'conditional',
           'customConditional',
           'id',
+          'logic',
           'fields.day.required',
           'fields.month.required',
           'fields.year.required',
@@ -1250,6 +1243,12 @@ export default class WebformBuilder extends Component {
           parentComponent.tabs[tabIndex].splice(index, 1, newComp);
           newComp.checkValidity = () => true;
           newComp.build(defaultValueComponent.element);
+          if (this.preview && !this.preview.defaultChanged) {
+            const defaultValue = _.get(this.preview._data, this.editForm._data.key);
+            if (_.isObject(defaultValue) && !_.isArray(defaultValue)) {
+              this.editForm._data.defaultValue = defaultValue;
+            }
+          }
         }
       }
       else {
@@ -1263,6 +1262,7 @@ export default class WebformBuilder extends Component {
           dataPath = getStringFromComponentPath(path);
         }
 
+        this.preview.defaultChanged = true;
         _.set(this.preview._data, dataPath, changed.value);
         _.set(this.webform._data, dataPath, changed.value);
       }
@@ -1361,6 +1361,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,