@formio/js 5.0.0-rc.38 → 5.0.0-rc.40

package/lib/cjs/translations/en.js

@@ -16,7 +16,7 @@ exports.default = {
     required: '{{field}} is required',
     unique: '{{field}} must be unique',
     array: '{{field}} must be an array',
-    array_nonempty: '{{field}} must be a non-empty array',
+    array_nonempty: '{{field}} must be a non-empty array', // eslint-disable-line camelcase
     nonarray: '{{field}} must not be an array',
     select: '{{field}} contains an invalid selection',
     pattern: '{{field}} does not match the pattern {{pattern}}',
@@ -32,11 +32,11 @@ exports.default = {
     minYear: '{{field}} should not contain year less than {{minYear}}',
     minSelectedCount: 'You must select at least {{minCount}} items',
     maxSelectedCount: 'You may only select up to {{maxCount}} items',
-    invalid_email: '{{field}} must be a valid email.',
-    invalid_url: '{{field}} must be a valid url.',
-    invalid_regex: '{{field}} does not match the pattern {{regex}}.',
-    invalid_date: '{{field}} is not a valid date.',
-    invalid_day: '{{field}} is not a valid day.',
+    invalid_email: '{{field}} must be a valid email.', // eslint-disable-line camelcase
+    invalid_url: '{{field}} must be a valid url.', // eslint-disable-line camelcase
+    invalid_regex: '{{field}} does not match the pattern {{regex}}.', // eslint-disable-line camelcase
+    invalid_date: '{{field}} is not a valid date.', // eslint-disable-line camelcase
+    invalid_day: '{{field}} is not a valid day.', // eslint-disable-line camelcase
     invalidValueProperty: 'Invalid Value Property',
     mask: '{{field}} does not match the mask.',
     valueIsNotAvailable: '{{ field }} is an invalid value.',
@@ -64,9 +64,13 @@ exports.default = {
     saveDraftInstanceError: 'Cannot save draft because there is no formio instance.',
     saveDraftAuthError: 'Cannot save draft unless a user is authenticated.',
     restoreDraftInstanceError: 'Cannot restore draft because there is no formio instance.',
+    saveDraftError: 'Unable to save draft.',
+    restoreDraftError: 'Unable to restore draft.',
     time: 'Invalid time',
     cancelButtonAriaLabel: 'Cancel button. Click to reset the form',
     previousButtonAriaLabel: 'Previous button. Click to go back to the previous tab',
     nextButtonAriaLabel: 'Next button. Click to go to the next tab',
     submitButtonAriaLabel: 'Submit Form button. Click to submit the form',
+    reCaptchaTokenValidationError: 'ReCAPTCHA: Token validation error',
+    reCaptchaTokenNotSpecifiedError: 'ReCAPTCHA: Token is not specified in submission',
 };

package/lib/cjs/utils/Evaluator.js

@@ -8,7 +8,7 @@ const string_hash_1 = __importDefault(require("string-hash"));
 const utils_1 = require("@formio/core/utils");
 const Evaluator = {
     noeval: false,
-    protectedEval: false,
+    protectedEval: false, // This property can be customized only by plugins
     cache: {},
     templateSettings: utils_1.Evaluator.templateSettings,
     evaluator: utils_1.Evaluator.evaluator,

package/lib/cjs/utils/conditionOperators/IsEqualTo.js

@@ -39,7 +39,7 @@ class IsEqualTo extends ConditionOperator_1.default {
             }
         }
         //special check for select boxes
-        if (lodash_1.default.isObject(value) && comparedValue && lodash_1.default.isString(comparedValue)) {
+        if (lodash_1.default.isObject(value) && comparedValue && lodash_1.default.isBoolean(value[comparedValue])) {
             return value[comparedValue];
         }
         return lodash_1.default.isEqual(value, comparedValue);

package/lib/cjs/utils/formUtils.js

@@ -271,9 +271,9 @@ function generateFormChange(type, data) {
             change = {
                 op: 'add',
                 key: data.component.key,
-                container: data.parent.key,
-                path: data.path,
-                index: data.index,
+                container: data.parent.key, // Parent component
+                path: data.path, // Path to container within parent component.
+                index: data.index, // Index of component in parent container.
                 component: data.component
             };
             break;

package/lib/cjs/utils/utils.js

@@ -30,8 +30,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.withSwitch = exports.firstNonNil = exports.unfold = exports.bootstrapVersion = exports.uniqueKey = exports.iterateKey = exports.delay = exports.fieldData = exports.getCurrencyAffixes = exports.getNumberDecimalLimit = exports.getNumberSeparators = exports.matchInputMask = exports.unmaskValue = exports.getInputMask = exports.convertFormatToMask = exports.convertFormatToMoment = exports.convertFormatToFlatpickr = exports.getLocaleDateFormatInfo = exports.formatOffset = exports.formatDate = exports.momentDate = exports.loadZones = exports.shouldLoadZones = exports.zonesLoaded = exports.offsetDate = exports.currentTimezone = exports.isValidDate = exports.getDateSetting = exports.guid = exports.uniqueName = exports.convertStringToHTMLElement = exports.escapeHTML = exports.unescapeHTML = exports.setActionProperty = exports.checkTrigger = exports.checkCondition = exports.checkJsonConditional = exports.checkCustomConditional = exports.getComponentActualValue = exports.checkSimpleConditional = exports.checkCalculated = exports.isMongoId = exports.boolValue = exports.getElementRect = exports.getPropertyValue = exports.getRandomComponentId = exports.evaluate = exports.moment = exports.ConditionOperators = exports.jsonLogic = void 0;
-exports.isSelectResourceWithObjectValue = exports.getItemTemplateKeys = exports.interpolateErrors = exports.getComponentSavedTypes = exports.componentValueTypes = exports._ = exports.getFocusableElements = exports.isInsideScopingComponent = exports.isPromise = exports.getDataParentComponent = exports.getComponentPath = exports.getComponentPathWithoutIndicies = exports.getBrowserInfo = exports.getIEBrowserVersion = exports.round = exports.getStringFromComponentPath = exports.isChildOf = exports.getArrayFromComponentPath = exports.isInputComponent = exports.interpolate = exports.Evaluator = exports.fastCloneDeep = exports.sanitize = exports.translateHTMLTemplate = exports.getContextButtons = exports.getContextComponents = exports.observeOverload = void 0;
+exports.observeOverload = exports.withSwitch = exports.firstNonNil = exports.unfold = exports.bootstrapVersion = exports.uniqueKey = exports.iterateKey = exports.delay = exports.fieldData = exports.getCurrencyAffixes = exports.getNumberDecimalLimit = exports.getNumberSeparators = exports.matchInputMask = exports.unmaskValue = exports.getInputMask = exports.convertFormatToMask = exports.convertFormatToMoment = exports.convertFormatToFlatpickr = exports.getLocaleDateFormatInfo = exports.formatOffset = exports.formatDate = exports.momentDate = exports.loadZones = exports.shouldLoadZones = exports.zonesLoaded = exports.offsetDate = exports.currentTimezone = exports.isValidDate = exports.getDateSetting = exports.guid = exports.uniqueName = exports.convertStringToHTMLElement = exports.unescapeHTML = exports.setActionProperty = exports.checkTrigger = exports.checkCondition = exports.checkJsonConditional = exports.checkCustomConditional = exports.getComponentActualValue = exports.checkSimpleConditional = exports.checkCalculated = exports.isMongoId = exports.boolValue = exports.getElementRect = exports.getPropertyValue = exports.getRandomComponentId = exports.evaluate = exports.moment = exports.ConditionOperators = exports.jsonLogic = void 0;
+exports.isSelectResourceWithObjectValue = exports.getItemTemplateKeys = exports.interpolateErrors = exports.getComponentSavedTypes = exports.componentValueTypes = exports._ = exports.getFocusableElements = exports.isInsideScopingComponent = exports.isPromise = exports.getDataParentComponent = exports.getComponentPath = exports.getComponentPathWithoutIndicies = exports.getBrowserInfo = exports.getIEBrowserVersion = exports.round = exports.getStringFromComponentPath = exports.isChildOf = exports.getArrayFromComponentPath = exports.isInputComponent = exports.interpolate = exports.Evaluator = exports.fastCloneDeep = exports.sanitize = exports.translateHTMLTemplate = exports.getContextButtons = exports.getContextComponents = void 0;
 const lodash_1 = __importDefault(require("lodash"));
 exports._ = lodash_1.default;
 const fetch_ponyfill_1 = __importDefault(require("fetch-ponyfill"));
@@ -447,22 +447,6 @@ function unescapeHTML(str) {
     return doc.documentElement.textContent;
 }
 exports.unescapeHTML = unescapeHTML;
-/**
- * Escape HTML characters like <, >, & and etc.
- * @param str
- * @returns {string}
- */
-function escapeHTML(html) {
-    if (html) {
-        return html.replace(/&/g, '&amp;')
-            .replace(/</g, '&lt;')
-            .replace(/>/g, '&gt;')
-            .replace(/"/g, '&quot;')
-            .replace(/'/g, '&#39;');
-    }
-    return '';
-}
-exports.escapeHTML = escapeHTML;
 /**
  * Make HTML element from string
  * @param str
@@ -1271,7 +1255,8 @@ function sanitize(string, options) {
     }
     // Allowd URI Regex
     if (options.sanitizeConfig && options.sanitizeConfig.allowedUriRegex) {
-        sanitizeOptions.ALLOWED_URI_REGEXP = options.sanitizeConfig.allowedUriRegex;
+        const allowedUriRegex = options.sanitizeConfig.allowedUriRegex;
+        sanitizeOptions.ALLOWED_URI_REGEXP = lodash_1.default.isString(allowedUriRegex) ? new RegExp(allowedUriRegex) : allowedUriRegex;
     }
     // Allow to extend the existing array of elements that are safe for URI-like values
     if (options.sanitizeConfig && Array.isArray(options.sanitizeConfig.addUriSafeAttr) && options.sanitizeConfig.addUriSafeAttr.length > 0) {

package/lib/cjs/widgets/CalendarWidget.js

@@ -446,7 +446,7 @@ class CalendarWidget extends InputWidget_1.default {
         return (date, format) => {
             // Only format this if this is the altFormat and the form is readOnly.
             if (this.settings.readOnly && (format === this.settings.altFormat)) {
-                if (this.loadZones()) {
+                if (!this.settings.enableTime || this.loadZones()) {
                     return Flatpickr.formatDate(date, format);
                 }
                 const currentValue = new Date(this.getValue());

package/lib/mjs/Element.js

@@ -508,6 +508,7 @@ export default class Element {
             token: Formio.getToken({
                 decode: true
             }),
+            options: this.options,
             config: this.root && this.root.form && this.root.form.config
                 ? this.root.form.config
                 : this.options?.formConfig

package/lib/mjs/Embed.js

@@ -1,5 +1,5 @@
 import CDN from './CDN.js';
-class Formio {
+export class Formio {
     static FormioClass = null;
     static baseUrl;
     static projectUrl;
@@ -249,7 +249,8 @@ class Formio {
         });
         element.parentNode.insertBefore(wrapper, element);
         // If we include the libraries, then we will attempt to run this in shadow dom.
-        if (Formio.config.includeLibs && (typeof wrapper.attachShadow === 'function') && !Formio.config.premium) {
+        const useShadowDom = Formio.config.includeLibs && (typeof wrapper.attachShadow === 'function');
+        if (useShadowDom) {
             wrapper = wrapper.attachShadow({
                 mode: 'open'
             });
@@ -257,13 +258,15 @@ class Formio {
         }
         element.parentNode.removeChild(element);
         wrapper.appendChild(element);
+        // If this is inside of shadow dom, then we need to add the styles and scripts to the shadow dom.
+        const libWrapper = useShadowDom ? wrapper : document.body;
         // Load the renderer styles.
-        await Formio.addStyles(wrapper, Formio.config.embedCSS || `${Formio.cdn.js}/formio.embed.css`);
+        await Formio.addStyles(libWrapper, Formio.config.embedCSS || `${Formio.cdn.js}/formio.embed.css`);
         // Add a loader.
         Formio.addLoader(wrapper);
         const formioSrc = Formio.config.full ? 'formio.full' : 'formio.form';
         const renderer = Formio.config.debug ? formioSrc : `${formioSrc}.min`;
-        Formio.FormioClass = await Formio.addScript(wrapper, Formio.formioScript(Formio.config.script || `${Formio.cdn.js}/${renderer}.js`, builder), 'Formio', builder ? 'isBuilder' : 'isRenderer');
+        Formio.FormioClass = await Formio.addScript(libWrapper, Formio.formioScript(Formio.config.script || `${Formio.cdn.js}/${renderer}.js`, builder), 'Formio', builder ? 'isBuilder' : 'isRenderer');
         Formio.FormioClass.cdn = Formio.cdn;
         Formio.FormioClass.setBaseUrl(options.baseUrl || Formio.baseUrl || Formio.config.base);
         Formio.FormioClass.setProjectUrl(options.projectUrl || Formio.projectUrl || Formio.config.project);
@@ -280,7 +283,7 @@ class Formio {
         }
         // Add libraries if they wish to include the libs.
         if (Formio.config.template && Formio.config.includeLibs) {
-            await Formio.addLibrary(wrapper, Formio.config.libs[Formio.config.template], Formio.config.template);
+            await Formio.addLibrary(libWrapper, Formio.config.libs[Formio.config.template], Formio.config.template);
         }
         // Add the premium modules.
         if (Formio.config.premium) {
@@ -291,10 +294,10 @@ class Formio {
             for (const name in Formio.config.modules) {
                 const lib = Formio.config.modules[name];
                 lib.use = lib.use || true;
-                await Formio.addLibrary(wrapper, lib, name);
+                await Formio.addLibrary(libWrapper, lib, name);
             }
         }
-        await Formio.addStyles(wrapper, Formio.formioScript(Formio.config.style || `${Formio.cdn.js}/${renderer}.css`, builder));
+        await Formio.addStyles(libWrapper, Formio.formioScript(Formio.config.style || `${Formio.cdn.js}/${renderer}.css`, builder));
         if (Formio.config.before) {
             await Formio.config.before(Formio.FormioClass, element, Formio.config);
         }
@@ -363,7 +366,6 @@ class Formio {
         }
     };
 }
-export { Formio };
 CDN.defaultCDN = Formio.version.includes('rc') ? 'https://cdn.test-form.io' : 'https://cdn.form.io';
 export class Form {
     constructor(element, form, options) {

package/lib/mjs/FormBuilder.js

@@ -1,7 +1,7 @@
 import { Formio } from './Formio';
 import Builders from './builders';
 import Form from './Form';
-class FormBuilder extends Form {
+export default class FormBuilder extends Form {
     static options = {};
     constructor(element, form, options) {
         form = form || {};
@@ -18,7 +18,6 @@ class FormBuilder extends Form {
         }
     }
 }
-export default FormBuilder;
 /**
  * Factory that creates a new form builder based on the form parameter.
  *

package/lib/mjs/Webform.js

@@ -182,11 +182,13 @@ 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.options.skipDraftRestore) {
-            const user = Formio.getUser();
-            // Only restore a draft if the submission isn't explicitly set.
-            if (user && !this.submissionSet) {
-                this.restoreDraft(user._id);
-            }
+            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);
+                }
+            });
         }
         this.component.clearOnHide = false;
         // Ensure the root is set to this component.
@@ -531,6 +533,10 @@ export default class Webform extends NestedDataComponent {
         if (form && form.properties) {
             this.options.properties = form.properties;
         }
+        // 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');
+        }
         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.');
@@ -644,6 +650,11 @@ export default class Webform extends NestedDataComponent {
             return this.submissionReadyResolve(submission);
         }, (err) => this.submissionReadyReject(err)).catch((err) => this.submissionReadyReject(err));
     }
+    handleDraftError(errName, errDetails, restoreDraft) {
+        const errorMessage = _.trim(`${this.t(errName)} ${errDetails || ''}`);
+        console.warn(errorMessage);
+        this.emit(restoreDraft ? 'restoreDraftError' : 'saveDraftError', errDetails || errorMessage);
+    }
     /**
      * Saves a submission draft.
      */
@@ -652,11 +663,11 @@ export default class Webform extends NestedDataComponent {
             return;
         }
         if (!this.formio) {
-            console.warn(this.t('saveDraftInstanceError'));
+            this.handleDraftError('saveDraftInstanceError');
             return;
         }
         if (!Formio.getUser()) {
-            console.warn(this.t('saveDraftAuthError'));
+            this.handleDraftError('saveDraftAuthError');
             return;
         }
         const draft = fastCloneDeep(this.submission);
@@ -669,6 +680,10 @@ export default class Webform extends NestedDataComponent {
                 this.submission._id = sub._id;
                 this.savingDraft = false;
                 this.emit('saveDraft', sub);
+            })
+                .catch(err => {
+                this.savingDraft = false;
+                this.handleDraftError('saveDraftError', err);
             });
         }
     }
@@ -679,7 +694,7 @@ export default class Webform extends NestedDataComponent {
      */
     restoreDraft(userId) {
         if (!this.formio) {
-            console.warn(this.t('restoreDraftInstanceError'));
+            this.handleDraftError('restoreDraftInstanceError', null, true);
             return;
         }
         this.savingDraft = true;
@@ -701,6 +716,11 @@ export default class Webform extends NestedDataComponent {
             this.draftEnabled = true;
             this.savingDraft = false;
             this.emit('restoreDraft', null);
+        })
+            .catch(err => {
+            this.draftEnabled = true;
+            this.savingDraft = false;
+            this.handleDraftError('restoreDraftError', err, true);
         });
     }
     get schema() {
@@ -879,7 +899,7 @@ export default class Webform extends NestedDataComponent {
     resetValue() {
         _.each(this.getComponents(), (comp) => (comp.resetValue()));
         this.setPristine(true);
-        this.onChange();
+        this.onChange({ resetValue: true });
     }
     /**
      * Sets a new alert to display in the error dialog of the form.
@@ -985,7 +1005,7 @@ export default class Webform extends NestedDataComponent {
         if (!Array.isArray(errors)) {
             errors = [errors];
         }
-        errors = errors.concat(this.serverErrors || []);
+        errors = errors.concat(this.customErrors);
         if (!errors.length) {
             this.setAlert(false);
             return;
@@ -1095,16 +1115,17 @@ export default class Webform extends NestedDataComponent {
         error = this.normalizeError(error);
         this.submitting = false;
         this.setPristine(false);
-        this.emit('submitError', error);
+        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 });
             return false;
         }
-        this.showErrors(error, true);
+        const errors = this.showErrors(error, true);
         if (this.root && this.root.alert) {
             this.scrollIntoView(this.root.alert);
         }
+        return errors;
     }
     /**
      * Trigger the change event for this form.
@@ -1128,7 +1149,9 @@ export default class Webform extends NestedDataComponent {
         value.isValid = errors.length === 0;
         this.loading = false;
         if (this.submitted) {
-            this.showErrors(errors);
+            // show server errors while they are not cleaned/fixed
+            const nonComponentServerErrors = _.filter(this.serverErrors || [], err => !err.component && !err.path);
+            this.showErrors(nonComponentServerErrors.length ? nonComponentServerErrors : null);
         }
         // See if we need to save the draft of the form.
         if (modified && this.options.saveDraft) {

package/lib/mjs/WebformBuilder.js

@@ -976,6 +976,7 @@ export default class WebformBuilder extends Component {
         }
     }
     updateComponent(component, changed) {
+        const sanitizeConfig = _.get(this.webform, 'form.settings.sanitizeConfig') || _.get(this.webform, 'form.globalSettings.sanitizeConfig');
         // Update the preview.
         if (this.preview) {
             this.preview.form = {
@@ -987,13 +988,14 @@ export default class WebformBuilder extends Component {
                         'autofocus',
                         'customConditional',
                     ])],
-                config: this.options.formConfig || {}
+                config: this.options.formConfig || {},
+                sanitizeConfig,
             };
             const fieldsToRemoveDoubleQuotes = ['label', 'tooltip'];
             this.preview.form.components.forEach(component => this.replaceDoubleQuotes(component, fieldsToRemoveDoubleQuotes));
             const previewElement = this.componentEdit.querySelector('[ref="preview"]');
             if (previewElement) {
-                this.setContent(previewElement, this.preview.render());
+                this.setContent(previewElement, this.preview.render(), null, sanitizeConfig);
                 this.preview.attach(previewElement);
             }
         }

package/lib/mjs/Wizard.js

@@ -711,7 +711,7 @@ export default class Wizard extends Webform {
                 if (this.enabledIndex) {
                     this.enabledIndex = 0;
                 }
-                this.onChange();
+                this.onChange({ resetValue: true });
                 this.redraw();
                 return this.page;
             });
@@ -867,6 +867,11 @@ export default class Wizard extends Webform {
         }
         return super.redraw();
     }
+    rebuild() {
+        const currentPage = this.page;
+        const setCurrentPage = () => this.setPage(currentPage);
+        return super.rebuild().then(setCurrentPage);
+    }
     checkValidity(data, dirty, row, currentPageOnly, childErrors = []) {
         if (!this.checkCondition(row, data)) {
             this.setCustomValidity('');

package/lib/mjs/builders/Builders.js

@@ -2,7 +2,7 @@ import _ from 'lodash';
 import pdf from '../PDFBuilder';
 import webform from '../WebformBuilder';
 import wizard from '../WizardBuilder';
-class Builders {
+export default class Builders {
     static builders = {
         pdf,
         webform,
@@ -21,4 +21,3 @@ class Builders {
         return Builders.builders;
     }
 }
-export default Builders;

package/lib/mjs/components/Components.js

@@ -2,7 +2,7 @@ import Component from './_classes/component/Component';
 import EditFormUtils from './_classes/component/editForm/utils';
 import BaseEditForm from './_classes/component/Component.form';
 import _ from 'lodash';
-class Components {
+export default class Components {
     static _editFormUtils = EditFormUtils;
     static _baseEditForm = BaseEditForm;
     static set EditFormUtils(value) {
@@ -101,4 +101,3 @@ class Components {
         return comp;
     }
 }
-export default Components;

package/lib/mjs/components/_classes/component/Component.js

@@ -747,6 +747,7 @@ export default class Component extends Element {
         return !this.component.label ||
             ((!this.isInDataGrid && this.component.hideLabel) ||
                 (this.isInDataGrid && !this.component.dataGridLabel) ||
+                this.options.floatingLabels ||
                 this.options.inputsOnly) && !this.builderMode;
     }
     transform(type, value) {
@@ -819,13 +820,7 @@ export default class Component extends Element {
     renderTemplate(name, data = {}, modeOption) {
         // Need to make this fall back to form if renderMode is not found similar to how we search templates.
         const mode = modeOption || this.options.renderMode || 'form';
-        data.component = {
-            ...this.component,
-        };
-        // Escape HTML provided in component description and render it as a string instead
-        if (this.component.description) {
-            data.component.description = FormioUtils.escapeHTML(this.component.description);
-        }
+        data.component = this.component;
         data.self = this;
         data.options = this.options;
         data.readOnly = this.options.readOnly;
@@ -1036,12 +1031,12 @@ export default class Component extends Element {
                 const tooltipText = this.interpolate(tooltipDataTitle || tooltipAttribute)
                     .replace(/(?:\r\n|\r|\n)/g, '<br />');
                 this.tooltips[index] = tippy(tooltip, {
-                    allowHTML: false,
+                    allowHTML: true,
                     trigger: 'mouseenter click focus',
                     placement: 'right',
                     zIndex: 10000,
                     interactive: true,
-                    content: this.t(tooltipText, { _userInput: true }),
+                    content: this.t(this.sanitize(tooltipText), { _userInput: true }),
                 });
             }
         });
@@ -1816,6 +1811,10 @@ export default class Component extends Element {
             this.setElementInvalid(this.performInputMapping(element), false);
         });
         this.setInputWidgetErrorClasses(elements, hasErrors);
+        // do not set error classes for hidden components
+        if (!this.visible) {
+            return;
+        }
         if (hasErrors) {
             // Add error classes
             elements.forEach((input) => {
@@ -1915,7 +1914,7 @@ export default class Component extends Element {
                 placeholder: this.t(this.component.placeholder, { _userInput: true }),
                 modules: {
                     toolbar: [
-                        [{ 'size': ['small', false, 'large', 'huge'] }],
+                        [{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown
                         [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
                         [{ 'font': [] }],
                         ['bold', 'italic', 'underline', 'strike', { 'script': 'sub' }, { 'script': 'super' }, 'clean'],
@@ -2174,10 +2173,12 @@ export default class Component extends Element {
         defaultValue = this.getCustomDefaultValue(defaultValue);
         const checkMask = (value) => {
             if (typeof value === 'string') {
-                const placeholderChar = this.placeholderChar;
-                value = conformToMask(value, this.defaultMask, { placeholderChar }).conformedValue;
-                if (!FormioUtils.matchInputMask(value, this.defaultMask)) {
-                    value = '';
+                if (this.component.type !== 'textfield') {
+                    const placeholderChar = this.placeholderChar;
+                    value = conformToMask(value, this.defaultMask, { placeholderChar }).conformedValue;
+                    if (!FormioUtils.matchInputMask(value, this.defaultMask)) {
+                        value = '';
+                    }
                 }
             }
             else {
@@ -2276,10 +2277,10 @@ export default class Component extends Element {
         }
         const input = this.performInputMapping(this.refs.input[index]);
         const valueMaskInput = this.refs.valueMaskInput;
-        if (valueMaskInput?.mask) {
+        if (valueMaskInput?.mask && valueMaskInput.mask.textMaskInputElement) {
             valueMaskInput.mask.textMaskInputElement.update(value);
         }
-        if (input.mask) {
+        if (input.mask && input.mask.textMaskInputElement) {
             input.mask.textMaskInputElement.update(value);
         }
         else if (input.widget && input.widget.setValue) {
@@ -2435,8 +2436,8 @@ export default class Component extends Element {
     }
     /* eslint-disable max-statements */
     calculateComponentValue(data, flags, row) {
-        // Skip value calculation for the component if we don't have entire form data set
-        if (_.isUndefined(_.get(this, 'root.data'))) {
+        // Skip value calculation for the component if we don't have entire form data set or in builder mode
+        if (this.builderMode || _.isUndefined(_.get(this, 'root.data'))) {
             return false;
         }
         // If no calculated value or
@@ -2444,10 +2445,16 @@ export default class Component extends Element {
         const { clearOnHide } = this.component;
         const shouldBeCleared = !this.visible && clearOnHide;
         const allowOverride = _.get(this.component, 'allowCalculateOverride', false);
+        if (shouldBeCleared) {
+            // remove calculated value so that the value is recalculated once component becomes visible
+            if (this.hasOwnProperty('calculatedValue') && allowOverride) {
+                _.unset(this, 'calculatedValue');
+            }
+            return false;
+        }
         // Handle all cases when calculated values should not fire.
         if ((this.options.readOnly && !this.options.pdf && !this.component.calculateValue) ||
             !(this.component.calculateValue || this.component.calculateValueVariable) ||
-            shouldBeCleared ||
             (this.options.server && !this.component.calculateServer) ||
             (flags.dataSourceInitialLoading && allowOverride)) {
             return false;
@@ -2474,7 +2481,7 @@ export default class Component extends Element {
                 this.calculationLocked = true;
                 return false;
             }
-            const firstPass = (this.calculatedValue === undefined);
+            const firstPass = (this.calculatedValue === undefined) || flags.resetValue;
             if (firstPass) {
                 this.calculatedValue = null;
             }
@@ -2488,6 +2495,7 @@ export default class Component extends Element {
             }
             // Check to ensure that the calculated value is different than the previously calculated value.
             if (previousCalculatedValue && previousChanged && !calculationChanged) {
+                this.calculatedValue = null;
                 return false;
             }
             if (flags.isReordered || !calculationChanged) {
@@ -2495,7 +2503,7 @@ export default class Component extends Element {
             }
             if (fromSubmission) {
                 // If we set value from submission and it differs from calculated one, set the calculated value to prevent overriding dataValue in the next pass
-                this.calculatedValue = calculatedValue;
+                this.calculatedValue = fastCloneDeep(calculatedValue);
                 return false;
             }
             // If this is the firstPass, and the dataValue is different than to the calculatedValue.
@@ -2504,7 +2512,7 @@ export default class Component extends Element {
                 return true;
             }
         }
-        this.calculatedValue = calculatedValue;
+        this.calculatedValue = fastCloneDeep(calculatedValue);
         if (changed) {
             if (!flags.noPristineChangeOnModified) {
                 this.pristine = false;
@@ -2921,6 +2929,7 @@ export default class Component extends Element {
         return (this.component.protected || !this.component.persistent || (this.component.persistent === 'client-only'));
     }
     shouldSkipValidation(data, row, flags = {}) {
+        const { validateWhenHidden = false } = this.component || {};
         const rules = [
             // Do not validate if the flags say not too.
             () => flags.noValidate,
@@ -2931,9 +2940,9 @@ export default class Component extends Element {
             // Check to see if we are editing and if so, check component persistence.
             () => this.isValueHidden(),
             // Force valid if component is hidden.
-            () => !this.visible,
+            () => !this.visible && !validateWhenHidden,
             // Force valid if component is conditionally hidden.
-            () => !this.checkCondition(row, data)
+            () => !this.checkCondition(row, data) && !validateWhenHidden
         ];
         return rules.some(pred => pred());
     }

package/lib/mjs/components/_classes/component/editForm/Component.edit.logic.js

@@ -368,7 +368,7 @@ export default [
                             {
                                 weight: 20,
                                 input: true,
-                                label: 'Schema Defenition',
+                                label: 'Schema Definition',
                                 key: 'schemaDefinition',
                                 editor: 'ace',
                                 as: 'javascript',

package/lib/mjs/components/_classes/component/editForm/Component.edit.validation.js

@@ -18,6 +18,14 @@ export default [
         key: 'unique',
         input: true
     },
+    {
+        weight: 100,
+        type: 'checkbox',
+        label: 'Validate When Hidden',
+        tooltip: 'Validates the component when it is hidden/conditionally hidden. Vaildation errors are displayed in the error alert on the form submission.',
+        key: 'validateWhenHidden',
+        input: true
+    },
     {
         weight: 0,
         type: 'select',

package/lib/mjs/components/_classes/component/fixtures/comp5.js

@@ -4,8 +4,8 @@ export default {
     components: [
         {
             label: 'Text Field',
-            description: "<img src='https://somesite' onerror='var _ee = 2' >",
-            tooltip: "<img src='https://somesite' onerror='var _ee = 1' >",
+            description: "<img <img src='https://somesite' onerror='var _ee = 2' >",
+            tooltip: "<img src='https://somesite' onerror='var _ee = 1 >",
             applyMaskOn: 'change',
             tableView: true,
             key: 'textField',