@formio/js 5.0.0-rc.37 → 5.0.0-rc.39

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

@@ -5,6 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const ConditionOperator_1 = __importDefault(require("./ConditionOperator"));
 const lodash_1 = __importDefault(require("lodash"));
+const utils_1 = require("../utils");
 class IsEqualTo extends ConditionOperator_1.default {
     static get operatorKey() {
         return 'isEqual';
@@ -12,7 +13,8 @@ class IsEqualTo extends ConditionOperator_1.default {
     static get displayedName() {
         return 'Is Equal To';
     }
-    execute({ value, comparedValue }) {
+    execute({ value, comparedValue, instance, conditionComponentPath }) {
+        var _a;
         if (value && comparedValue && typeof value !== typeof comparedValue && lodash_1.default.isString(comparedValue)) {
             try {
                 comparedValue = JSON.parse(comparedValue);
@@ -20,6 +22,22 @@ class IsEqualTo extends ConditionOperator_1.default {
             // eslint-disable-next-line no-empty
             catch (e) { }
         }
+        if (instance && instance.root) {
+            const conditionTriggerComponent = instance.root.getComponent(conditionComponentPath);
+            if (conditionTriggerComponent
+                && (0, utils_1.isSelectResourceWithObjectValue)(conditionTriggerComponent.component)
+                && ((_a = conditionTriggerComponent.component) === null || _a === void 0 ? void 0 : _a.template)) {
+                if (!value || !lodash_1.default.isPlainObject(value)) {
+                    return false;
+                }
+                const { template, valueProperty } = conditionTriggerComponent.component;
+                if (valueProperty === 'data') {
+                    value = { data: value };
+                    comparedValue = { data: comparedValue };
+                }
+                return lodash_1.default.every((0, utils_1.getItemTemplateKeys)(template) || [], k => lodash_1.default.isEqual(lodash_1.default.get(value, k), lodash_1.default.get(comparedValue, k)));
+            }
+        }
         //special check for select boxes
         if (lodash_1.default.isObject(value) && comparedValue && lodash_1.default.isString(comparedValue)) {
             return value[comparedValue];

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

@@ -3,17 +3,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const ConditionOperator_1 = __importDefault(require("./ConditionOperator"));
-const lodash_1 = __importDefault(require("lodash"));
-class IsNotEqualTo extends ConditionOperator_1.default {
+const IsEqualTo_1 = __importDefault(require("./IsEqualTo"));
+class IsNotEqualTo extends IsEqualTo_1.default {
     static get operatorKey() {
         return 'isNotEqual';
     }
     static get displayedName() {
         return 'Is Not Equal To';
     }
-    execute({ value, comparedValue }) {
-        return !lodash_1.default.isEqual(value, comparedValue);
+    execute(options) {
+        return !super.execute(options);
     }
 }
 exports.default = IsNotEqualTo;

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.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.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;
+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;
 const lodash_1 = __importDefault(require("lodash"));
 exports._ = lodash_1.default;
 const fetch_ponyfill_1 = __importDefault(require("fetch-ponyfill"));
@@ -447,6 +447,22 @@ 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
@@ -1509,3 +1525,25 @@ const interpolateErrors = (component, errors, interpolateFn) => {
     });
 };
 exports.interpolateErrors = interpolateErrors;
+function getItemTemplateKeys(template) {
+    const templateKeys = [];
+    if (!template) {
+        return templateKeys;
+    }
+    const keys = template.match(/({{\s*(.*?)\s*}})/g);
+    if (keys) {
+        keys.forEach((key) => {
+            const propKey = key.match(/{{\s*item\.(.*?)\s*}}/);
+            if (propKey && propKey.length > 1) {
+                templateKeys.push(propKey[1]);
+            }
+        });
+    }
+    return templateKeys;
+}
+exports.getItemTemplateKeys = getItemTemplateKeys;
+function isSelectResourceWithObjectValue(comp = {}) {
+    const { reference, dataSrc, valueProperty } = comp;
+    return reference || (dataSrc === 'resource' && (!valueProperty || valueProperty === 'data'));
+}
+exports.isSelectResourceWithObjectValue = isSelectResourceWithObjectValue;

package/lib/mjs/Element.js

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

package/lib/mjs/Embed.js

@@ -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);
         }

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

@@ -3,7 +3,7 @@ import { conformToMask } from '@formio/vanilla-text-mask';
 import tippy from 'tippy.js';
 import _ from 'lodash';
 import isMobile from 'ismobilejs';
-import { processOne, processOneSync, validateProcess, validateProcessSync } from '@formio/core/process';
+import { processOne, processOneSync, validateProcessInfo } from '@formio/core/process';
 import { Formio } from '../../../Formio';
 import * as FormioUtils from '../../../utils/utils';
 import { fastCloneDeep, boolValue, getComponentPath, isInsideScopingComponent, currentTimezone } from '../../../utils/utils';
@@ -819,7 +819,13 @@ 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;
+        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.self = this;
         data.options = this.options;
         data.readOnly = this.options.readOnly;
@@ -1030,12 +1036,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: true,
+                    allowHTML: false,
                     trigger: 'mouseenter click focus',
                     placement: 'right',
                     zIndex: 10000,
                     interactive: true,
-                    content: this.t(this.sanitize(tooltipText), { _userInput: true }),
+                    content: this.t(tooltipText, { _userInput: true }),
                 });
             }
         });
@@ -2574,7 +2580,7 @@ export default class Component extends Element {
             scope: validationScope,
             instance: this,
             processors: [
-                validateProcessSync
+                validateProcessInfo
             ]
         });
         const errors = validationScope.errors;
