@formio/js 5.1.0-dev.6040.debc859 → 5.1.0-dev.6042.603237d

package/lib/mjs/components/datetime/editForm/DateTime.edit.validation.d.ts

@@ -6,36 +6,87 @@ declare const _default: ({
     persistent: boolean;
     weight: number;
     tooltip: string;
+    applyMaskOn?: undefined;
+    logic?: undefined;
     skipMerge?: undefined;
-    customConditional?: undefined;
+    tableView?: undefined;
+    validateWhenHidden?: undefined;
     enableTime?: undefined;
 } | {
+    label: string;
+    tooltip: string;
+    applyMaskOn: string;
+    key: string;
+    logic: ({
+        name: string;
+        trigger: {
+            type: string;
+            javascript: string;
+            event?: undefined;
+        };
+        actions: {
+            name: string;
+            type: string;
+            schemaDefinition: string;
+        }[];
+    } | {
+        name: string;
+        trigger: {
+            type: string;
+            event: string;
+            javascript?: undefined;
+        };
+        actions: {
+            name: string;
+            type: string;
+            customAction: string;
+        }[];
+    })[];
     type: string;
     input: boolean;
-    key: string;
-    label: string;
     skipMerge: boolean;
     weight: number;
-    tooltip: string;
-    customConditional({ data, component }: {
-        data: any;
-        component: any;
-    }): boolean;
     persistent?: undefined;
+    tableView?: undefined;
+    validateWhenHidden?: undefined;
     enableTime?: undefined;
 } | {
+    label: string;
+    tooltip: string;
+    applyMaskOn: string;
+    tableView: boolean;
+    validateWhenHidden: boolean;
+    key: string;
+    logic: ({
+        name: string;
+        trigger: {
+            type: string;
+            javascript: string;
+            event?: undefined;
+        };
+        actions: {
+            name: string;
+            type: string;
+            schemaDefinition: string;
+        }[];
+    } | {
+        name: string;
+        trigger: {
+            type: string;
+            event: string;
+            javascript?: undefined;
+        };
+        actions: {
+            name: string;
+            type: string;
+            customAction: string;
+        }[];
+    })[];
     type: string;
     input: boolean;
     enableTime: boolean;
-    key: string;
     skipMerge: boolean;
-    label: string;
     weight: number;
-    tooltip: string;
-    customConditional({ data, component }: {
-        data: any;
-        component: any;
-    }): any;
     persistent?: undefined;
 })[];
 export default _default;

package/lib/mjs/components/datetime/editForm/DateTime.edit.validation.js

