@formio/js 5.0.0-dev.5647.4cf82e8 → 5.0.0-dev.5650.cd53187

package/lib/mjs/Webform.js

@@ -1,34 +1,47 @@
-import _ from 'lodash';
-import moment from 'moment';
-import { compareVersions } from 'compare-versions';
-import { Component } from '@formio/core';
-import EventEmitter from './EventEmitter';
-import i18nDefaults from './i18n';
-import { Formio } from './Formio';
-import Components from './components/Components';
-import NestedDataComponent from './components/_classes/nesteddata/NestedDataComponent';
-import { fastCloneDeep, currentTimezone, unescapeHTML, getStringFromComponentPath, convertStringToHTMLElement, getArrayFromComponentPath, } from './utils/utils';
-import { eachComponent } from './utils/formUtils';
+import _ from "lodash";
+import moment from "moment";
+import { compareVersions } from "compare-versions";
+import EventEmitter from "./EventEmitter";
+import i18nDefaults from "./i18n";
+import { Formio } from "./Formio";
+import Components from "./components/Components";
+import NestedDataComponent from "./components/_classes/nesteddata/NestedDataComponent";
+import { fastCloneDeep, currentTimezone, unescapeHTML, getStringFromComponentPath, convertStringToHTMLElement, getArrayFromComponentPath, } from "./utils/utils";
+import { eachComponent } from "./utils/formUtils";
+// We need this here because dragula pulls in CustomEvent class that requires global to exist.
+if (typeof window !== 'undefined' && typeof window.global === 'undefined') {
+    window.global = window;
+}
 // Initialize the available forms.
 Formio.forms = {};
 // Allow people to register components.
 Formio.registerComponent = Components.setComponent;