@@ -2655,7 +2661,7 @@ export default class Component extends Element {
             instance: this,
             scope: { errors: [] },
             processors: [
-                async ? validateProcess : validateProcessSync
+                validateProcessInfo
             ]
         };
         if (async) {
@@ -2684,7 +2690,12 @@ export default class Component extends Element {
             return this.validateComponent(data, row, flags).then((errors) => {
                 allErrors.push(...errors);
                 if (this.parent && this.parent.childErrors) {
-                    this.parent.childErrors.push(...errors);
+                    if (errors.length) {
+                        this.parent.childErrors.push(...errors);
+                    }
+                    else {
+                        _.remove(this.parent.childErrors, (err) => err.component.key === this.component.key);
+                    }
                 }
                 this.showValidationErrors(errors, data, row, flags);
                 return errors.length === 0;
@@ -2695,7 +2706,12 @@ export default class Component extends Element {
             this.showValidationErrors(errors, data, row, flags);
             allErrors.push(...errors);
             if (this.parent && this.parent.childErrors) {
-                this.parent.childErrors.push(...errors);
+                if (errors.length) {
+                    this.parent.childErrors.push(...errors);
+                }
+                else {
+                    _.remove(this.parent.childErrors, (err) => err.component.key === this.component.key);
+                }
             }
             return errors.length === 0;
         }

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

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

package/lib/mjs/components/_classes/list/ListComponent.js

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

package/lib/mjs/components/_classes/nested/NestedComponent.js

@@ -582,6 +582,16 @@ export default class NestedComponent extends Field {
         components = components || this.component.components;
         data = data || this.rootValue;
         const { async, dirty, process } = flags;
+        const validationProcessorProcess = (context) => this.validationProcessor(context, flags);
+        const checkModalProcessorProcess = ({ instance, component, components }) => {
+            // If we just validated the last component, and there are errors from our parent, then we need to show a model of those errors.
+            if (instance &&
+                instance.parent &&
+                (component === components[components.length - 1]) &&
+                instance.parent.componentModal) {
+                instance.parent.checkModal(instance.parent.childErrors, dirty);
+            }
+        };
         const processorContext = {
             process: process || 'unknown',
             components,
@@ -589,15 +599,13 @@ export default class NestedComponent extends Field {
             data: data,
             scope: { errors: [] },
             processors: [
-                (context) => this.validationProcessor(context, flags),
-                ({ instance, component, components }) => {
-                    // If we just validated the last component, and there are errors from our parent, then we need to show a model of those errors.
-                    if (instance &&
-                        instance.parent &&
-                        (component === components[components.length - 1]) &&
-                        instance.parent.componentModal) {
-                        instance.parent.checkModal(instance.parent.childErrors, dirty);
-                    }
+                {
+                    process: validationProcessorProcess,
+                    processSync: validationProcessorProcess
+                },
+                {
+                    process: checkModalProcessorProcess,
+                    processSync: checkModalProcessorProcess
                 }
             ]
         };

package/lib/mjs/components/columns/editForm/Columns.edit.display.js

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

package/lib/mjs/components/editgrid/EditGrid.js

@@ -467,7 +467,7 @@ export default class EditGridComponent extends NestedArrayComponent {
                 ].forEach(({ className, event, action, }) => {
                     const elements = row.getElementsByClassName(className);
                     Array.prototype.forEach.call(elements, (element) => {
-                        if (this.options.readOnly && _.intersection(element.classList, ['editRow', 'removeRow']).length) {
+                        if (this.options.pdf && _.intersection(element.classList, ['editRow', 'removeRow']).length) {
                             element.style.display = 'none';
                         }
                         else {
@@ -599,6 +599,9 @@ export default class EditGridComponent extends NestedArrayComponent {
         const dataObj = {};
         const rowIndex = this.editRows.length;
         const editRow = this.createRow(dataObj, rowIndex);
+        if (editRow.state === EditRowState.New) {
+            this.emptyRow = fastCloneDeep(editRow.data);
+        }
         if (this.inlineEditMode) {
             this.triggerChange();
         }
@@ -669,7 +672,7 @@ export default class EditGridComponent extends NestedArrayComponent {
     }
     showDialog(rowIndex) {
         const editRow = this.editRows[rowIndex];
-        if (_.isEqual(editRow.backup, editRow.data)) {
+        if (editRow.state === EditRowState.New ? _.isEqual(this.emptyRow, editRow.data) : _.isEqual(editRow.backup, editRow.data)) {
             return Promise.resolve();
         }
         const wrapper = this.ce('div', { ref: 'confirmationDialog' });
@@ -969,6 +972,7 @@ export default class EditGridComponent extends NestedArrayComponent {
             const editGridValue = _.get(rootValue, this.path, []);
             editGridValue[editRow.rowIndex] = editRow.data;
             _.set(rootValue, this.path, editGridValue);
+            const validationProcessorProcess = (context) => this.validationProcessor(context, { dirty, silentCheck });
             editRow.errors = processSync({
                 components: fastCloneDeep(this.component.components).map((component) => {
                     component.parentPath = `${this.path}[${editRow.rowIndex}]`;
@@ -980,7 +984,10 @@ export default class EditGridComponent extends NestedArrayComponent {
                 instances: this.componentsMap,
                 scope: { errors: [] },
                 processors: [
-                    (context) => this.validationProcessor(context, { dirty, silentCheck })
+                    {
+                        process: validationProcessorProcess,
+                        processSync: validationProcessorProcess
+                    }
                 ]
             }).errors;
         }
@@ -1070,7 +1077,7 @@ export default class EditGridComponent extends NestedArrayComponent {
             this.setCustomValidity(this.t(this.errorMessage('unsavedRowsError')), dirty);
             return false;
         }
-        const message = this.invalid || this.invalidMessage(data, dirty);
+        const message = this.invalid || this.invalidMessage(data, dirty, false, row);
         if (allRowErrors.length && this.root?.submitted && !message) {
             this._errors = this.setCustomValidity(message, dirty);
             errors.push(...this._errors);

package/lib/mjs/components/form/Form.js

@@ -600,7 +600,9 @@ export default class FormComponent extends Component {
             const formId = submission.form || this.formObj.form || this.component.form;
             const submissionUrl = `${this.subForm.formio.formsUrl}/${formId}/submission/${submission._id}`;
             this.subForm.setUrl(submissionUrl, this.options);
-            this.subForm.loadSubmission();
+            this.subForm.loadSubmission().catch((err) => {
+                console.error(`Unable to load subform submission ${submission._id}:`, err);
+            });
         }
         else {
             this.subForm.setValue(submission, flags);

package/lib/mjs/components/html/HTML.js

@@ -38,13 +38,13 @@ export default class HTMLComponent extends Component {
             return ` ${this.component.content} `;
         }
         const submission = _.get(this.root, 'submission', {});
-        const content = this.component.content ? this.interpolate(this.component.content, {
+        const content = this.component.content ? this.interpolate(this.sanitize(this.component.content, this.shouldSanitizeValue), {
             metadata: submission.metadata || {},
             submission: submission,
             data: this.rootValue,
             row: this.data
         }) : '';
-        return this.sanitize(content, this.shouldSanitizeValue);
+        return content;
     }
     get singleTags() {
         return ['br', 'img', 'hr'];

package/lib/mjs/components/html/fixtures/comp3.js

@@ -0,0 +1,29 @@
+export default {
+    type: 'form',
+    display: 'form',
+    components: [
+        {
+            label: 'HTML',
+            attrs: [
+                {
+                    attr: '',
+                    value: '',
+                },
+            ],
+            content: '<img src=1 onerror=alert("htmlContent")>',
+            refreshOnChange: false,
+            key: 'html',
+            type: 'htmlelement',
+            input: false,
+            tableView: false,
+        },
+        {
+            type: 'button',
+            label: 'Submit',
+            key: 'submit',
+            disableOnInvalid: true,
+            input: true,
+            tableView: false,
+        },
+    ],
+};

package/lib/mjs/components/html/fixtures/index.js

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

package/lib/mjs/components/radio/Radio.js

@@ -349,7 +349,8 @@ export default class RadioComponent extends ListComponent {
         if (value === this.emptyValue) {
             return value;
         }
-        if (!isNaN(parseFloat(value)) && isFinite(value)) {
+        const isEquivalent = _.toString(value) === Number(value).toString();
+        if (!isNaN(parseFloat(value)) && isFinite(value) && isEquivalent) {
             value = +value;
         }
         if (value === 'true') {

package/lib/mjs/components/radio/fixtures/comp10.js

@@ -0,0 +1,21 @@
+export default {
+    'label': 'Radio',
+    'optionsLabelPosition': 'right',
+    'inline': false,
+    'tableView': false,
+    'values': [
+        {
+            'label': '01',
+            'value': '01',
+            'shortcut': ''
+        },
+        {
+            'label': '1',
+            'value': '1',
+            'shortcut': ''
+        }
+    ],
+    'key': 'radio',
+    'type': 'radio',
+    'input': true
+};

package/lib/mjs/components/radio/fixtures/index.js

@@ -7,4 +7,5 @@ import comp6 from './comp6';
 import comp7 from './comp7';
 import comp8 from './comp8';
 import comp9 from './comp9';
-export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8, comp9 };
+import comp10 from './comp10';
+export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8, comp9, comp10 };

package/lib/mjs/components/recaptcha/ReCaptcha.js

@@ -52,6 +52,9 @@ export default class ReCaptchaComponent extends Component {
     createLabel() {
         return;
     }
+    get skipInEmail() {
+        return true;
+    }
     verify(actionName) {
         const siteKey = _get(this.root.form, 'settings.recaptcha.siteKey');
         if (!siteKey) {