@formio/js 5.1.0-dev.6094.c49181e → 5.1.0-dev.6100.6a7b450

package/lib/mjs/Wizard.js

@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import Webform from './Webform';
 import { Formio } from './Formio';
-import { fastCloneDeep, checkCondition, firstNonNil, uniqueKey, eachComponent, } from './utils/utils';
+import { fastCloneDeep, checkCondition, firstNonNil, uniqueKey, eachComponent, } from './utils';
 export default class Wizard extends Webform {
     /**
      * Constructor for wizard-based forms.
@@ -29,7 +29,6 @@ export default class Wizard extends Webform {
         this.originalComponents = [];
         this.page = 0;
         this.currentPanel = null;
-        this.currentPanels = null;
         this.currentNextPage = 0;
         this._seenPages = [0];
         this.subWizards = [];
@@ -48,12 +47,12 @@ export default class Wizard extends Webform {
     }
     getPages(args = {}) {
         const { all = false } = args;
-        const pages = this.hasExtraPages ? this.components : this.pages;
+        const pages = this.hasSubWizards ? this.components : this.pages;
         const filteredPages = pages
             .filter(all ? _.identity : (p, index) => this._seenPages.includes(index));
         return filteredPages;
     }
-    get hasExtraPages() {
+    get hasSubWizards() {
         return !_.isEmpty(this.subWizards);
     }
     get data() {
@@ -177,9 +176,9 @@ export default class Wizard extends Webform {
     }
     render() {
         const ctx = this.renderContext;
-        if (this.component.key) {
-            ctx.panels.map(panel => {
-                if (panel.key === this.component.key) {
+        if (this.component.id) {
+            ctx.panels.forEach(panel => {
+                if (panel.id === this.component.id) {
                     this.currentPanel = panel;
                     ctx.wizardPageTooltip = this.getFormattedTooltip(panel.tooltip);
                 }
@@ -580,7 +579,7 @@ export default class Wizard extends Webform {
             this.pageFieldLogic(num);
             this.getNextPage();
             let parentNum = num;
-            if (this.hasExtraPages) {
+            if (this.hasSubWizards) {
                 const pageFromPages = this.pages[num];
                 const pageFromComponents = this.components[num];
                 if (!pageFromComponents || pageFromPages?.id !== pageFromComponents.id) {
@@ -869,23 +868,18 @@ export default class Wizard extends Webform {
             this.showErrors(errors, true, true);
         }
         // If the pages change, need to redraw the header.
-        let currentPanels;
-        let panels;
+        const currentPanels = this.pages;
+        // calling this.establishPages() updates/mutates this.pages to be the current pages
+        this.establishPages();
+        const newPanels = this.pages;
         const currentNextPage = this.currentNextPage;
-        if (this.hasExtraPages) {
-            currentPanels = this.pages.map(page => page.component.key);
-            this.establishPages();
-            panels = this.pages.map(page => page.component.key);
-        }
-        else {
-            currentPanels = this.currentPanels || this.pages.map(page => page.component.key);
-            panels = this.establishPages().map(panel => panel.key);
-            this.currentPanels = panels;
-            if (this.currentPanel?.key && this.currentPanels?.length) {
-                this.setPage(this.currentPanels.findIndex(panel => panel === this.currentPanel.key));
-            }
+        const panelsUpdated = !_.isEqual(newPanels, currentPanels);
+        if (this.currentPanel?.id && this.pages.length && (!this.hasSubWizards || (this.hasSubWizards && panelsUpdated))) {
+            const newIndex = this.pages.findIndex(page => page.id === this.currentPanel.id);
+            if (newIndex !== -1)
+                this.setPage(newIndex);
         }
-        if (!_.isEqual(panels, currentPanels) || (flags && flags.fromSubmission)) {
+        if (panelsUpdated || (flags && flags.fromSubmission)) {
             this.redrawHeader();
         }
         // If the next page changes, then make sure to redraw navigation.

package/lib/mjs/WizardBuilder.js

@@ -2,7 +2,7 @@ import WebformBuilder from './WebformBuilder';
 import Webform from './Webform';
 import BuilderUtils from './utils/builder';
 import _ from 'lodash';
-import { fastCloneDeep } from './utils/utils';
+import { fastCloneDeep } from './utils';
 export default class WizardBuilder extends WebformBuilder {
     constructor() {
         let element, options;

package/lib/mjs/components/_classes/component/Component.d.ts

@@ -165,7 +165,6 @@ declare class Component extends Element {
     get componentsMap(): object;
     /**
      * Returns if the parent should conditionally clear.
-     *
      * @returns {boolean} - If the parent should conditionally clear.
      */
     parentShouldConditionallyClear(): boolean;

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

@@ -5,8 +5,8 @@ import _ from 'lodash';
 import isMobile from 'ismobilejs';
 import { processOne, processOneSync, validateProcessInfo } from '@formio/core/process';
 import { Formio } from '../../../Formio';
-import * as FormioUtils from '../../../utils/utils';
-import { fastCloneDeep, boolValue, currentTimezone, getScriptPlugin, getContextualRowData } from '../../../utils/utils';
+import FormioUtils from '../../../utils';
+import { fastCloneDeep, boolValue, currentTimezone, getScriptPlugin, getContextualRowData } from '../../../utils';
 import Element from '../../../Element';
 import ComponentModal from '../componentModal/ComponentModal';
 import Widgets from '../../../widgets';
@@ -424,7 +424,6 @@ export default class Component extends Element {
     }
     /**
      * Returns if the parent should conditionally clear.
-     *
      * @returns {boolean} - If the parent should conditionally clear.
      */
     parentShouldConditionallyClear() {
@@ -2683,13 +2682,16 @@ export default class Component extends Element {
         }
         const isArray = Array.isArray(value);
         const valueInput = this.refs.fileLink || this.refs.input;
+        const isFilelink = !!this.refs.fileLink;
         if (isArray &&
             Array.isArray(this.defaultValue) &&
             this.refs.hasOwnProperty('input') &&
             valueInput &&
             (valueInput.length !== value.length) &&
             this.visible) {
-            this.redraw();
+            if (isFilelink || valueInput.length) {
+                this.redraw();
+            }
         }
         if (this.isHtmlRenderMode() && flags && flags.fromSubmission && changed) {
             this.redraw();
@@ -3196,6 +3198,9 @@ export default class Component extends Element {
         data = data || this.rootValue;
         flags = flags || {};
         row = row || this.data;
+        if (flags.noCheck) {
+            return true;
+        }
         // Some components (for legacy reasons) have calls to "checkData" in inappropriate places such
         // as setValue. Historically, this was bypassed by a series of cached states around the data model
         // which caused its own problems. We need to ensure that premium and custom components do not fall into
@@ -3210,9 +3215,6 @@ export default class Component extends Element {
         if (!flags.fromBlur) {
             this.checkRefreshOn(flags.changes, flags);
         }
-        if (flags.noCheck) {
-            return true;
-        }
         this.checkComponentConditions(data, flags, row);
         if (this.id !== flags.triggeredComponentId) {
             this.calculateComponentValue(data, flags, row);

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

@@ -1,5 +1,5 @@
 import EditFormUtils from './utils';
-import { getContextComponents } from '../../../../utils/utils';
+import { getContextComponents } from '../../../../utils';
 /* eslint-disable quotes, max-len */
 export default [
     {

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

@@ -1,5 +1,5 @@
 import EditFormUtils from './utils';
-import { getContextComponents } from '../../../../utils/utils';
+import { getContextComponents } from '../../../../utils';
 /* eslint-disable quotes, max-len */
 export default [
     {

package/lib/mjs/components/_classes/componentModal/ComponentModal.js

@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import { fastCloneDeep } from '../../../utils/utils';
+import { fastCloneDeep } from '../../../utils';
 export default class ComponentModal {
     static render(component, data, topLevel) {
         const children = component.renderTemplate('component', data, topLevel);

package/lib/mjs/components/_classes/input/Input.js

@@ -1,5 +1,5 @@
 import Multivalue from '../multivalue/Multivalue';
-import { convertStringToHTMLElement } from '../../../utils/utils';
+import { convertStringToHTMLElement } from '../../../utils';
 import Widgets from '../../../widgets';
 import _ from 'lodash';
 export default class Input extends Multivalue {

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

@@ -1,7 +1,7 @@
 import Field from '../field/Field';
 import { Formio } from '../../../Formio';
 import _ from 'lodash';
-import { getItemTemplateKeys } from '../../../utils/utils';
+import { getItemTemplateKeys } from '../../../utils';
 export default class ListComponent extends Field {
     static schema(...extend) {
         return Field.schema({

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

@@ -3,7 +3,7 @@ import _ from 'lodash';
 import Field from '../field/Field';
 import Components from '../../Components';
 '';
-import { getComponentPaths, getRandomComponentId, componentMatches, getBestMatch, getStringFromComponentPath } from '../../../utils/utils';
+import FormioUtils from '../../../utils';
 import { process as processAsync, processSync } from '@formio/core/process';
 /**
  * NestedComponent class.
@@ -204,7 +204,7 @@ export default class NestedComponent extends Field {
      */
     set rowIndex(value) {
         this._rowIndex = value;
-        this.paths = getComponentPaths(this.component, this.parent?.component, {
+        this.paths = FormioUtils.getComponentPaths(this.component, this.parent?.component, {
             ...(this.parent?.paths || {}),
             ...{ dataIndex: value }
         });
@@ -308,7 +308,7 @@ export default class NestedComponent extends Field {
      * @returns {any} - The component that is located.
      */
     getComponent(path) {
-        path = getStringFromComponentPath(path);
+        path = FormioUtils.getStringFromComponentPath(path);
         const matches = {
             path: undefined,
             fullPath: undefined,
@@ -320,7 +320,7 @@ export default class NestedComponent extends Field {
         };
         this.everyComponent((component) => {
             // All searches are relative to this component so replace this path from the child paths.
-            componentMatches(component.component, {
+            FormioUtils.componentMatches(component.component, {
                 path: component.paths?.path?.replace(new RegExp(`^${this.paths?.path}\\.?`), ''),
                 fullPath: component.paths?.fullPath?.replace(new RegExp(`^${this.paths?.fullPath}\\.?`), ''),
                 localPath: component.paths?.localPath?.replace(new RegExp(`^${this.paths?.localPath}\\.?`), ''),
@@ -332,7 +332,7 @@ export default class NestedComponent extends Field {
                 return match;
             });
         });
-        return getBestMatch(matches)?.instance;
+        return FormioUtils.getBestMatch(matches)?.instance;
     }
     /**
      * Return a component provided the Id of the component.
@@ -374,7 +374,7 @@ export default class NestedComponent extends Field {
         options.localRoot = this.localRoot;
         options.skipInit = true;
         if (!(options.display === 'pdf' && this.builderMode)) {
-            component.id = getRandomComponentId();
+            component.id = FormioUtils.getRandomComponentId();
         }
         const comp = Components.create(component, options, data, true);
         comp.init();
@@ -659,7 +659,7 @@ export default class NestedComponent extends Field {
     }
     validationProcessor({ scope, data, row, instance, paths }, flags) {
         const { dirty } = flags;
-        if (this.root.hasExtraPages && this.page !== this.root.page) {
+        if (this.root.hasSubWizards && this.page !== this.root.page) {
             instance = this.componentsMap?.hasOwnProperty(paths.dataPath)
                 ? this.componentsMap[paths.dataPath]
                 : this.getComponent(paths.dataPath);

package/lib/mjs/components/_classes/nestedarray/NestedArrayComponent.js

@@ -2,7 +2,7 @@
 import _ from 'lodash';
 import { Utils } from '@formio/core/utils';
 const { getComponentPaths } = Utils;
-import { componentValueTypes, isLayoutComponent } from '../../../utils/utils';
+import { componentValueTypes, isLayoutComponent } from '../../../utils';
 import Component from '../component/Component';
 import NestedDataComponent from '../nesteddata/NestedDataComponent';
 export default class NestedArrayComponent extends NestedDataComponent {

package/lib/mjs/components/_classes/nesteddata/NestedDataComponent.js

@@ -2,7 +2,7 @@
 import Component from '../component/Component';
 import NestedComponent from '../nested/NestedComponent';
 import _ from 'lodash';
-import { componentValueTypes, getComponentSavedTypes } from '../../../utils/utils';
+import { componentValueTypes, getComponentSavedTypes } from '../../../utils';
 export default class NestedDataComponent extends NestedComponent {
     hasChanged(newValue, oldValue) {
         // If we do not have a value and are getting set to anything other than undefined or null, then we changed.

package/lib/mjs/components/address/Address.js

@@ -5,7 +5,7 @@ import { GoogleAddressProvider } from '../../providers/address/GoogleAddressProv
 import Field from '../_classes/field/Field';
 import NestedComponent from '../_classes/nested/NestedComponent';
 import ContainerComponent from '../container/Container';
-import { componentValueTypes, getComponentSavedTypes } from '../../utils/utils';
+import { componentValueTypes, getComponentSavedTypes } from '../../utils';
 export const AddressComponentMode = {
     Autocomplete: 'autocomplete',
     Manual: 'manual',

package/lib/mjs/components/alert/Alert.js

@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import { getStringFromComponentPath } from '../../utils/utils';
+import { getStringFromComponentPath } from '../../utils';
 export default class Alert {
     constructor(container, component) {
         this.container = container;

package/lib/mjs/components/button/Button.d.ts

@@ -9,7 +9,7 @@ export default class ButtonComponent extends Field {
     };
     static savedValueTypes(schema: any): string[];
     constructor(component: any, options: any, data: any);
-    filesUploading: any[];
+    filesUploading: number;
     get inputInfo(): any;
     get labelInfo(): {
         hidden: boolean;

package/lib/mjs/components/button/Button.js

@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import Field from '../_classes/field/Field';
 import Input from '../_classes/input/Input';
-import { componentValueTypes, eachComponent, getArrayFromComponentPath, getComponentSavedTypes } from '../../utils/utils';
+import { componentValueTypes, eachComponent, getArrayFromComponentPath, getComponentSavedTypes } from '../../utils';
 export default class ButtonComponent extends Field {
     static schema(...extend) {
         return Input.schema({
@@ -34,7 +34,7 @@ export default class ButtonComponent extends Field {
     }
     constructor(component, options, data) {
         super(component, options, data);
-        this.filesUploading = [];
+        this.filesUploading = 0;
     }
     get defaultSchema() {
         return ButtonComponent.schema();
@@ -142,16 +142,13 @@ export default class ButtonComponent extends Field {
                 this.addClass(this.refs.buttonMessageContainer, 'has-error');
                 this.setContent(this.refs.buttonMessage, resultMessage);
             }, true);
-            this.on('fileUploadingStart', (filePromise) => {
-                this.filesUploading.push(filePromise);
+            this.on('fileUploadingStart', () => {
+                this.filesUploading++;
                 this.disabled = true;
                 this.setDisabled(this.refs.button, this.disabled);
             }, true);
-            this.on('fileUploadingEnd', (filePromise) => {
-                const index = this.filesUploading.indexOf(filePromise);
-                if (index !== -1) {
-                    this.filesUploading.splice(index, 1);
-                }
+            this.on('fileUploadingEnd', () => {
+                this.filesUploading--;
                 this.disabled = this.shouldDisabled ? true : false;
                 this.setDisabled(this.refs.button, this.disabled);
             }, true);
@@ -247,7 +244,7 @@ export default class ButtonComponent extends Field {
         }
     }
     get shouldDisabled() {
-        return super.shouldDisabled || !!this.filesUploading?.length || this.isDisabledOnInvalid;
+        return super.shouldDisabled || this.filesUploading > 0 || this.isDisabledOnInvalid;
     }
     attach(element) {
         this.loadRefs(element, {

package/lib/mjs/components/checkbox/Checkbox.js

@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import { componentValueTypes, getComponentSavedTypes } from '../../utils/utils';
+import { componentValueTypes, getComponentSavedTypes } from '../../utils';
 import Field from '../_classes/field/Field';
 export default class CheckBoxComponent extends Field {
     static schema(...extend) {

package/lib/mjs/components/container/Container.js

@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import { componentValueTypes, getComponentSavedTypes, getFocusableElements } from '../../utils/utils';
+import { componentValueTypes, getComponentSavedTypes, getFocusableElements } from '../../utils';
 import Component from '../_classes/component/Component';
 import Field from '../_classes/field/Field';
 import NestedDataComponent from '../_classes/nesteddata/NestedDataComponent';

package/lib/mjs/components/currency/Currency.js

@@ -1,7 +1,7 @@
 import { createNumberMask } from '@formio/text-mask-addons';
 import { maskInput } from '@formio/vanilla-text-mask';
 import _ from 'lodash';
-import { getCurrencyAffixes } from '../../utils/utils';
+import { getCurrencyAffixes } from '../../utils';
 import NumberComponent from '../number/Number';
 export default class CurrencyComponent extends NumberComponent {
     static schema(...extend) {

package/lib/mjs/components/datagrid/DataGrid.js

@@ -1,6 +1,6 @@
 import _ from 'lodash';
 import NestedArrayComponent from '../_classes/nestedarray/NestedArrayComponent';
-import { fastCloneDeep, getFocusableElements } from '../../utils/utils';
+import { fastCloneDeep, getFocusableElements, getComponent } from '../../utils';
 export default class DataGridComponent extends NestedArrayComponent {
     static schema(...extend) {
         return NestedArrayComponent.schema({
@@ -488,6 +488,10 @@ export default class DataGridComponent extends NestedArrayComponent {
             options.row = `${rowIndex}-${colIndex}`;
             options.rowIndex = rowIndex;
             options.onChange = (flags, changed, modified) => {
+                if (changed.component.type === 'form') {
+                    const formComp = getComponent(this.component.components, changed.component.key);
+                    _.set(formComp, 'components', changed.component.components);
+                }
                 this.triggerChange({ modified });
             };
             let columnComponent;

package/lib/mjs/components/datetime/DateTime.js

@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import dayjs from 'dayjs';
 import FormioUtils from '../../utils';
-import { componentValueTypes, fastCloneDeep, getComponentSavedTypes } from '../../utils/utils';
+import { componentValueTypes, fastCloneDeep, getComponentSavedTypes } from '../../utils';
 import Input from '../_classes/input/Input';
 export default class DateTimeComponent extends Input {
     static schema(...extend) {

package/lib/mjs/components/day/Day.js

@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import moment from 'moment';
 import Field from '../_classes/field/Field';
-import { boolValue, componentValueTypes, getComponentSavedTypes, getLocaleDateFormatInfo } from '../../utils/utils';
+import { boolValue, componentValueTypes, getComponentSavedTypes, getLocaleDateFormatInfo } from '../../utils';
 import { getDayFormat } from '@formio/core';
 export default class DayComponent extends Field {
     static schema(...extend) {
@@ -53,7 +53,7 @@ export default class DayComponent extends Field {
     // Empty value used before 9.3.x
     static oldEmptyValue = '00/00/0000';
     constructor(component, options, data) {
-        if (!options.inFormBuilder && !options.building) {
+        if (options && !options.inFormBuilder && !options.building) {
             if (component.maxDate && component.maxDate.indexOf('moment(') === -1) {
                 component.maxDate = moment(component.maxDate, 'YYYY-MM-DD').toISOString();
             }

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

@@ -4,7 +4,7 @@ import { editgrid as templates } from '@formio/bootstrap/components';
 import NestedArrayComponent from '../_classes/nestedarray/NestedArrayComponent';
 import Component from '../_classes/component/Component';
 import Alert from '../alert/Alert';
-import { fastCloneDeep, Evaluator, getArrayFromComponentPath, eachComponent } from '../../utils/utils';
+import { fastCloneDeep, Evaluator, getArrayFromComponentPath, eachComponent } from '../../utils';
 const EditRowState = {
     New: 'new',
     Editing: 'editing',

package/lib/mjs/components/editgrid/editForm/EditGrid.edit.display.js

@@ -33,7 +33,7 @@ export default [
         weight: 1002,
         input: false,
         customConditional() {
-            return !Evaluator.noeval;
+            return !Evaluator.noeval || !Evaluator.protectedEval;
         },
     },
     {

package/lib/mjs/components/file/File.js

@@ -1,5 +1,5 @@
 import Field from '../_classes/field/Field';
-import { componentValueTypes, getComponentSavedTypes, uniqueName } from '../../utils/utils';
+import { componentValueTypes, getComponentSavedTypes, uniqueName } from '../../utils';
 import download from 'downloadjs';
 import _ from 'lodash';
 import fileProcessor from '../../providers/processor/fileProcessor';
@@ -903,17 +903,16 @@ export default class FileComponent extends Field {
         } : false;
     }
     async uploadFile(fileToSync) {
-        const filePromise = this.fileService.uploadFile(fileToSync.storage, fileToSync.file, fileToSync.name, fileToSync.dir, 
+        return await this.fileService.uploadFile(fileToSync.storage, fileToSync.file, fileToSync.name, fileToSync.dir, 
         // Progress callback
         this.updateProgress.bind(this, fileToSync), fileToSync.url, fileToSync.options, fileToSync.fileKey, fileToSync.groupPermissions, fileToSync.groupResourceId, () => {
-            this.emit('fileUploadingStart', filePromise);
+            this.emit('fileUploadingStart');
         }, 
         // Abort upload callback
         (abort) => this.abortUploads.push({
             id: fileToSync.id,
             abort,
         }), this.getMultipartOptions(fileToSync));
-        return await filePromise;
     }
     async upload() {
         if (!this.filesToSync.filesToUpload.length) {
@@ -933,7 +932,7 @@ export default class FileComponent extends Field {
                 fileToSync.message = this.t('succefullyUploaded');
                 fileInfo.originalName = fileToSync.originalName;
                 fileInfo.hash = fileToSync.hash;
-                this.emit('fileUploadingEnd', Promise.resolve(fileInfo));
+                this.emit('fileUploadingEnd');
             }
             catch (response) {
                 fileToSync.status = 'error';
@@ -943,7 +942,7 @@ export default class FileComponent extends Field {
                     : response.type === 'abort'
                         ? this.t('Request was aborted')
                         : response.toString();
-                this.emit('fileUploadingEnd', Promise.reject(response));
+                this.emit('fileUploadingEnd');
                 this.emit('fileUploadError', {
                     fileToSync,
                     response,

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

@@ -3,7 +3,7 @@ import _ from 'lodash';
 import Component from '../_classes/component/Component';
 import ComponentModal from '../_classes/componentModal/ComponentModal';
 import EventEmitter from 'eventemitter3';
-import { isMongoId, eachComponent, componentValueTypes } from '../../utils/utils';
+import { isMongoId, eachComponent, componentValueTypes } from '../../utils';
 import { Formio } from '../../Formio';
 import Form from '../../Form';
 export default class FormComponent extends Component {
@@ -274,6 +274,9 @@ export default class FormComponent extends Component {
             if (this.isSubFormLazyLoad() && !this.hasLoadedForm && !this.subFormLoading) {
                 this.createSubForm(true);
             }
+            if (!this.subFormReady) {
+                return Promise.resolve();
+            }
             return this.subFormReady.then(() => {
                 this.empty(element);
                 if (this.options.builder) {
@@ -408,7 +411,8 @@ export default class FormComponent extends Component {
                 const componentsMap = this.componentsMap;
                 const formComponentsMap = this.subForm.componentsMap;
                 _.assign(componentsMap, formComponentsMap);
-                this.component.components = this.subForm.components.map((comp) => comp.component);
+                this.component.components = this.subForm._form?.components;
+                this.component.display = this.subForm._form?.display;
                 this.subForm.on('change', () => {
                     if (this.subForm && !this.shouldConditionallyClear()) {
                         this.dataValue = this.subForm.getValue();
@@ -688,6 +692,13 @@ export default class FormComponent extends Component {
         }
         return errors;
     }
+    conditionallyHidden() {
+        const conditionallyHidden = super.conditionallyHidden();
+        if (this.subForm) {
+            this.subForm._conditionallyHidden = conditionallyHidden;
+        }
+        return conditionallyHidden;
+    }
     updateSubFormVisibility() {
         if (this.subForm) {
             this.subForm.parentVisible = this.visible;

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

@@ -30,9 +30,10 @@ export default [
         tooltip: 'if it is checked, the subform is loaded after navigation to the page with this component within the wizard.',
         input: true,
         customConditional({ instance, data }) {
-            const formInfo = instance.root?.getComponent('form')?.defaultDownloadedResources.find(res => res._id === data.form);
+            const formComp = instance.root?.getComponent('form');
+            const formInfo = formComp?.defaultDownloadedResources.find(res => res._id === data.form);
             const displayMode = 'wizard';
-            return instance.options?.editForm?.display === displayMode && formInfo && formInfo.display !== displayMode;
+            return instance.options?.editForm?.display === displayMode && ((data.form && !formInfo) || (formInfo && formInfo.display !== displayMode));
         },
     },
     {

package/lib/mjs/components/number/Number.js

@@ -2,7 +2,7 @@ import { createNumberMask } from '@formio/text-mask-addons';
 import { conformToMask, maskInput } from '@formio/vanilla-text-mask';
 import _ from 'lodash';
 import Input from '../_classes/input/Input';
-import { getNumberSeparators, getNumberDecimalLimit, componentValueTypes, getComponentSavedTypes } from '../../utils/utils';
+import { getNumberSeparators, getNumberDecimalLimit, componentValueTypes, getComponentSavedTypes } from '../../utils/';
 export default class NumberComponent extends Input {
     static schema(...extend) {
         return Input.schema({

package/lib/mjs/components/panel/Panel.js

@@ -1,5 +1,5 @@
 import NestedComponent from '../_classes/nested/NestedComponent';
-import { isChildOf } from '../../utils/utils';
+import { isChildOf } from '../../utils';
 export default class PanelComponent extends NestedComponent {
     static schema(...extend) {
         return NestedComponent.schema({

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

@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import ListComponent from '../_classes/list/ListComponent';
 import { Formio } from '../../Formio';
-import { boolValue, componentValueTypes, getComponentSavedTypes } from '../../utils/utils';
+import { boolValue, componentValueTypes, getComponentSavedTypes } from '../../utils';
 export default class RadioComponent extends ListComponent {
     static schema(...extend) {
         return ListComponent.schema({

package/lib/mjs/components/recaptcha/editForm/ReCaptcha.edit.display.js

@@ -1,4 +1,4 @@
-import { getContextButtons } from '../../../utils/utils';
+import { getContextButtons } from '../../../utils';
 export default [
     {
         key: 'recaptchaInfo',

package/lib/mjs/components/select/Select.js

@@ -2,7 +2,7 @@ import _ from 'lodash';
 import { Formio } from '../../Formio';
 import ListComponent from '../_classes/list/ListComponent';
 import Form from '../../Form';
-import { getRandomComponentId, boolValue, isPromise, componentValueTypes, getComponentSavedTypes, isSelectResourceWithObjectValue, removeHTML } from '../../utils/utils';
+import { getRandomComponentId, boolValue, isPromise, componentValueTypes, getComponentSavedTypes, isSelectResourceWithObjectValue, removeHTML } from '../../utils';
 import Choices from '../../utils/ChoicesWrapper';
 export default class SelectComponent extends ListComponent {
     static schema(...extend) {

package/lib/mjs/components/select/editForm/Select.edit.data.js

@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import { eachComponent } from '../../../utils/utils';
+import { eachComponent } from '../../../utils';
 const calculateSingleSelectData = (context, defaultValue) => {
     const { instance, data } = context;
     const rawDefaultValue = instance.downloadedResources.find(resource => _.get(resource, data.valueProperty) === defaultValue);

package/lib/mjs/components/selectboxes/SelectBoxes.js

@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import { componentValueTypes, getComponentSavedTypes, boolValue, getComponent } from '../../utils/utils';
+import { componentValueTypes, getComponentSavedTypes, boolValue, getComponent } from '../../utils';
 import RadioComponent from '../radio/Radio';
 export default class SelectBoxesComponent extends RadioComponent {
     static schema(...extend) {