npm - @formio/js - Versions diffs - 5.1.0-rc.8 → 5.1.0 - Mend

@formio/js 5.1.0-rc.8 → 5.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1253) hide show

package/lib/cjs/components/form/Form.js CHANGED Viewed

@@ -114,6 +114,10 @@ class FormComponent extends Component_1.default {
     get emptyValue() {
         return { data: {} };
     }
+    // In order for the subform values to set properly, we must always say that nested forms have a default value.
+    get hasDefaultValue() {
+        return true;
+    }
     get ready() {
         return this.subFormReady || Promise.resolve();
     }
@@ -332,6 +336,10 @@ class FormComponent extends Component_1.default {
             && lodash_1.default.isNumber(this.formObj._vid)
             && this.formObj._vid !== this.subFormRevision;
     }
+    get subFormData() {
+        var _a;
+        return ((_a = this.dataValue) === null || _a === void 0 ? void 0 : _a.data) || {};
+    }
     destroy(all = false) {
         if (this.subForm) {
             this.subForm.destroy(all);
@@ -376,10 +384,11 @@ class FormComponent extends Component_1.default {
     /**
      * Create a subform instance.
      * @param {boolean} [fromAttach] - This function is being called from an `attach` method.
+     * @param {boolean} [beforeSubmit] - This function is being called from a `beforeSubmit` method.
      * @returns {*} - The subform instance.
      */
-    createSubForm(fromAttach) {
-        this.subFormReady = this.loadSubForm(fromAttach).then((form) => {
+    createSubForm(fromAttach, beforeSubmit) {
+        this.subFormReady = this.loadSubForm(fromAttach, beforeSubmit).then((form) => {
             if (!form) {
                 return;
             }
@@ -436,11 +445,13 @@ class FormComponent extends Component_1.default {
     /**
      * Load the subform.
      * @param {boolean} fromAttach - This function is being called from an `attach` method.
+     * @param {boolean} beforeSubmit - This function is being called from a `beforeSubmit` method.
      * @returns {Promise} - The promise that resolves when the subform is loaded.
      */
-    loadSubForm(fromAttach) {
+    loadSubForm(fromAttach, beforeSubmit) {
         var _a, _b, _c, _d, _e;
-        if (this.builderMode || this.conditionallyHidden || (this.isSubFormLazyLoad() && !fromAttach)) {
+        const loadHiddenForm = beforeSubmit && !this.component.clearOnHide;
+        if (this.builderMode || (this.conditionallyHidden() && !loadHiddenForm) || (this.isSubFormLazyLoad() && !fromAttach)) {
             return Promise.resolve();
         }
         if (this.hasLoadedForm && !this.isRevisionChanged &&
@@ -482,14 +493,14 @@ class FormComponent extends Component_1.default {
             return visible;
         }
         if (this.subForm) {
-            return this.subForm.checkConditions(data, flags, row);
+            return this.subForm.checkConditions(this.subFormData, flags);
         }
         // There are few cases when subForm is not loaded when a change is triggered,
         // so we need to perform checkConditions after it is ready, or some conditional fields might be hidden in View mode
         else if (this.subFormReady) {
             this.subFormReady.then(() => {
                 if (this.subForm) {
-                    return this.subForm.checkConditions(data, flags, row);
+                    return this.subForm.checkConditions(this.subFormData, flags);
                 }
             });
         }
@@ -497,7 +508,7 @@ class FormComponent extends Component_1.default {
     }
     calculateValue(data, flags, row) {
         if (this.subForm) {
-            return this.subForm.calculateValue(data, flags, row);
+            return this.subForm.calculateValue(this.subFormData, flags);
         }
         return super.calculateValue(data, flags, row);
     }
@@ -512,7 +523,7 @@ class FormComponent extends Component_1.default {
      * @returns {*|boolean} - TRUE if the subform should be submitted, FALSE if it should not.
      */
     get shouldSubmit() {
-        return this.subFormReady && (!this.component.hasOwnProperty('reference') || this.component.reference) && !this.conditionallyHidden;
+        return this.subFormReady && (!this.component.hasOwnProperty('reference') || this.component.reference) && !this.shouldConditionallyClear();
     }
     /**
      * Returns the data for the subform.
@@ -583,19 +594,17 @@ class FormComponent extends Component_1.default {
             this.dataValue = submission;
             return Promise.resolve(this.dataValue);
         }
-        if (this.isSubFormLazyLoad() && !this.subFormLoading) {
-            return this.createSubForm(true)
-                .then(this.submitSubForm(false))
-                .then(() => {
-                return this.dataValue;
-            })
+        // we need to load a hidden form (when clearOnHide is disabled) in order to get and submit (if needed) its data
+        const loadHiddenForm = !this.component.clearOnHide;
+        if ((this.isSubFormLazyLoad() || loadHiddenForm) && !this.subFormLoading && !this.subForm) {
+            return this.createSubForm(true, true)
+                .then(() => this.submitSubForm(false))
+                .then(() => this.dataValue)
                 .then(() => super.beforeSubmit());
         }
         else {
             return this.submitSubForm(false)
-                .then(() => {
-                return this.dataValue;
-            })
+                .then(() => this.dataValue)
                 .then(() => super.beforeSubmit());
         }
     }
@@ -660,7 +669,7 @@ class FormComponent extends Component_1.default {
      * Sets the subform value
      * @param {object|null|undefined} submission - The submission to set.
      * @param {object|null|undefined} flags - Any flags to apply when setting the submission.
-     * @return {void}
+     * @returns {void}
      */
     onSetSubFormValue(submission, flags) {
         this.subForm.setValue(submission, flags);

package/lib/cjs/components/form/editForm/Form.edit.data.js CHANGED Viewed

@@ -11,7 +11,7 @@ exports.default = [
     {
         weight: 140,
         type: 'checkbox',
-        label: 'Clear Value When Hidden',
+        label: 'Omit Value From Submission Data When Conditionally Hidden',
         key: 'clearOnHide',
         defaultValue: true,
         tooltip: 'When a field is hidden, clear the value.',

package/lib/cjs/components/html/HTML.js CHANGED Viewed

@@ -58,8 +58,7 @@ class HTMLComponent extends Component_1.default {
         super.checkRefreshOn(changed);
         let visible;
         if (this.hasCondition()) {
-            this._conditionallyHidden = this.checkConditionallyHidden();
-            visible = !this.conditionallyHidden;
+            visible = !this.conditionallyHidden();
         }
         else {
             visible = !this.component.hidden;

package/lib/cjs/components/radio/Radio.js CHANGED Viewed

@@ -355,7 +355,7 @@ class RadioComponent extends ListComponent_1.default {
             const value = this.dataValue;
             this.refs.wrapper.forEach((wrapper, index) => {
                 const input = this.refs.input[index];
-                const checked = (input.type === 'checkbox') ? value[input.value] || input.checked : (input.value.toString() === value.toString());
+                const checked = (value === undefined || value === null) ? false : (input.type === 'checkbox') ? value[input.value] || input.checked : (input.value.toString() === value.toString());
                 if (checked) {
                     //add class to container when selected
                     this.addClass(wrapper, this.optionSelectedClass);

package/lib/cjs/components/select/editForm/Select.edit.data.d.ts CHANGED Viewed

@@ -172,6 +172,7 @@ declare const _default: ({
     key: string;
     tooltip: string;
     weight: number;
+    defaultValue: boolean;
     conditional: {
         json: {
             and: ({
@@ -192,7 +193,6 @@ declare const _default: ({
     data?: undefined;
     as?: undefined;
     editor?: undefined;
-    defaultValue?: undefined;
     description?: undefined;
     reorder?: undefined;
     components?: undefined;

package/lib/cjs/components/select/editForm/Select.edit.data.js CHANGED Viewed

@@ -119,6 +119,7 @@ exports.default = [
         key: 'lazyLoad',
         tooltip: 'When set, this will not fire off the request to the URL until this control is within focus. This can improve performance if you have many Select dropdowns on your form where the API\'s will only fire when the control is activated.',
         weight: 11,
+        defaultValue: true,
         conditional: {
             json: {
                 and: [
@@ -208,7 +209,7 @@ exports.default = [
         label: 'Value Property',
         key: 'valueProperty',
         skipMerge: true,
-        clearOnHide: true,
+        clearOnHide: false,
         tooltip: 'The field to use as the value.',
         weight: 11,
         refreshOn: 'data.resource',

package/lib/cjs/components/selectboxes/SelectBoxes.js CHANGED Viewed

@@ -64,6 +64,9 @@ class SelectBoxesComponent extends Radio_1.default {
         info.attr.class = 'form-check-input';
         return info;
     }
+    get hasDefaultValue() {
+        return true;
+    }
     get emptyValue() {
         return this.component.values.reduce((prev, value) => {
             if (value.value) {

package/lib/cjs/components/tabs/Tabs.js CHANGED Viewed

@@ -143,6 +143,7 @@ class TabsComponent extends NestedComponent_1.default {
             this.addClass(this.refs[this.tabLinkKey][index], 'active');
             this.addClass(this.refs[this.tabLinkKey][index], 'formio-tab-link-active');
         }
+        this.setValue(this.data);
         this.triggerChange();
     }
     beforeFocus(component) {

package/lib/cjs/components/textfield/TextField.js CHANGED Viewed

@@ -102,6 +102,9 @@ class TextFieldComponent extends Input_1.default {
         if (((_c = this.component.widget) === null || _c === void 0 ? void 0 : _c.type) === 'calendar') {
             this.component.widget = Object.assign(Object.assign({}, this.component.widget), { readOnly: this.options.readOnly, timezone,
                 displayInTimezone, locale: this.component.widget.locale || this.options.language, saveAs: 'text' });
+            // update originalComponent to include widget settings after component initialization
+            // originalComponent is used to restore the component (and widget) after evaluating field logic
+            this.originalComponent = FormioUtils.fastCloneDeep(this.component);
         }
     }
     attach(element) {

package/lib/cjs/components/unknown/Unknown.form.d.ts CHANGED Viewed

@@ -1,5 +1,6 @@
 /**
  * Unknown Component schema.
+ * @param {...any} extend
  * @returns {object} - The Unknown Component edit form.
  */
 export default function _default(): object;

package/lib/cjs/components/unknown/Unknown.form.js CHANGED Viewed

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const Unknown_edit_display_1 = __importDefault(require("./editForm/Unknown.edit.display"));
 /**
  * Unknown Component schema.
+ * @param {...any} extend
  * @returns {object} - The Unknown Component edit form.
  */
 function default_1() {

package/lib/cjs/translations/en.js CHANGED Viewed

@@ -26,8 +26,8 @@ exports.default = {
     maxWords: '{{field}} must have no more than {{length}} words.',
     min: '{{field}} cannot be less than {{min}}.',
     max: '{{field}} cannot be greater than {{max}}.',
-    maxDate: '{{field}} should not contain date after {{- maxDate}}',
-    minDate: '{{field}} should not contain date before {{- minDate}}',
+    maxDate: '{{field}} should not contain date after {{maxDate}}',
+    minDate: '{{field}} should not contain date before {{minDate}}',
     maxYear: '{{field}} should not contain year greater than {{maxYear}}',
     minYear: '{{field}} should not contain year less than {{minYear}}',
     minSelectedCount: 'You must select at least {{minCount}} items',

package/lib/cjs/utils/formUtils.d.ts CHANGED Viewed

@@ -26,8 +26,8 @@ export const getBestMatch: typeof Utils.getBestMatch;
 export const getComponentFromPath: typeof Utils.getComponentFromPath;
 export const getComponentValue: typeof Utils.getComponentValue;
 export const findComponents: typeof Utils.findComponents;
-export const eachComponentDataAsync: (components: Component[], data: DataObject, fn: EachComponentDataAsyncCallback, includeAll?: boolean | undefined, local?: boolean | undefined, parent?: any, parentPaths?: any) => Promise<void>;
-export const eachComponentData: (components: Component[], data: DataObject, fn: EachComponentDataCallback, includeAll?: boolean | undefined, local?: boolean | undefined, parent?: any, parentPaths?: any) => void;
+export const eachComponentDataAsync: (components: import("@formio/core").Component[], data: import("@formio/core").DataObject, fn: import("@formio/core").EachComponentDataAsyncCallback, includeAll?: boolean | undefined, local?: boolean | undefined, parent?: import("@formio/core").Component | undefined, parentPaths?: import("@formio/core").ComponentPaths | undefined) => Promise<void>;
+export const eachComponentData: (components: import("@formio/core").Component[], data: import("@formio/core").DataObject, fn: import("@formio/core").EachComponentDataCallback, includeAll?: boolean | undefined, local?: boolean | undefined, parent?: import("@formio/core").Component | undefined, parentPaths?: import("@formio/core").ComponentPaths | undefined) => void;
 export const getComponentKey: typeof Utils.getComponentKey;
 export const getContextualRowPath: typeof Utils.getContextualRowPath;
 export const getContextualRowData: typeof Utils.getContextualRowData;

package/lib/cjs/utils/utils.d.ts CHANGED Viewed

@@ -208,9 +208,10 @@ export function loadZones(url: string, timezone: string): Promise<any> | any;
  * @param {string|Date} value - The value to convert into a moment date.
  * @param {string} format - The format to convert the date to.
  * @param {string} timezone - The timezone to convert the date to.
+ * @param {object} options - The options object
  * @returns {Date} - The moment date object.
  */
-export function momentDate(value: string | Date, format: string, timezone: string): Date;
+export function momentDate(value: string | Date, format: string, timezone: string, options: object): Date;
 /**
  * Format a date provided a value, format, and timezone object.
  * @param {string} timezonesUrl - The URL to load the timezone data from.
@@ -477,14 +478,6 @@ export function getDataParentComponent(componentInstance: Component): Component
  * @returns {boolean} - TRUE if the value is a promise; FALSE otherwise
  */
 export function isPromise(value: any): boolean;
-/**
- * Determines if the component has a scoping parent in tree (a component which scopes its children and manages its
- * changes by itself, e.g. EditGrid)
- * @param {Component} componentInstance - The component to check for the scoping parent.
- * @param {boolean} firstPass - Whether it is the first pass of the function
- * @returns {boolean|*} - TRUE if the component has a scoping parent; FALSE otherwise
- */
-export function isInsideScopingComponent(componentInstance: Component, firstPass?: boolean): boolean | any;
 /**
  * Returns all the focusable elements within the provided dom element.
  * @param {HTMLElement} element - The element to get the focusable elements from.

package/lib/cjs/utils/utils.js CHANGED Viewed

@@ -19,7 +19,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 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.removeHTML = exports.setActionProperty = exports.checkTrigger = exports.checkCondition = exports.checkJsonConditional = exports.checkCustomConditional = exports.getComponentActualValue = exports.checkSimpleConditional = exports.checkCalculated = exports.isMongoId = exports.boolValue = exports.getScriptPlugin = 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 = exports.observeOverload = exports.withSwitch = void 0;
+exports.interpolateErrors = exports.getComponentSavedTypes = exports.componentValueTypes = exports._ = exports.getFocusableElements = 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 = exports.withSwitch = void 0;
 const lodash_1 = __importDefault(require("lodash"));
 exports._ = lodash_1.default;
 const json_logic_js_1 = __importDefault(require("json-logic-js"));
@@ -687,9 +687,10 @@ exports.loadZones = loadZones;
  * @param {string|Date} value - The value to convert into a moment date.
  * @param {string} format - The format to convert the date to.
  * @param {string} timezone - The timezone to convert the date to.
+ * @param {object} options - The options object
  * @returns {Date} - The moment date object.
  */
-function momentDate(value, format, timezone) {
+function momentDate(value, format, timezone, options) {
     const momentDate = (0, moment_timezone_1.default)(value);
     if (!timezone) {
         return momentDate;
@@ -697,7 +698,7 @@ function momentDate(value, format, timezone) {
     if (timezone === 'UTC') {
         timezone = 'Etc/UTC';
     }
-    if ((timezone !== currentTimezone() || (format && format.match(/\s(z$|z\s)/))) && moment_timezone_1.default.zonesLoaded) {
+    if ((timezone !== currentTimezone() || (format && format.match(/\s(z$|z\s)/))) && (moment_timezone_1.default.zonesLoaded || (options === null || options === void 0 ? void 0 : options.email))) {
         return momentDate.tz(timezone);
     }
     return momentDate;
@@ -1592,27 +1593,6 @@ function isPromise(value) {
         && Object.prototype.toString.call(value) === '[object Promise]';
 }
 exports.isPromise = isPromise;
-/**
- * Determines if the component has a scoping parent in tree (a component which scopes its children and manages its
- * changes by itself, e.g. EditGrid)
- * @param {Component} componentInstance - The component to check for the scoping parent.
- * @param {boolean} firstPass - Whether it is the first pass of the function
- * @returns {boolean|*} - TRUE if the component has a scoping parent; FALSE otherwise
- */
-function isInsideScopingComponent(componentInstance, firstPass = true) {
-    if (!firstPass && (componentInstance === null || componentInstance === void 0 ? void 0 : componentInstance.hasScopedChildren)) {
-        return true;
-    }
-    const dataParent = getDataParentComponent(componentInstance);
-    if (dataParent === null || dataParent === void 0 ? void 0 : dataParent.hasScopedChildren) {
-        return true;
-    }
-    else if (dataParent === null || dataParent === void 0 ? void 0 : dataParent.parent) {
-        return isInsideScopingComponent(dataParent.parent, false);
-    }
-    return false;
-}
-exports.isInsideScopingComponent = isInsideScopingComponent;
 /**
  * Returns all the focusable elements within the provided dom element.
  * @param {HTMLElement} element - The element to get the focusable elements from.

package/lib/mjs/Embed.js CHANGED Viewed

@@ -14,7 +14,7 @@ export class Formio {
         Formio._formioReady = ready;
         Formio._formioReadyReject = reject;
     });
-    static version = '5.1.0-rc.8';
+    static version = '5.1.0';
     static setLicense(license, norecurse = false) {
         Formio.license = license;
         if (!norecurse && Formio.FormioClass) {

package/lib/mjs/Formio.js CHANGED Viewed

@@ -4,7 +4,7 @@ import CDN from './CDN';
 import Providers from './providers';
 FormioCore.cdn = new CDN();
 FormioCore.Providers = Providers;
-FormioCore.version = '5.1.0-rc.8';
+FormioCore.version = '5.1.0';
 CDN.defaultCDN = FormioCore.version.includes('rc') ? 'https://cdn.test-form.io' : 'https://cdn.form.io';
 const isNil = (val) => val === null || val === undefined;
 FormioCore.prototype.uploadFile = function (storage, file, fileName, dir, progressCallback, url, options, fileKey, groupPermissions, groupId, uploadStartCallback, abortCallback, multipartOptions) {

package/lib/mjs/PDFBuilder.js CHANGED Viewed

@@ -294,7 +294,7 @@ export default class PDFBuilder extends WebformBuilder {
                     height: schema.height,
                     width: schema.width
                 };
-                if (!this.options.noNewEdit && !component.component.noNewEdit) {
+                if (!this.options.noNewEdit && !component.component.noNewEdit && this.hasEditTabs(component.type)) {
                     this.editComponent(component.component, this.getParentContainer(component), isNew);
                 }
                 this.emit('updateComponent', component.component);
@@ -318,7 +318,7 @@ export default class PDFBuilder extends WebformBuilder {
         });
         this.webform.on('iframe-componentClick', schema => {
             const component = this.webform.getComponentById(schema.id);
-            if (component) {
+            if (component && this.hasEditTabs(component.type)) {
                 this.editComponent(component.component, this.getParentContainer(component));
             }
         }, true);

package/lib/mjs/Webform.d.ts CHANGED Viewed

@@ -334,7 +334,7 @@ declare class Webform extends NestedDataComponent {
      * 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.
-     * @return {void}
+     * @returns {void}
      */
     onSetSubmission(submission: object | null | undefined, flags?: object | null | undefined): void;
     /**
@@ -452,7 +452,7 @@ declare class Webform extends NestedDataComponent {
      */
     submit(before?: boolean, options?: any): Promise<any>;
     submitUrl(URL: any, headers: any): void;
-    triggerCaptcha(): void;
+    triggerCaptcha(components?: null): void;
     _nosubmit: any;
     get conditions(): any;
     get variables(): any;

package/lib/mjs/Webform.js CHANGED Viewed

@@ -705,7 +705,7 @@ export default class Webform extends NestedDataComponent {
      * 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.
-     * @return {void}
+     * @returns {void}
      */
     onSetSubmission(submission, flags = {}) {
         this.submissionSet = true;
@@ -1528,17 +1528,20 @@ export default class Webform extends NestedDataComponent {
             return console.warn("You should add a URL to this button.");
         }
     }
-    triggerCaptcha() {
+    triggerCaptcha(components = null) {
         if (!this || !this.components) {
             return;
         }
         const captchaComponent = [];
-        this.eachComponent((component) => {
+        eachComponent(components || this.components, (component) => {
             if (/^(re)?captcha$/.test(component.type) && component.component.eventType === 'formLoad') {
                 captchaComponent.push(component);
             }
-        });
+        }, true);
         if (captchaComponent.length > 0) {
+            if (captchaComponent[0].component.provider === 'google' && components) {
+                return;
+            }
             captchaComponent[0].verify(`${this.form.name ? this.form.name : 'form'}Load`);
         }
     }

package/lib/mjs/WebformBuilder.d.ts CHANGED Viewed

@@ -123,6 +123,7 @@ export default class WebformBuilder extends Component {
     addBuilderGroup(name: any, group: any): void;
     updateBuilderGroup(name: any, group: any): void;
     generateKey(info: any): any;
+    hasEditTabs(type: any): boolean;
 }
 import Component from './components/_classes/component/Component';
 import Webform from './Webform';

package/lib/mjs/WebformBuilder.js CHANGED Viewed

@@ -115,7 +115,9 @@ export default class WebformBuilder extends Component {
                 html,
                 disableBuilderActions: self?.component?.disableBuilderActions,
                 childComponent: component,
-                design: self?.options?.design
+                design: self?.options?.design,
+                editJson: self?.options?.editJson,
+                editComponent: this.hasEditTabs(component.type)
             });
         };
         this.options.hooks.renderComponents = (html, { components, self }) => {
@@ -852,7 +854,11 @@ export default class WebformBuilder extends Component {
             parent.addChildComponent(info, element, target, source, sibling);
         }
         const componentInDataGrid = parent.type === 'datagrid';
-        if (isNew && !this.options.noNewEdit && !info.noNewEdit && !(this.options.design && info.type === 'reviewpage')) {
+        if (isNew
+            && !this.options.noNewEdit
+            && !info.noNewEdit
+            && this.hasEditTabs(info.type)
+            && !(this.options.design && info.type === 'reviewpage')) {
             this.editComponent(info, target, isNew, null, null, { inDataGrid: componentInDataGrid });
         }
         // Only rebuild the parts needing to be rebuilt.
@@ -1630,4 +1636,13 @@ export default class WebformBuilder extends Component {
             info.placeholder ||
             info.type);
     }
+    hasEditTabs(type) {
+        // If the component type does not exist then it has no edit tabs
+        if (!Components.components[type]) {
+            return false;
+        }
+        const editTabs = getComponent(Components.components[type === 'custom' ? 'unknown' : type].editForm().components, 'tabs', true).components;
+        const hiddenEditTabs = _.filter(_.get(this.options, `editForm.${type}`, []), 'ignore');
+        return _.intersectionBy(editTabs, hiddenEditTabs, 'key').length !== editTabs.length;
+    }
 }

package/lib/mjs/Wizard.d.ts CHANGED Viewed

@@ -106,6 +106,7 @@ declare class Wizard extends Webform {
     onChange(flags: any, changed: any, modified: any, changes: any): void;
     checkValidity(data: any, dirty: any, row: any, currentPageOnly: any, childErrors?: any[]): any;
     focusOnComponent(key: any): void | Promise<void>;
+    triggerButtonCaptcha(page: any): void;
 }
 declare namespace Wizard {
     let setBaseUrl: any;

package/lib/mjs/Wizard.js CHANGED Viewed

@@ -594,6 +594,7 @@ export default class Wizard extends Webform {
             }
             this.redraw().then(() => {
                 this.checkData(this.submission.data);
+                this.triggerCaptcha(this.currentPage.components);
                 const errors = this.submitted ? this.validate(this.localData, { dirty: true }) : this.validateCurrentPage();
                 if (this.alert) {
                     this.showErrors(errors, true, true);
@@ -659,6 +660,7 @@ export default class Wizard extends Webform {
     beforeSubmit() {
         const pages = this.getPages({ all: true });
         return Promise.all(pages.map((page) => {
+            this.triggerButtonCaptcha(page);
             page.options.beforeSubmit = true;
             return page.beforeSubmit();
         }));
@@ -717,7 +719,10 @@ export default class Wizard extends Webform {
     validateCurrentPage(flags = {}) {
         const components = this.currentPage?.components.map((component) => component.component);
         // Accessing the parent ensures the right instance (whether it's the parent Wizard or a nested Wizard) performs its validation
-        return this.currentPage?.parent.validateComponents(components, this.root.data, flags);
+        if (this.currentPage?.parent) {
+            return this.currentPage?.parent.validateComponents(components, this.root.data, flags);
+        }
+        return this.currentPage?.validateComponents(components, this.root ? this.root.data : this.data, flags);
     }
     emitPrevPage() {
         this.emit('prevPage', { page: this.page, submission: this.submission });
@@ -929,6 +934,22 @@ export default class Wizard extends Webform {
         }
         return super.focusOnComponent(key);
     }
+    triggerButtonCaptcha(page) {
+        if (!page.components) {
+            return;
+        }
+        let captchaComponent;
+        page.eachComponent((component) => {
+            if (/^(re)?captcha$/.test(component.component.type) &&
+                component.component.eventType === 'buttonClick' &&
+                component.component.buttonKey === 'submit') {
+                captchaComponent = component;
+            }
+        });
+        if (captchaComponent) {
+            captchaComponent.verify(`submitClick`);
+        }
+    }
 }
 Wizard.setBaseUrl = Formio.setBaseUrl;
 Wizard.setApiUrl = Formio.setApiUrl;