@@ -9,35 +9,44 @@ export default [
         tooltip: 'Enables to use input for moment functions instead of calendar.'
     },
     {
-        type: 'datetime',
-        input: true,
+        label: 'Minimum Date',
+        tooltip: "The minimum date that can be picked. You can also use Moment.js functions. For example: moment().subtract(10, 'days')",
+        applyMaskOn: 'change',
         key: 'datePicker.minDate',
-        label: 'Use calendar to set minDate',
-        skipMerge: true,
-        weight: 10,
-        tooltip: 'Enables to use calendar to set date.',
-        customConditional({ data, component }) {
-            if (component.datePicker && component.datePicker.minDate && component.datePicker.minDate.indexOf('moment') !== -1) {
-                return false;
-            }
-            return !data.enableMinDateInput;
-        },
-    },
-    {
+        logic: [
+            {
+                name: 'check input mode',
+                trigger: {
+                    type: 'javascript',
+                    javascript: "if (component.datePicker && component.datePicker.minDate && component.datePicker.minDate.indexOf('moment') !== -1) {\r\n  result = false;\r\n}\r\nelse {\r\n  result = !data.enableMinDateInput;\r\n}",
+                },
+                actions: [
+                    {
+                        name: 'change component',
+                        type: 'mergeComponentSchema',
+                        schemaDefinition: "schema = {\n  type: 'datetime',\n  label: 'Use calendar to set minDate',\n  enableDate: true,\n  enableTime: true,\n  tooltip: 'Enables to use calendar to set date.',\n  widget: {\n    type: 'calendar',\n    displayInTimezone: 'viewer',\n    locale: 'en',\n    useLocaleSettings: false,\n    allowInput: true,\n    mode: 'single',\n    enableTime: true,\n    noCalendar: false,\n    format: 'yyyy-MM-dd hh:mm a',\n    hourIncrement: 1,\n    minuteIncrement: 1,\n    time_24hr: false,\n    disableWeekends: false,\n    disableWeekdays: false,\n    maxDate: null,\n  },\n};",
+                    },
+                ],
+            },
+            {
+                name: 'clear value',
+                trigger: {
+                    type: 'event',
+                    event: 'componentChange',
+                },
+                actions: [
+                    {
+                        name: 'reset value',
+                        type: 'customAction',
+                        customAction: "var isDateInput = instance.component?.type === 'datetime';\nvar enableInput = data.enableMinDateInput;\nvar allowReset = result[0].component && result[0].component.key === 'enableMinDateInput' && !result[0].flags?.fromSubmission;\nif(((enableInput && isDateInput) || (!enableInput && !isDateInput)) && allowReset) {\n  instance.resetValue()\n}\n",
+                    },
+                ],
+            },
+        ],
         type: 'textfield',
         input: true,
-        enableTime: false,
-        key: 'datePicker.minDate',
         skipMerge: true,
-        label: 'Minimum Date',
         weight: 10,
-        tooltip: 'The minimum date that can be picked. You can also use Moment.js functions. For example: \n \n moment().subtract(10, \'days\')',
-        customConditional({ data, component }) {
-            if (component.datePicker && component.datePicker.minDate && component.datePicker.minDate.indexOf('moment') !== -1) {
-                return true;
-            }
-            return data.enableMinDateInput;
-        },
     },
     {
         type: 'checkbox',
@@ -49,34 +58,46 @@ export default [
         tooltip: 'Enables to use input for moment functions instead of calendar.'
     },
     {
-        type: 'datetime',
-        input: true,
+        label: 'Maximum Date',
+        tooltip: "The maximum date that can be picked. You can also use Moment.js functions. For example: moment().add(10, 'days')",
+        applyMaskOn: 'change',
+        tableView: true,
+        validateWhenHidden: false,
         key: 'datePicker.maxDate',
-        skipMerge: true,
-        label: 'Use calendar to set maxDate',
-        weight: 20,
-        tooltip: 'Enables to use calendar to set date.',
-        customConditional({ data, component }) {
-            if (component.datePicker && component.datePicker.maxDate && component.datePicker.maxDate.indexOf('moment') !== -1) {
-                return false;
-            }
-            return !data.enableMaxDateInput;
-        },
-    },
-    {
+        logic: [
+            {
+                name: 'check input mode',
+                trigger: {
+                    type: 'javascript',
+                    javascript: "if (component.datePicker && component.datePicker.maxDate && component.datePicker.maxDate.indexOf('moment') !== -1) {\r\n  result = false;\r\n}\r\nelse {\r\n  result = !data.enableMaxDateInput;\r\n}",
+                },
+                actions: [
+                    {
+                        name: 'change component',
+                        type: 'mergeComponentSchema',
+                        schemaDefinition: "schema = {\n  type: 'datetime',\n  label: 'Use calendar to set maxDate',\n  enableDate: true,\n  enableTime: true,\n  tooltip: 'Enables to use calendar to set date.',\n  widget: {\n    type: 'calendar',\n    displayInTimezone: 'viewer',\n    locale: 'en',\n    useLocaleSettings: false,\n    allowInput: true,\n    mode: 'single',\n    enableTime: true,\n    noCalendar: false,\n    format: 'yyyy-MM-dd hh:mm a',\n    hourIncrement: 1,\n    minuteIncrement: 1,\n    time_24hr: false,\n    disableWeekends: false,\n    disableWeekdays: false,\n    maxDate: null,\n  },\n};",
+                    },
+                ],
+            },
+            {
+                name: 'clear value',
+                trigger: {
+                    type: 'event',
+                    event: 'componentChange',
+                },
+                actions: [
+                    {
+                        name: 'reset value',
+                        type: 'customAction',
+                        customAction: "var isDateInput = instance.component?.type === 'datetime';\nvar enableInput = data.enableMaxDateInput;\nvar allowReset = result[0].component && result[0].component.key === 'enableMaxDateInput' && !result[0].flags?.fromSubmission;\nif(((enableInput && isDateInput) || (!enableInput && !isDateInput)) && allowReset) {\n  instance.resetValue()\n}\n",
+                    },
+                ],
+            },
+        ],
         type: 'textfield',
         input: true,
         enableTime: false,
-        key: 'datePicker.maxDate',
         skipMerge: true,
-        label: 'Maximum Date',
-        tooltip: 'The maximum date that can be picked. You can also use Moment.js functions. For example: \n \n moment().add(10, \'days\')',
         weight: 20,
-        customConditional({ data, component }) {
-            if (component.datePicker && component.datePicker.maxDate && component.datePicker.maxDate.indexOf('moment') !== -1) {
-                return true;
-            }
-            return data.enableMaxDateInput;
-        },
     }
 ];

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/day/editForm/Day.edit.display.js