+/**
+ *
+ * @param {any} icons  - The icons to use.
+ * @returns {any} - The icon set.
+ */
 function getIconSet(icons) {
-    if (icons === 'fontawesome') {
-        return 'fa';
+    if (icons === "fontawesome") {
+        return "fa";
     }
-    return icons || '';
+    return icons || "";
 }
+/**
+ *
+ * @param {any} options - The options to get.
+ * @returns {any} - The options.
+ */
 function getOptions(options) {
     options = _.defaults(options, {
         submitOnEnter: false,
-        iconset: getIconSet((options && options.icons) ? options.icons : Formio.icons),
+        iconset: getIconSet(options && options.icons ? options.icons : Formio.icons),
         i18next: null,
         saveDraft: false,
         alwaysDirty: false,
         saveDraftThrottle: 5000,
-        display: 'form',
-        cdnUrl: Formio.cdn.baseUrl
+        display: "form",
+        cdnUrl: Formio.cdn.baseUrl,
     });
     if (!options.events) {
         options.events = new EventEmitter();
@@ -48,36 +61,36 @@ function getOptions(options) {
  * @typedef {{[key: string]: JSON}} JSONObject
  */
 /**
- * @typedef {Object} FormioHooks
- * @property {function} [beforeSubmit]
- * @property {function} [beforeCancel]
- * @property {function} [beforeNext]
- * @property {function} [beforePrev]
- * @property {function} [attachComponent]
- * @property {function} [setDataValue]
- * @property {function} [addComponents]
- * @property {function} [addComponent]
- * @property {function} [customValidation]
- * @property {function} [attachWebform]
+ * @typedef {object} FormioHooks
+ * @property {Function} [beforeSubmit] - A function that is called before the form is submitted.
+ * @property {Function} [beforeCancel] - A function that is called before the form is canceled.
+ * @property {Function} [beforeNext] - A function that is called before moving to the next page in a multi-page form.
+ * @property {Function} [beforePrev] - A function that is called before moving to the previous page in a multi-page form.
+ * @property {Function} [attachComponent] - A function that is called when a component is attached to the form.
+ * @property {Function} [setDataValue] - A function that is called when setting the value of a data component.
+ * @property {Function} [addComponents] - A function that is called when adding multiple components to the form.
+ * @property {Function} [addComponent] - A function that is called when adding a single component to the form.
+ * @property {Function} [customValidation] - A function that is called for custom validation of the form.
+ * @property {Function} [attachWebform] - A function that is called when attaching a webform to the form.
  */
 /**
- * @typedef {Object} SanitizeConfig
- * @property {string[]} [addAttr]
- * @property {string[]} [addTags]
- * @property {string[]} [allowedAttrs]
- * @property {string[]} [allowedTags]
- * @property {string[]} [allowedUriRegex]
- * @property {string[]} [addUriSafeAttr]
+ * @typedef {object} SanitizeConfig
+ * @property {string[]} [addAttr] - The attributes to add.
+ * @property {string[]} [addTags] - The tags to add.
+ * @property {string[]} [allowedAttrs] - The allowed attributes.
+ * @property {string[]} [allowedTags] - The allowed tags.
+ * @property {string[]} [allowedUriRegex] - The allowed URI regex.
+ * @property {string[]} [addUriSafeAttr] - The URI safe attributes.
  */
 /**
- * @typedef {Object} ButtonSettings
- * @property {boolean} [showPrevious]
- * @property {boolean} [showNext]
- * @property {boolean} [showCancel]
- * @property {boolean} [showSubmit]
+ * @typedef {object} ButtonSettings
+ * @property {boolean} [showPrevious] - Show the "Previous" button.
+ * @property {boolean} [showNext] - Show the "Next" button.
+ * @property {boolean} [showCancel] - Show the "Cancel" button.
+ * @property {boolean} [showSubmit] - Show the "Submit" button.
  */
 /**
- * @typedef {Object} FormOptions
+ * @typedef {object} FormOptions
  * @property {boolean} [saveDraft] - Enable the save draft feature.
  * @property {number} [saveDraftThrottle] - The throttle for the save draft feature.
  * @property {boolean} [readOnly] - Set this form to readOnly.
@@ -95,7 +108,7 @@ function getOptions(options) {
  * @property {string} [componentErrorClass] - The error class for components.
  * @property {any} [templates] - The templates for this form.
  * @property {string} [iconset] - The iconset for this form.
- * @property {Component[]} [components] - The components for this form.
+ * @property {import('@formio/core').Component[]} [components] - The components for this form.
  * @property {{[key: string]: boolean}} [disabled] - Disabled components for this form.
  * @property {boolean} [showHiddenFields] - Show hidden fields.
  * @property {{[key: string]: boolean}} [hide] - Hidden components for this form.
@@ -112,34 +125,32 @@ function getOptions(options) {
  * @property {boolean} [sanitize] - Sanitize the form.
  * @property {SanitizeConfig} [sanitizeConfig] - The sanitize configuration for this form.
  * @property {ButtonSettings} [buttonSettings] - The button settings for this form.
- * @property {Object} [breadCrumbSettings] - The breadcrumb settings for this form.
+ * @property {object} [breadcrumbSettings] - The breadcrumb settings for this form.
  * @property {boolean} [allowPrevious] - Allow the previous button (for Wizard forms).
  * @property {string[]} [wizardButtonOrder] - The order of the buttons (for Wizard forms).
  * @property {boolean} [showCheckboxBackground] - Show the checkbox background.
+ * @property {boolean} [inputsOnly] - Only show inputs in the form and no labels.
+ * @property {boolean} [building] - If we are in the process of building the form.
  * @property {number} [zoom] - The zoom for PDF forms.
  */
-/**
- * Renders a Form.io form within the webpage.
- */
 export default class Webform extends NestedDataComponent {
     /**
-     * @type {FormOptions} - the options for this Webform.
+     * @type {import('Form').FormOptions} - the options for this Webform.
      */
     options;
     /**
      * Creates a new Form instance.
-     *
-     * @param {HTMLElement | Object | FormOptions} [elementOrOptions] - The DOM element to render this form within or the options to create this form instance.
-     * @param {FormOptions} [options] - The options to create a new form instance.
+     * @param {HTMLElement | object | import('Form').FormOptions} [elementOrOptions] - The DOM element to render this form within or the options to create this form instance.
+     * @param {import('Form').FormOptions} [options] - The options to create a new form instance.
      */
-    constructor(elementOrOptions, options) {
+    constructor(elementOrOptions, options = undefined) {
         let element, formOptions;
         if (elementOrOptions instanceof HTMLElement || options) {
             element = elementOrOptions;
-            formOptions = options;
+            formOptions = options || {};
         }
         else {
-            formOptions = elementOrOptions;
+            formOptions = elementOrOptions || {};
         }
         super(null, getOptions(formOptions));
         this.setElement(element);
@@ -153,12 +164,12 @@ export default class Webform extends NestedDataComponent {
          * The type of this element.
          * @type {string}
          */
-        this.type = 'form';
-        this._src = '';
+        this.type = "form";
+        this._src = "";
         this._loading = false;
         this._form = {};
         this.draftEnabled = false;
-        this.savingDraft = true;
+        this.savingDraft = false;
         if (this.options.saveDraftThrottle) {
             this.triggerSaveDraft = _.throttle(this.saveDraft.bind(this), this.options.saveDraftThrottle);
         }
@@ -172,13 +183,11 @@ export default class Webform extends NestedDataComponent {
         this.nosubmit = false;
         /**
          * Determines if the form has tried to be submitted, error or not.
-         *
          * @type {boolean}
          */
         this.submitted = false;
         /**
          * Determines if the form is being submitted at the moment.
-         *
          * @type {boolean}
          */
         this.submitting = false;
@@ -210,7 +219,6 @@ export default class Webform extends NestedDataComponent {
         /**
          * Promise that executes when the form is ready and rendered.
          * @type {Promise}
-         *
          * @example
          * import Webform from '@formio/js/Webform';
          * let form = new Webform(document.getElementById('formio'));
@@ -222,21 +230,18 @@ export default class Webform extends NestedDataComponent {
         this.formReady = new Promise((resolve, reject) => {
             /**
              * Called when the formReady state of this form has been resolved.
-             *
-             * @type {function}
+             * @type {Function}
              */
             this.formReadyResolve = resolve;
             /**
              * Called when this form could not load and is rejected.
-             *
-             * @type {function}
+             * @type {Function}
              */
             this.formReadyReject = reject;
         });
         /**
          * Promise that executes when the submission is ready and rendered.
          * @type {Promise}
-         *
          * @example
          * import Webform from '@formio/js/Webform';
          * let form = new Webform(document.getElementById('formio'));
@@ -248,14 +253,12 @@ export default class Webform extends NestedDataComponent {
         this.submissionReady = new Promise((resolve, reject) => {
             /**
              * Called when the formReady state of this form has been resolved.
-             *
-             * @type {function}
+             * @type {Function}
              */
             this.submissionReadyResolve = resolve;
             /**
              * Called when this form could not load and is rejected.
-             *
-             * @type {function}
+             * @type {Function}
              */
             this.submissionReadyReject = reject;
         });
@@ -264,20 +267,19 @@ export default class Webform extends NestedDataComponent {
         this.language = this.i18next.language;
         // See if we need to restore the draft from a user.
         if (this.options.saveDraft) {
-            this.formReady.then(() => {
-                if (!this.options.skipDraftRestore) {
+            if (this.options.skipDraftRestore) {
+                this.draftEnabled = true;
+                this.savingDraft = false;
+            }
+            else {
+                this.formReady.then(() => {
                     const user = Formio.getUser();
                     // Only restore a draft if the submission isn't explicitly set.
                     if (user && !this.submissionSet) {
                         this.restoreDraft(user._id);
                     }
-                }
-                else {
-                    // Enable drafts
-                    this.draftEnabled = true;
-                    this.savingDraft = false;
-                }
-            });
+                });
+            }
         }
         this.component.clearOnHide = false;
         // Ensure the root is set to this component.
@@ -296,9 +298,7 @@ export default class Webform extends NestedDataComponent {
     }
     /**
      * Sets the language for this form.
-     *
-     * @param lang
-     * @return {Promise}
+     * @param {string} lang - The language to use (e.g. 'en', 'sp', etc.)
      */
     set language(lang) {
         if (!this.i18next) {
@@ -313,7 +313,7 @@ export default class Webform extends NestedDataComponent {
                 return;
             }
             this.rebuild();
-            this.emit('languageChanged');
+            this.emit("languageChanged");
         });
     }
     get componentComponents() {
@@ -324,31 +324,25 @@ export default class Webform extends NestedDataComponent {
     }
     /**
      * Add a language for translations
-     *
-     * @param code
-     * @param lang
-     * @param active
-     * @return {*}
+     * @param {string} code - The language code for the language being added.
+     * @param {object} lang - The language translations.
+     * @param {boolean} [active] - If this language should be set as the active language.
      */
     addLanguage(code, lang, active = false) {
         if (this.i18next) {
             var translations = _.assign(fastCloneDeep(i18nDefaults.resources.en.translation), lang);
-            this.i18next.addResourceBundle(code, 'translation', translations, true, true);
+            this.i18next.addResourceBundle(code, "translation", translations, true, true);
             if (active) {
                 this.language = code;
             }
         }
     }
     keyboardCatchableElement(element) {
-        if (element.nodeName === 'TEXTAREA') {
+        if (element.nodeName === "TEXTAREA") {
             return false;
         }
-        if (element.nodeName === 'INPUT') {
-            return [
-                'text',
-                'email',
-                'password'
-            ].indexOf(element.type) === -1;
+        if (element.nodeName === "INPUT") {
+            return ["text", "email", "password"].indexOf(element.type) === -1;
         }
         return true;
     }
@@ -359,15 +353,15 @@ export default class Webform extends NestedDataComponent {
         }
         const ctrl = event.ctrlKey || event.metaKey;
         const keyCode = event.keyCode;
-        let char = '';
+        let char = "";
         if (65 <= keyCode && keyCode <= 90) {
             char = String.fromCharCode(keyCode);
         }
         else if (keyCode === 13) {
-            char = 'Enter';
+            char = "Enter";
         }
         else if (keyCode === 27) {
-            char = 'Esc';
+            char = "Esc";
         }
         _.each(this.shortcuts, (shortcut) => {
             if (shortcut.ctrl && !ctrl) {
@@ -384,21 +378,21 @@ export default class Webform extends NestedDataComponent {
             return;
         }
         shortcut = _.capitalize(shortcut);
-        if (shortcut === 'Enter' || shortcut === 'Esc') {
+        if (shortcut === "Enter" || shortcut === "Esc") {
             // Restrict Enter and Esc only for buttons
-            if (element.tagName !== 'BUTTON') {
+            if (element.tagName !== "BUTTON") {
                 return;
             }
             this.shortcuts.push({
                 shortcut,
-                element
+                element,
             });
         }
         else {
             this.shortcuts.push({
                 ctrl: true,
                 shortcut,
-                element
+                element,
             });
         }
     }
@@ -408,24 +402,27 @@ export default class Webform extends NestedDataComponent {
         }
         _.remove(this.shortcuts, {
             shortcut,
-            element
+            element,
         });
     }
     /**
      * Get the embed source of the form.
-     *
-     * @returns {string}
+     * @returns {string} - The source of the form.
      */
     get src() {
         return this._src;
     }
     /**
      * Loads the submission if applicable.
+     * @returns {Promise} - The promise that is triggered when the submission is loaded.
      */
     loadSubmission() {
         this.loadingSubmission = true;
         if (this.formio.submissionId) {
-            this.onSubmission = this.formio.loadSubmission().then((submission) => this.setSubmission(submission), (err) => this.submissionReadyReject(err)).catch((err) => this.submissionReadyReject(err));
+            this.onSubmission = this.formio
+                .loadSubmission()
+                .then((submission) => this.setSubmission(submission), (err) => this.submissionReadyReject(err))
+                .catch((err) => this.submissionReadyReject(err));
         }
         else {
             this.submissionReadyResolve();
@@ -434,18 +431,21 @@ export default class Webform extends NestedDataComponent {
     }
     /**
      * Set the src of the form renderer.
-     *
-     * @param value
-     * @param options
+     * @param {string} value - The source value to set.
+     * @param {any} options - The options to set.
+     * @returns {Promise} - The promise that is triggered when the form is set.
      */
     setSrc(value, options) {
         if (this.setUrl(value, options)) {
             this.nosubmit = false;
-            return this.formio.loadForm({ params: { live: 1 } }).then((form) => {
+            return this.formio
+                .loadForm({ params: { live: 1 } })
+                .then((form) => {
                 const setForm = this.setForm(form);
                 this.loadSubmission();
                 return setForm;
-            }).catch((err) => {
+            })
+                .catch((err) => {
                 console.warn(err);
                 this.formReadyReject(err);
             });
@@ -454,9 +454,7 @@ export default class Webform extends NestedDataComponent {
     }
     /**
      * Set the Form source, which is typically the Form.io embed URL.
-     *
      * @param {string} value - The value of the form embed url.
-     *
      * @example
      * import Webform from '@formio/js/Webform';
      * let form = new Webform(document.getElementById('formio'));
@@ -470,28 +468,25 @@ export default class Webform extends NestedDataComponent {
     }
     /**
      * Get the embed source of the form.
-     *
-     * @returns {string}
+     * @returns {string} - returns the source of the form.
      */
     get url() {
         return this._src;
     }
     /**
      * Sets the url of the form renderer.
-     *
-     * @param value
-     * @param options
+     * @param {string} value - The value to set the url to.
+     * @param {any} options - The options to set.
+     * @returns {boolean} - TRUE means the url was set, FALSE otherwise.
      */
     setUrl(value, options) {
-        if (!value ||
-            (typeof value !== 'string') ||
-            (value === this._src)) {
+        if (!value || typeof value !== "string" || value === this._src) {
             return false;
         }
         this._src = value;
         this.nosubmit = true;
         this.formio = this.options.formio = new Formio(value, options);
-        if (this.type === 'form') {
+        if (this.type === "form") {
             // Set the options source so this can be passed to other components.
             this.options.src = value;
         }
@@ -499,7 +494,6 @@ export default class Webform extends NestedDataComponent {
     }
     /**
      * Set the form source but don't initialize the form and submission from the url.
-     *
      * @param {string} value - The value of the form embed url.
      */
     set url(value) {
@@ -507,7 +501,6 @@ export default class Webform extends NestedDataComponent {
     }
     /**
      * Called when both the form and submission have been loaded.
-     *
      * @returns {Promise} - The promise to trigger when both form and submission have loaded.
      */
     get ready() {
@@ -519,7 +512,6 @@ export default class Webform extends NestedDataComponent {
     }
     /**
      * Returns if this form is loading.
-     *
      * @returns {boolean} - TRUE means the form is loading, FALSE otherwise.
      */
     get loading() {
@@ -527,18 +519,17 @@ export default class Webform extends NestedDataComponent {
     }
     /**
      * Set the loading state for this form, and also show the loader spinner.
-     *
      * @param {boolean} loading - If this form should be "loading" or not.
      */
     set loading(loading) {
         if (this._loading !== loading) {
             this._loading = loading;
             if (!this.loader && loading) {
-                this.loader = this.ce('div', {
-                    class: 'loader-wrapper'
+                this.loader = this.ce("div", {
+                    class: "loader-wrapper",
                 });
-                const spinner = this.ce('div', {
-                    class: 'loader text-center'
+                const spinner = this.ce("div", {
+                    class: "loader text-center",
                 });
                 this.loader.appendChild(spinner);
             }
@@ -561,7 +552,6 @@ export default class Webform extends NestedDataComponent {
     }
     /**
      * Sets the JSON schema for the form to be rendered.
-     *
      * @example
      * import Webform from '@formio/js/Webform';
      * let form = new Webform(document.getElementById('formio'));
@@ -589,12 +579,11 @@ export default class Webform extends NestedDataComponent {
      *     }
      *   ]
      * });
-     *
-     * @param {Object} form - The JSON schema of the form @see https://examples.form.io/example for an example JSON schema.
-     * @param flags
-     * @returns {*}
+     * @param {object} form - The JSON schema of the form @see https://examples.form.io/example for an example JSON schema.
+     * @param {any} flags - Any flags to apply when setting the form.
+     * @returns {Promise} - The promise that is triggered when the form is set.
      */
-    setForm(form, flags) {
+    setForm(form, flags = {}) {
         const isFormAlreadySet = this._form && this._form.components?.length;
         try {
             // Do not set the form again if it has been already set
@@ -624,17 +613,19 @@ export default class Webform extends NestedDataComponent {
         }
         // Use the sanitize config from the form settings or the global sanitize config if it is not provided in the options
         if (!this.options.sanitizeConfig && !this.builderMode) {
-            this.options.sanitizeConfig = _.get(form, 'settings.sanitizeConfig') || _.get(form, 'globalSettings.sanitizeConfig');
+            this.options.sanitizeConfig =
+                _.get(form, "settings.sanitizeConfig") ||
+                    _.get(form, "globalSettings.sanitizeConfig");
         }
-        if ('schema' in form && compareVersions(form.schema, '1.x') > 0) {
+        if ("schema" in form && compareVersions(form.schema, "1.x") > 0) {
             this.ready.then(() => {
-                this.setAlert('alert alert-danger', 'Form schema is for a newer version, please upgrade your renderer. Some functionality may not work.');
+                this.setAlert("alert alert-danger", "Form schema is for a newer version, please upgrade your renderer. Some functionality may not work.");
             });
         }
         // See if they pass a module, and evaluate it if so.
         if (form && form.module) {
             let formModule = null;
-            if (typeof form.module === 'string') {
+            if (typeof form.module === "string") {
                 try {
                     formModule = this.evaluate(`return ${form.module}`);
                 }
@@ -656,7 +647,7 @@ export default class Webform extends NestedDataComponent {
         this.initialized = false;
         const rebuild = this.rebuild() || Promise.resolve();
         return rebuild.then(() => {
-            this.emit('formLoad', form);
+            this.emit("formLoad", form);
             this.triggerCaptcha();
             // Make sure to trigger onChange after a render event occurs to speed up form rendering.
             setTimeout(() => {
@@ -668,37 +659,33 @@ export default class Webform extends NestedDataComponent {
     }
     /**
      * Gets the form object.
-     *
-     * @returns {Object} - The form JSON schema.
+     * @returns {object} - The form JSON schema.
      */
     get form() {
         if (!this._form) {
             this._form = {
-                components: []
+                components: [],
             };
         }
         return this._form;
     }
     /**
      * Sets the form value.
-     *
      * @alias setForm
-     * @param {Object} form - The form schema object.
+     * @param {object} form - The form schema object.
      */
     set form(form) {
         this.setForm(form);
     }
     /**
      * Returns the submission object that was set within this form.
-     *
-     * @returns {Object}
+     * @returns {object} - The submission object.
      */
     get submission() {
         return this.getValue();
     }
     /**
      * Sets the submission of a form.
-     *
      * @example
      * import Webform from '@formio/js/Webform';
      * let form = new Webform(document.getElementById('formio'));
@@ -708,121 +695,133 @@ export default class Webform extends NestedDataComponent {
      *   lastName: 'Smith',
      *   email: 'joe@example.com'
      * }};
-     *
-     * @param {Object} submission - The Form.io submission object.
+     * @param {object} submission - The Form.io submission object.
      */
     set submission(submission) {
         this.setSubmission(submission);
     }
+    /**
+     * Sets the submission value
+     * @param {object|null|undefined} submission - The submission to set.
+     * @param {object|null|undefined} flags - Any flags to apply when setting the submission.
+     * @returns {void}
+     */
+    onSetSubmission(submission, flags = {}) {
+        this.submissionSet = true;
+        this.triggerChange(flags);
+        this.emit('beforeSetSubmission', submission);
+        this.setValue(submission, flags);
+    }
     /**
      * Sets a submission and returns the promise when it is ready.
-     * @param submission
-     * @param flags
-     * @return {Promise.<TResult>}
+     * @param {any} submission - The submission to set.
+     * @param {any} flags - Any flags to apply when setting the submission.
+     * @returns {Promise} - The promise that is triggered when the submission is set.
      */
     setSubmission(submission, flags = {}) {
         flags = {
             ...flags,
-            fromSubmission: _.has(flags, 'fromSubmission') ? flags.fromSubmission : true,
+            fromSubmission: _.has(flags, "fromSubmission") ? flags.fromSubmission : true,
         };
-        return this.onSubmission = this.formReady.then((resolveFlags) => {
+        return (this.onSubmission = this.formReady
+            .then((resolveFlags) => {
             if (resolveFlags) {
                 flags = {
                     ...flags,
-                    ...resolveFlags
+                    ...resolveFlags,
                 };
             }
-            this.submissionSet = true;
-            this.triggerChange(flags);
-            this.emit('beforeSetSubmission', submission);
-            this.setValue(submission, flags);
+            this.onSetSubmission(submission, flags);
             return this.submissionReadyResolve(submission);
-        }, (err) => this.submissionReadyReject(err)).catch((err) => this.submissionReadyReject(err));
+        }, (err) => this.submissionReadyReject(err))
+            .catch((err) => this.submissionReadyReject(err)));
     }
     handleDraftError(errName, errDetails, restoreDraft) {
-        const errorMessage = _.trim(`${this.t(errName)} ${errDetails || ''}`);
+        const errorMessage = _.trim(`${this.t(errName)} ${errDetails || ""}`);
         console.warn(errorMessage);
-        this.emit(restoreDraft ? 'restoreDraftError' : 'saveDraftError', errDetails || errorMessage);
+        this.emit(restoreDraft ? "restoreDraftError" : "saveDraftError", errDetails || errorMessage);
     }
-    /**
-     * Saves a submission draft.
-     */
     saveDraft() {
         if (!this.draftEnabled) {
             return;
         }
         if (!this.formio) {
-            this.handleDraftError('saveDraftInstanceError');
+            this.handleDraftError("saveDraftInstanceError");
             return;
         }
         if (!Formio.getUser()) {
-            this.handleDraftError('saveDraftAuthError');
+            this.handleDraftError("saveDraftAuthError");
             return;
         }
         const draft = fastCloneDeep(this.submission);
-        draft.state = 'draft';
+        draft.state = "draft";
         if (!this.savingDraft && !this.submitting) {
-            this.emit('saveDraftBegin');
+            this.emit("saveDraftBegin");
             this.savingDraft = true;
-            this.formio.saveSubmission(draft).then((sub) => {
+            this.formio
+                .saveSubmission(draft)
+                .then((sub) => {
                 // Set id to submission to avoid creating new draft submission
                 this.submission._id = sub._id;
                 this.savingDraft = false;
-                this.emit('saveDraft', sub);
+                this.emit("saveDraft", sub);
             })
-                .catch(err => {
+                .catch((err) => {
                 this.savingDraft = false;
-                this.handleDraftError('saveDraftError', err);
+                this.handleDraftError("saveDraftError", err);
             });
         }
     }
     /**
      * Restores a draft submission based on the user who is authenticated.
-     *
-     * @param {userId} - The user id where we need to restore the draft from.
+     * @param {string} userId - The user id where we need to restore the draft from.
      */
     restoreDraft(userId) {
         const formio = this.formio || this.options.formio;
         if (!formio) {
-            this.handleDraftError('restoreDraftInstanceError', null, true);
+            this.handleDraftError("restoreDraftInstanceError", null, true);
             return;
         }
         this.savingDraft = true;
-        formio.loadSubmissions({
+        formio
+            .loadSubmissions({
             params: {
                 state: 'draft',
                 owner: userId,
                 sort: '-created'
-            }
-        }).then(submissions => {
+            },
+        })
+            .then((submissions) => {
             if (submissions.length > 0 && !this.options.skipDraftRestore) {
                 const draft = fastCloneDeep(submissions[0]);
                 return this.setSubmission(draft).then(() => {
                     this.draftEnabled = true;
                     this.savingDraft = false;
-                    this.emit('restoreDraft', draft);
+                    this.emit("restoreDraft", draft);
                 });
             }
             // Enable drafts so that we can keep track of changes.
             this.draftEnabled = true;
             this.savingDraft = false;
-            this.emit('restoreDraft', null);
+            this.emit("restoreDraft", null);
         })
-            .catch(err => {
+            .catch((err) => {
             this.draftEnabled = true;
             this.savingDraft = false;
-            this.handleDraftError('restoreDraftError', err, true);
+            this.handleDraftError("restoreDraftError", err, true);
         });
     }
     get schema() {
-        const schema = fastCloneDeep(_.omit(this._form, ['components']));
+        const schema = fastCloneDeep(_.omit(this._form, ["components"]));
         schema.components = [];
         this.eachComponent((component) => schema.components.push(component.schema));
         return schema;
     }
     mergeData(_this, _that) {
         _.mergeWith(_this, _that, (thisValue, thatValue) => {
-            if (Array.isArray(thisValue) && Array.isArray(thatValue) && thisValue.length !== thatValue.length) {
+            if (Array.isArray(thisValue) &&
+                Array.isArray(thatValue) &&
+                thisValue.length !== thatValue.length) {
                 return thatValue;
             }
         });
@@ -831,13 +830,10 @@ export default class Webform extends NestedDataComponent {
         if (!submission || !submission.data) {
             submission = {
                 data: {},
-                metadata: submission.metadata,
             };
         }
         // Metadata needs to be available before setValue
-        this._submission.metadata = submission.metadata
-            ? _.cloneDeep(submission.metadata)
-            : {};
+        this._submission.metadata = submission.metadata ? _.cloneDeep(submission.metadata) : {};
         this.editing = !!submission._id;
         // Set the timezone in the options if available.
         if (!this.options.submissionTimezone &&
@@ -866,6 +862,7 @@ export default class Webform extends NestedDataComponent {
     }
     /**
      * Build the form.
+     * @returns {Promise} - The promise that is triggered when the form is built.
      */
     init() {
         if (this.options.submission) {
@@ -887,28 +884,33 @@ export default class Webform extends NestedDataComponent {
         else {
             this.component = this.form;
         }
-        this.component.type = 'form';
+        this.component.type = "form";
         this.component.input = false;
         this.addComponents();
-        this.on('submitButton', options => {
-            this.submit(false, options).catch(e => {
-                options.instance.loading = false;
+        this.on("submitButton", (options) => {
+            this.submit(false, options).catch((e) => {
+                if (options?.instance) {
+                    options.instance.loading = false;
+                }
                 return e !== false && e !== undefined && console.log(e);
             });
         }, true);
-        this.on('checkValidity', (data) => this.validate(data, { dirty: true, process: 'change' }), true);
-        this.on('requestUrl', (args) => (this.submitUrl(args.url, args.headers)), true);
-        this.on('resetForm', () => this.resetValue(), true);
-        this.on('deleteSubmission', () => this.deleteSubmission(), true);
-        this.on('refreshData', () => this.updateValue(), true);
+        this.on("checkValidity", (data) => this.validate(data, { dirty: true, process: "change" }), true);
+        this.on("requestUrl", (args) => this.submitUrl(args.url, args.headers), true);
+        this.on("resetForm", () => this.resetValue(), true);
+        this.on("deleteSubmission", () => this.deleteSubmission(), true);
+        this.on("refreshData", () => this.updateValue(), true);
         this.executeFormController();
         return this.formReady;
     }
     executeFormController() {
         // If no controller value or
         // hidden and set to clearOnHide (Don't calculate a value for a hidden field set to clear when hidden)
-        if (!this.form || !this.form.controller
-            || ((!this.visible || this.component.hidden) && this.component.clearOnHide && !this.rootPristine)) {
+        if (!this.form ||
+            !this.form.controller ||
+            ((!this.visible || this.component.hidden) &&
+                this.component.clearOnHide &&
+                !this.rootPristine)) {
             return false;
         }
         this.formReady.then(() => {
@@ -918,20 +920,23 @@ export default class Webform extends NestedDataComponent {
             });
         });
     }
+    /**
+     *
+     */
     teardown() {
-        this.emit('formDelete', this.id);
+        this.emit("formDelete", this.id);
         delete Formio.forms[this.id];
         delete this.executeShortcuts;
         delete this.triggerSaveDraft;
         super.teardown();
     }
     destroy(all = false) {
-        this.off('submitButton');
-        this.off('checkValidity');
-        this.off('requestUrl');
-        this.off('resetForm');
-        this.off('deleteSubmission');
-        this.off('refreshData');
+        this.off("submitButton");
+        this.off("checkValidity");
+        this.off("requestUrl");
+        this.off("resetForm");
+        this.off("deleteSubmission");
+        this.off("refreshData");
         return super.destroy(all);
     }
     build(element) {
@@ -944,17 +949,17 @@ export default class Webform extends NestedDataComponent {
         return this.ready;
     }
     getClassName() {
-        let classes = 'formio-form';
+        let classes = "formio-form";
         if (this.options.readOnly) {
-            classes += ' formio-read-only';
+            classes += " formio-read-only";
         }
         return classes;
     }
     render() {
-        return super.render(this.renderTemplate('webform', {
+        return super.render(this.renderTemplate("webform", {
             classes: this.getClassName(),
             children: this.renderComponents(),
-        }), this.builderMode ? 'builder' : 'form', true);
+        }), this.builderMode ? "builder" : "form", true);
     }
     redraw() {
         // Don't bother if we have not built yet.
@@ -967,13 +972,13 @@ export default class Webform extends NestedDataComponent {
     }
     attach(element) {
         this.setElement(element);
-        this.loadRefs(element, { webform: 'single' });
+        this.loadRefs(element, { webform: "single" });
         const childPromise = this.attachComponents(this.refs.webform);
-        this.addEventListener(document, 'keydown', this.executeShortcuts);
+        this.addEventListener(document, "keydown", this.executeShortcuts);
         this.currentForm = this;
-        this.hook('attachWebform', element, this);
+        this.hook("attachWebform", element, this);
         return childPromise.then(() => {
-            this.emit('render', this.element);
+            this.emit("render", this.element);
             return this.setValue(this._submission, {
                 noUpdateEvent: true,
             });
@@ -990,24 +995,23 @@ export default class Webform extends NestedDataComponent {
         return result;
     }
     resetValue() {
-        _.each(this.getComponents(), (comp) => (comp.resetValue()));
+        _.each(this.getComponents(), (comp) => comp.resetValue());
         this.setPristine(true);
         this.onChange({ resetValue: true });
     }
     /**
      * Sets a new alert to display in the error dialog of the form.
-     *
      * @param {string} type - The type of alert to display. "danger", "success", "warning", etc.
      * @param {string} message - The message to show in the alert.
-     * @param {Object} options
+     * @param {object} options - The options for the alert.
      */
     setAlert(type, message, options) {
         if (!type && this.submitted) {
             if (this.alert) {
                 if (this.refs.errorRef && this.refs.errorRef.length) {
-                    this.refs.errorRef.forEach(el => {
-                        this.removeEventListener(el, 'click');
-                        this.removeEventListener(el, 'keypress');
+                    this.refs.errorRef.forEach((el) => {
+                        this.removeEventListener(el, "click");
+                        this.removeEventListener(el, "keypress");
                     });
                 }
                 this.removeChild(this.alert);
@@ -1017,16 +1021,16 @@ export default class Webform extends NestedDataComponent {
         }
         if (this.options.noAlerts) {
             if (!message) {
-                this.emit('error', false);
+                this.emit("error", false);
             }
             return;
         }
         if (this.alert) {
             try {
                 if (this.refs.errorRef && this.refs.errorRef.length) {
-                    this.refs.errorRef.forEach(el => {
-                        this.removeEventListener(el, 'click');
-                        this.removeEventListener(el, 'keypress');
+                    this.refs.errorRef.forEach((el) => {
+                        this.removeEventListener(el, "click");
+                        this.removeEventListener(el, "keypress");
                     });
                 }
                 this.removeChild(this.alert);
@@ -1044,21 +1048,21 @@ export default class Webform extends NestedDataComponent {
             const templateOptions = {
                 message: message instanceof HTMLElement ? message.outerHTML : message,
                 attrs: attrs,
-                type
+                type,
             };
-            this.alert = convertStringToHTMLElement(this.renderTemplate('alert', templateOptions), `#${attrs.id}`);
+            this.alert = convertStringToHTMLElement(this.renderTemplate("alert", templateOptions), `#${attrs.id}`);
         }
         if (!this.alert) {
             return;
         }
-        this.loadRefs(this.alert, { errorRef: 'multiple' });
+        this.loadRefs(this.alert, { errorRef: "multiple" });
         if (this.refs.errorRef && this.refs.errorRef.length) {
-            this.refs.errorRef.forEach(el => {
-                this.addEventListener(el, 'click', (e) => {
+            this.refs.errorRef.forEach((el) => {
+                this.addEventListener(el, "click", (e) => {
                     const key = e.currentTarget.dataset.componentKey;
                     this.focusOnComponent(key);
                 });
-                this.addEventListener(el, 'keydown', (e) => {
+                this.addEventListener(el, "keydown", (e) => {
                     if (e.keyCode === 13) {
                         e.preventDefault();
                         const key = e.currentTarget.dataset.componentKey;
@@ -1071,9 +1075,7 @@ export default class Webform extends NestedDataComponent {
     }
     /**
      * Focus on selected component.
-     *
      * @param {string} key - The key of selected component.
-     * @returns {*}
      */
     focusOnComponent(key) {
         if (key) {
@@ -1085,16 +1087,24 @@ export default class Webform extends NestedDataComponent {
     }
     /**
      * Show the errors of this form within the alert dialog.
-     *
-     * @param {Object} error - An optional additional error to display along with the component errors.
+     * @param {object} error - An optional additional error to display along with the component errors.
      * @returns {*}
      */
     /* eslint-disable no-unused-vars */
+    /**
+     *
+     * @param {Array} errors - An array of errors to display.
+     * @param {boolean} triggerEvent - Whether or not to trigger the error event.
+     * @returns {void|Array} - The errors that were set.
+     */
     showErrors(errors, triggerEvent) {
         this.loading = false;
         if (!Array.isArray(errors)) {
             errors = [errors];
         }
+        if (Array.isArray(this.errors)) {
+            errors = _.union(errors, this.errors);
+        }
         errors = errors.concat(this.customErrors).filter((err) => !!err);
         if (!errors.length) {
             this.setAlert(false);
@@ -1126,42 +1136,46 @@ export default class Webform extends NestedDataComponent {
         });
         const displayedErrors = [];
         if (errors.length) {
-            errors = _.uniqBy(errors, error => error.message);
+            errors = _.uniqBy(errors, (error) => [error.message, error.component?.id, error.context?.path].join());
             const createListItem = (message, index) => {
                 const err = errors[index];
                 const messageFromIndex = !_.isUndefined(index) && errors && errors[index];
-                const keyOrPath = (messageFromIndex?.formattedKeyOrPath || messageFromIndex?.path || messageFromIndex?.context?.path) || (err.context?.component && err.context?.component.key) || (err.component && err.component.key) || err.fromServer && err.path;
-                const formattedKeyOrPath = keyOrPath ? getStringFromComponentPath(keyOrPath) : '';
-                if (typeof err !== 'string' && !err.formattedKeyOrPath) {
+                const keyOrPath = messageFromIndex?.formattedKeyOrPath ||
+                    messageFromIndex?.path ||
+                    messageFromIndex?.context?.path ||
+                    (err.context?.component && err.context?.component.key) ||
+                    (err.component && err.component.key) ||
+                    (err.fromServer && err.path);
+                const formattedKeyOrPath = keyOrPath ? getStringFromComponentPath(keyOrPath) : "";
+                if (typeof err !== "string" && !err.formattedKeyOrPath) {
                     err.formattedKeyOrPath = formattedKeyOrPath;
                 }
                 return {
                     message: unescapeHTML(message),
-                    keyOrPath: formattedKeyOrPath
+                    keyOrPath: formattedKeyOrPath,
                 };
             };
             errors.forEach(({ message, context, fromServer, component }, index) => {
                 const text = !component?.label || context?.hasLabel || fromServer
-                    ? this.t('alertMessage', { message: this.t(message) })
-                    : this.t('alertMessageWithLabel', {
+                    ? this.t("alertMessage", { message: this.t(message) })
+                    : this.t("alertMessageWithLabel", {
                         label: this.t(component?.label),
                         message: this.t(message),
                     });
                 displayedErrors.push(createListItem(text, index));
             });
         }
-        const errorsList = this.renderTemplate('errorsList', { errors: displayedErrors });
-        this.root.setAlert('danger', errorsList);
+        const errorsList = this.renderTemplate("errorsList", { errors: displayedErrors });
+        this.root.setAlert("danger", errorsList);
         if (triggerEvent) {
-            this.emit('error', errors);
+            this.emit("error", errors);
         }
         return errors;
     }
     /* eslint-enable no-unused-vars */
     /**
      * Called when the submission has completed, or if the submission needs to be sent to an external library.
-     *
-     * @param {Object} submission - The submission object.
+     * @param {object} submission - The submission object.
      * @param {boolean} saved - Whether or not this submission was saved to the server.
      * @returns {object} - The submission object.
      */
@@ -1172,25 +1186,25 @@ export default class Webform extends NestedDataComponent {
         // We want to return the submitted submission and setValue will mutate the submission so cloneDeep it here.
         this.setValue(fastCloneDeep(submission), {
             noValidate: true,
-            noCheck: true
+            noCheck: true,
         });
-        this.setAlert('success', `<p>${this.t('complete')}</p>`);
+        this.setAlert("success", `<p>${this.t("complete")}</p>`);
         // Cancel triggered saveDraft to prevent overriding the submitted state
         if (this.draftEnabled && this.triggerSaveDraft?.cancel) {
             this.triggerSaveDraft.cancel();
         }
-        this.emit('submit', submission, saved);
+        this.emit("submit", submission, saved);
         if (saved) {
-            this.emit('submitDone', submission);
+            this.emit("submitDone", submission);
         }
         return submission;
     }
     normalizeError(error) {
         if (error) {
-            if (typeof error === 'object' && 'details' in error) {
+            if (typeof error === "object" && "details" in error) {
                 error = error.details;
             }
-            if (typeof error === 'string') {
+            if (typeof error === "string") {
                 error = { message: error };
             }
         }
@@ -1198,17 +1212,17 @@ export default class Webform extends NestedDataComponent {
     }
     /**
      * Called when an error occurs during the submission.
-     *
-     * @param {Object} error - The error that occured.
+     * @param {object} error - The error that occured.
+     * @returns {Array} errors - All errors.
      */
     onSubmissionError(error) {
         error = this.normalizeError(error);
         this.submitting = false;
         this.setPristine(false);
-        this.emit('submitError', error || this.errors);
+        this.emit("submitError", error || this.errors);
         // Allow for silent cancellations (no error message, no submit button error state)
         if (error && error.silent) {
-            this.emit('change', { isValid: true }, { silent: true });
+            this.emit("change", { isValid: true }, { silent: true });
             return false;
         }
         const errors = this.showErrors(error, true);
@@ -1219,14 +1233,20 @@ export default class Webform extends NestedDataComponent {
     }
     /**
      * Trigger the change event for this form.
-     *
-     * @param changed
-     * @param flags
+     * @param {any} flags - The flags to set on this change event.
+     * @param {any} changed - The changed object which reflects the changes in the form.
+     * @param {boolean} modified - Whether or not the form has been modified.
+     * @param {any} changes - The changes that have occured in the form.
      */
     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;
@@ -1234,13 +1254,21 @@ export default class Webform extends NestedDataComponent {
             this.pristine = false;
         }
         this.checkData(value.data, flags);
-        const shouldValidate = !flags.noValidate || flags.fromIFrame || (flags.fromSubmission && this.rootPristine && this.pristine && flags.changed);
-        const errors = shouldValidate ? this.validate(value.data, { ...flags, process: 'change' }) : [];
-        value.isValid = errors.length === 0;
+        const shouldValidate = !flags.noValidate ||
+            flags.fromIframe ||
+            (flags.fromSubmission && this.rootPristine && this.pristine && flags.changed);
+        const errors = shouldValidate
+            ? this.validate(value.data, {
+                ...flags,
+                noValidate: false,
+                process: 'change'
+            })
+            : [];
+        value.isValid = (errors || []).filter(err => !err.fromServer).length === 0;
         this.loading = false;
         if (this.submitted) {
             // show server errors while they are not cleaned/fixed
-            const nonComponentServerErrors = _.filter(this.serverErrors || [], err => !err.component && !err.path);
+            const nonComponentServerErrors = _.filter(this.serverErrors || [], (err) => !err.component && !err.path);
             this.showErrors(nonComponentServerErrors.length ? nonComponentServerErrors : errors);
         }
         // See if we need to save the draft of the form.
@@ -1248,38 +1276,39 @@ export default class Webform extends NestedDataComponent {
             this.triggerSaveDraft();
         }
         if (!flags || !flags.noEmit) {
-            this.emit('change', value, flags, modified);
+            this.emit("change", value, flags, modified);
             isChangeEventEmitted = true;
         }
         // The form is initialized after the first change event occurs.
         if (isChangeEventEmitted && !this.initialized) {
-            this.emit('initialized');
+            this.emit("initialized");
             this.initialized = true;
         }
     }
     /**
      * Send a delete request to the server.
+     * @returns {Promise} - The promise that is triggered when the delete is complete.
      */
     deleteSubmission() {
-        return this.formio.deleteSubmission()
-            .then(() => {
-            this.emit('submissionDeleted', this.submission);
+        return this.formio.deleteSubmission().then(() => {
+            this.emit("submissionDeleted", this.submission);
             this.resetValue();
         });
     }
     /**
      * Cancels the submission.
-     *
+     * @param {boolean} noconfirm - Whether or not to confirm the cancellation.
      * @alias reset
+     * @returns {boolean} - TRUE means the submission was cancelled, FALSE otherwise.
      */
     cancel(noconfirm) {
-        const shouldReset = this.hook('beforeCancel', true);
-        if (shouldReset && (noconfirm || confirm(this.t('confirmCancel')))) {
+        const shouldReset = this.hook("beforeCancel", true);
+        if (shouldReset && (noconfirm || confirm(this.t("confirmCancel")))) {
             this.resetValue();
             return true;
         }
         else {
-            this.emit('cancelSubmit');
+            this.emit("cancelSubmit");
             return false;
         }
     }
@@ -1287,14 +1316,14 @@ export default class Webform extends NestedDataComponent {
         // Add in metadata about client submitting the form
         submission.metadata = submission.metadata || {};
         _.defaults(submission.metadata, {
-            timezone: _.get(this, '_submission.metadata.timezone', currentTimezone()),
-            offset: parseInt(_.get(this, '_submission.metadata.offset', moment().utcOffset()), 10),
+            timezone: _.get(this, "_submission.metadata.timezone", currentTimezone()),
+            offset: parseInt(_.get(this, "_submission.metadata.offset", moment().utcOffset()), 10),
             origin: document.location.origin,
             referrer: document.referrer,
             browserName: navigator.appName,
             userAgent: navigator.userAgent,
             pathName: window.location.pathname,
-            onLine: navigator.onLine
+            onLine: navigator.onLine,
         });
     }
     submitForm(options = {}) {
@@ -1304,29 +1333,30 @@ export default class Webform extends NestedDataComponent {
             if (this.options.readOnly) {
                 return resolve({
                     submission: this.submission,
-                    saved: false
+                    saved: false,
                 });
             }
             const submission = fastCloneDeep(this.submission || {});
             this.setMetadata(submission);
-            submission.state = options.state || submission.state || 'submitted';
-            const isDraft = (submission.state === 'draft');
-            this.hook('beforeSubmit', { ...submission, component: options.component }, (err, data) => {
+            submission.state = options.state || submission.state || "submitted";
+            const isDraft = submission.state === "draft";
+            this.hook("beforeSubmit", { ...submission, component: options.component }, (err, data) => {
                 if (err) {
                     return reject(err);
                 }
-                submission._vnote = data && data._vnote ? data._vnote : '';
+                submission._vnote = data && data._vnote ? data._vnote : "";
                 try {
                     if (!isDraft && !options.noValidate) {
                         if (!submission.data) {
-                            return reject('Invalid Submission');
+                            return reject("Invalid Submission");
                         }
                         const errors = this.validate(submission.data, {
                             dirty: true,
                             silentCheck: false,
-                            process: 'submit'
+                            process: "submit",
                         });
-                        if (errors.length || options.beforeSubmitResults?.some((result) => result.status === 'rejected')) {
+                        if (errors.length ||
+                            options.beforeSubmitResults?.some((result) => result.status === "rejected")) {
                             return reject(errors);
                         }
                     }
@@ -1335,20 +1365,20 @@ export default class Webform extends NestedDataComponent {
                     console.error(err);
                 }
                 this.everyComponent((comp) => {
-                    if (submission._vnote && comp.type === 'form' && comp.component.reference) {
+                    if (submission._vnote && comp.type === "form" && comp.component.reference) {
                         _.get(submission.data, comp.path, {})._vnote = submission._vnote;
                     }
                     const { persistent } = comp.component;
-                    if (persistent === 'client-only') {
+                    if (persistent === "client-only") {
                         _.unset(submission.data, comp.path);
                     }
                 });
-                this.hook('customValidation', { ...submission, component: options.component }, (err) => {
+                this.hook("customValidation", { ...submission, component: options.component }, (err) => {
                     if (err) {
                         // If string is returned, cast to object.
-                        if (typeof err === 'string') {
+                        if (typeof err === "string") {
                             err = {
-                                message: err
+                                message: err,
                             };
                         }
                         // Ensure err is an array.
@@ -1358,7 +1388,10 @@ export default class Webform extends NestedDataComponent {
                     this.loading = true;
                     // Use the form action to submit the form if available.
                     if (this._form && this._form.action) {
-                        const method = (submission.data._id && this._form.action.includes(submission.data._id)) ? 'PUT' : 'POST';
+                        const method = submission.data._id &&
+                            this._form.action.includes(submission.data._id)
+                            ? "PUT"
+                            : "POST";
                         return Formio.makeStaticRequest(this._form.action, method, submission, this.formio ? this.formio.options : {})
                             .then((result) => resolve({
                             submission: result,
@@ -1377,7 +1410,9 @@ export default class Webform extends NestedDataComponent {
                         });
                     }
                     // If this is an actionUrl, then make sure to save the action and not the submission.
-                    const submitMethod = submitFormio.actionUrl ? 'saveAction' : 'saveSubmission';
+                    const submitMethod = submitFormio.actionUrl
+                        ? "saveAction"
+                        : "saveSubmission";
                     submitFormio[submitMethod](submission)
                         .then((result) => resolve({
                         submission: result,
@@ -1393,13 +1428,15 @@ export default class Webform extends NestedDataComponent {
     }
     setServerErrors(error) {
         if (error.details) {
-            this.serverErrors = error.details.filter((err) => err.level ? err.level === 'error' : err).map((err) => {
+            this.serverErrors = error.details
+                .filter((err) => (err.level ? err.level === "error" : err))
+                .map((err) => {
                 err.fromServer = true;
                 return err;
             });
         }
-        else if (typeof error === 'string') {
-            this.serverErrors = [{ fromServer: true, level: 'error', message: error }];
+        else if (typeof error === "string") {
+            this.serverErrors = [{ fromServer: true, level: "error", message: error }];
         }
     }
     executeSubmit(options) {
@@ -1430,7 +1467,6 @@ export default class Webform extends NestedDataComponent {
     }
     /**
      * Submits the form.
-     *
      * @example
      * import Webform from '@formio/js/Webform';
      * let form = new Webform(document.getElementById('formio'));
@@ -1443,12 +1479,11 @@ export default class Webform extends NestedDataComponent {
      * form.submit().then((submission) => {
      *   console.log(submission);
      * });
-     *
      * @param {boolean} before - If this submission occured from the before handlers.
-     *
+     * @param {any} options - The options to use when submitting this form.
      * @returns {Promise} - A promise when the form is done submitting.
      */
-    submit(before, options = {}) {
+    submit(before = false, options = {}) {
         this.submissionInProcess = true;
         if (!before) {
             return this.beforeSubmit(options).then(() => this.executeSubmit(options));
@@ -1459,37 +1494,41 @@ export default class Webform extends NestedDataComponent {
     }
     submitUrl(URL, headers) {
         if (!URL) {
-            return console.warn('Missing URL argument');
+            return console.warn("Missing URL argument");
         }
         const submission = this.submission || {};
         const API_URL = URL;
         const settings = {
-            method: 'POST',
-            headers: {}
+            method: "POST",
+            headers: {},
         };
         if (headers && headers.length > 0) {
             headers.map((e) => {
-                if (e.header !== '' && e.value !== '') {
+                if (e.header !== "" && e.value !== "") {
                     settings.headers[e.header] = this.interpolate(e.value, submission);
                 }
             });
         }
         if (API_URL && settings) {
-            Formio.makeStaticRequest(API_URL, settings.method, submission, { headers: settings.headers }).then(() => {
-                this.emit('requestDone');
-                this.setAlert('success', '<p> Success </p>');
-            }).catch((e) => {
-                const message = `${e.statusText ? e.statusText : ''} ${e.status ? e.status : e}`;
-                this.emit('error', message);
+            Formio.makeStaticRequest(API_URL, settings.method, submission, {
+                headers: settings.headers,
+            })
+                .then(() => {
+                this.emit("requestDone");
+                this.setAlert("success", "<p> Success </p>");
+            })
+                .catch((e) => {
+                const message = `${e.statusText ? e.statusText : ""} ${e.status ? e.status : e}`;
+                this.emit("error", message);
                 console.error(message);
-                this.setAlert('danger', `<p> ${message} </p>`);
+                this.setAlert("danger", `<p> ${message} </p>`);
                 return Promise.reject(this.onSubmissionError(e));
             });
         }
         else {
-            this.emit('error', 'You should add a URL to this button.');
-            this.setAlert('warning', 'You should add a URL to this button.');
-            return console.warn('You should add a URL to this button.');
+            this.emit("error", "You should add a URL to this button.");
+            this.setAlert("warning", "You should add a URL to this button.");
+            return console.warn("You should add a URL to this button.");
         }
     }
     triggerCaptcha() {
@@ -1508,7 +1547,7 @@ export default class Webform extends NestedDataComponent {
     }
     set nosubmit(value) {
         this._nosubmit = !!value;
-        this.emit('nosubmit', this._nosubmit);
+        this.emit("nosubmit", this._nosubmit);
     }
     get nosubmit() {
         return this._nosubmit || false;