@@ -3,6 +3,14 @@ export default [
         key: 'labelPosition',
         ignore: true
     },
+    {
+        key: 'labelWidth',
+        ignore: true
+    },
+    {
+        key: 'labelMargin',
+        ignore: true
+    },
     {
         weight: 15,
         type: 'checkbox',

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',
@@ -546,13 +546,6 @@ export default class EditGridComponent extends NestedArrayComponent {
             }
         });
     }
-    restoreComponentsContext() {
-        this.getComponents().forEach((component) => {
-            const rowData = this.dataValue[component.rowIndex];
-            const editRowData = this.editRows[component.rowIndex]?.data;
-            component.data = rowData || editRowData;
-        });
-    }
     flattenComponents(rowIndex) {
         const result = {};
         this.everyComponent((component) => {
@@ -1106,7 +1099,9 @@ export default class EditGridComponent extends NestedArrayComponent {
             errors.push(...this._errors);
             return false;
         }
-        const message = this.invalid || this.invalidMessage(data, dirty, false, row);
+        // TODO: this is the only place invalidMessage gets called, and it's not clear why it's needed - we already validate the editGrid
+        // component above with super.checkComponentValidity
+        const message = this.invalid || this.invalidMessage(data, dirty, false, row, options);
         if (allRowErrors.length && this.root?.submitted && !message) {
             this._errors = this.setCustomValidity(message, dirty);
             errors.push(...this._errors);
@@ -1150,9 +1145,6 @@ export default class EditGridComponent extends NestedArrayComponent {
             }
         }
         const changed = this.hasChanged(value, this.dataValue);
-        if (this.parent) {
-            this.parent.checkComponentConditions();
-        }
         this.dataValue = value;
         // Refresh editRow data when data changes.
         this.dataValue.forEach((row, rowIndex) => {
@@ -1183,7 +1175,6 @@ export default class EditGridComponent extends NestedArrayComponent {
         this.editRows = this.editRows.slice(0, dataLength);
         this.openWhenEmpty();
         this.updateOnChange(flags, changed);
-        this.checkData();
         this.changeState(changed, flags);
         return changed;
     }

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/email/editForm/Email.edit.display.js

@@ -7,6 +7,18 @@ export default [
         key: 'allowMultipleMasks',
         ignore: true,
     },
+    {
+        key: 'inputMasks',
+        ignore: true
+    },
+    {
+        key: 'widget.type',
+        ignore: true
+    },
+    {
+        key: 'widget',
+        ignore: true
+    },
     {
         key: 'showWordCount',
         ignore: true

package/lib/mjs/components/fieldset/editForm/Fieldset.edit.display.js

@@ -3,6 +3,14 @@ export default [
         key: 'labelPosition',
         ignore: true
     },
+    {
+        key: 'labelWidth',
+        ignore: true
+    },
+    {
+        key: 'labelMargin',
+        ignore: true
+    },
     {
         key: 'placeholder',
         ignore: true

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';
@@ -905,7 +905,9 @@ export default class FileComponent extends Field {
     async uploadFile(fileToSync) {
         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.updateProgress.bind(this, fileToSync), fileToSync.url, fileToSync.options, fileToSync.fileKey, fileToSync.groupPermissions, fileToSync.groupResourceId, () => {
+            this.emit('fileUploadingStart');
+        }, 
         // Abort upload callback
         (abort) => this.abortUploads.push({
             id: fileToSync.id,
@@ -930,6 +932,7 @@ export default class FileComponent extends Field {
                 fileToSync.message = this.t('succefullyUploaded');
                 fileInfo.originalName = fileToSync.originalName;
                 fileInfo.hash = fileToSync.hash;
+                this.emit('fileUploadingEnd');
             }
             catch (response) {
                 fileToSync.status = 'error';
@@ -939,6 +942,7 @@ export default class FileComponent extends Field {
                     : response.type === 'abort'
                         ? this.t('Request was aborted')
                         : response.toString();
+                this.emit('fileUploadingEnd');
                 this.emit('fileUploadError', {
                     fileToSync,
                     response,

package/lib/mjs/components/file/editForm/File.edit.file.d.ts

@@ -16,6 +16,7 @@ declare const _default: ({
     components?: undefined;
     rows?: undefined;
     editor?: undefined;
+    as?: undefined;
     optionsLabelPosition?: undefined;
     inline?: undefined;
     defaultValue?: undefined;
@@ -45,6 +46,7 @@ declare const _default: ({
     components?: undefined;
     rows?: undefined;
     editor?: undefined;
+    as?: undefined;
     optionsLabelPosition?: undefined;
     inline?: undefined;
     defaultValue?: undefined;
@@ -91,6 +93,7 @@ declare const _default: ({
     data?: undefined;
     rows?: undefined;
     editor?: undefined;
+    as?: undefined;
     optionsLabelPosition?: undefined;
     inline?: undefined;
     defaultValue?: undefined;
@@ -120,6 +123,7 @@ declare const _default: ({
     components?: undefined;
     rows?: undefined;
     editor?: undefined;
+    as?: undefined;
     optionsLabelPosition?: undefined;
     inline?: undefined;
     defaultValue?: undefined;
@@ -149,6 +153,7 @@ declare const _default: ({
     components?: undefined;
     rows?: undefined;
     editor?: undefined;
+    as?: undefined;
     optionsLabelPosition?: undefined;
     inline?: undefined;
     defaultValue?: undefined;
@@ -160,6 +165,7 @@ declare const _default: ({
     tooltip: string;
     rows: number;
     editor: string;
+    as: string;
     input: boolean;
     weight: number;
     placeholder: string;
@@ -207,6 +213,7 @@ declare const _default: ({
     components?: undefined;
     rows?: undefined;
     editor?: undefined;
+    as?: undefined;
     optionsLabelPosition?: undefined;
     inline?: undefined;
     defaultValue?: undefined;
@@ -227,6 +234,7 @@ declare const _default: ({
     components?: undefined;
     rows?: undefined;
     editor?: undefined;
+    as?: undefined;
     optionsLabelPosition?: undefined;
     inline?: undefined;
     defaultValue?: undefined;
@@ -247,6 +255,7 @@ declare const _default: ({
     components?: undefined;
     rows?: undefined;
     editor?: undefined;
+    as?: undefined;
     optionsLabelPosition?: undefined;
     inline?: undefined;
     defaultValue?: undefined;
@@ -276,6 +285,7 @@ declare const _default: ({
     components?: undefined;
     rows?: undefined;
     editor?: undefined;
+    as?: undefined;
     optionsLabelPosition?: undefined;
     inline?: undefined;
     defaultValue?: undefined;
@@ -305,6 +315,7 @@ declare const _default: ({
     components?: undefined;
     rows?: undefined;
     editor?: undefined;
+    as?: undefined;
     optionsLabelPosition?: undefined;
     inline?: undefined;
     defaultValue?: undefined;
@@ -332,6 +343,7 @@ declare const _default: ({
     components?: undefined;
     rows?: undefined;
     editor?: undefined;
+    as?: undefined;
 } | {
     type: string;
     input: boolean;
@@ -353,6 +365,7 @@ declare const _default: ({
     tableView?: undefined;
     rows?: undefined;
     editor?: undefined;
+    as?: undefined;
     optionsLabelPosition?: undefined;
     inline?: undefined;
     defaultValue?: undefined;

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

@@ -115,6 +115,7 @@ export default [
         tooltip: 'Pass your custom xhr options(optional)',
         rows: 5,
         editor: 'ace',
+        as: 'json',
         input: true,
         weight: 15,
         placeholder: `{

package/lib/mjs/components/form/Form.d.ts

@@ -98,7 +98,6 @@ export default class FormComponent extends Component {
      * @returns {void}
      */
     onSetSubFormValue(submission: object | null | undefined, flags: object | null | undefined): void;
-    areAllComponentsEmpty(data: any): boolean;
     updateSubFormVisibility(): void;
     /**
      * Determines if this form is a Nested Wizard

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 {
@@ -96,6 +96,9 @@ export default class FormComponent extends Component {
         }
         return this.createSubForm();
     }
+    shouldConditionallyClearOnPristine() {
+        return !this.hasSetValue && super.shouldConditionallyClearOnPristine();
+    }
     get dataReady() {
         return this.subForm?.dataReady || this.subFormReady || Promise.resolve();
     }
@@ -109,6 +112,10 @@ export default class FormComponent extends Component {
     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();
     }
@@ -267,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) {
@@ -282,11 +292,13 @@ export default class FormComponent extends Component {
                     }
                     this.subForm.attach(element);
                     this.valueChanged = this.hasSetValue;
-                    if (!this.valueChanged && this.dataValue.state !== 'submitted') {
-                        this.setDefaultValue();
-                    }
-                    else {
-                        this.restoreValue();
+                    if (!this.shouldConditionallyClear()) {
+                        if (!this.valueChanged && this.dataValue.state !== 'submitted') {
+                            this.setDefaultValue();
+                        }
+                        else {
+                            this.restoreValue();
+                        }
                     }
                 }
                 if (!this.builderMode && this.component.modalEdit) {
@@ -399,9 +411,10 @@ 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) {
+                    if (this.subForm && !this.shouldConditionallyClear()) {
                         this.dataValue = this.subForm.getValue();
                         this.triggerChange({
                             noEmit: true
@@ -441,7 +454,7 @@ export default class FormComponent extends Component {
      */
     loadSubForm(fromAttach, beforeSubmit) {
         const loadHiddenForm = beforeSubmit && !this.component.clearOnHide;
-        if (this.builderMode || (this.conditionallyHidden && !loadHiddenForm) || (this.isSubFormLazyLoad() && !fromAttach)) {
+        if (this.builderMode || (this.conditionallyHidden() && !loadHiddenForm) || (this.isSubFormLazyLoad() && !fromAttach)) {
             return Promise.resolve();
         }
         if (this.hasLoadedForm && !this.isRevisionChanged &&
@@ -513,7 +526,7 @@ export default class FormComponent extends Component {
      * @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 || !this.component.clearOnHide);
+        return this.subFormReady && (!this.component.hasOwnProperty('reference') || this.component.reference) && !this.shouldConditionallyClear();
     }
     /**
      * Returns the data for the subform.
@@ -664,20 +677,7 @@ export default class FormComponent extends Component {
         }
     }
     isEmpty(value = this.dataValue) {
-        return value === null || _.isEqual(value, this.emptyValue) || (this.areAllComponentsEmpty(value?.data) && !value?._id);
-    }
-    areAllComponentsEmpty(data) {
-        let res = true;
-        if (this.subForm) {
-            this.subForm.everyComponent((comp) => {
-                const componentValue = _.get(data, comp.key);
-                res &= comp.isEmpty(componentValue);
-            });
-        }
-        else {
-            res = false;
-        }
-        return res;
+        return value === null || _.isEqual(value, this.emptyValue);
     }
     getValue() {
         if (this.subForm) {
@@ -692,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));
         },
     },
     {