@formio/js 5.1.0-dev.5936.fa0f253 → 5.1.0-dev.5939.f5aa9d6

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

@@ -1,7 +1,7 @@
 import _ from 'lodash';
-import moment from 'moment';
+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) {
@@ -147,8 +147,8 @@ export default class DateTimeComponent extends Input {
     get emptyValue() {
         return '';
     }
-    get momentFormat() {
-        return FormioUtils.convertFormatToMoment(this.component.format);
+    get dayjsFormat() {
+        return FormioUtils.convertFormatToDayjs(this.component.format);
     }
     isEmpty(value = this.dataValue) {
         if (value && (value.toString() === 'Invalid Date')) {
@@ -157,12 +157,14 @@ export default class DateTimeComponent extends Input {
         return super.isEmpty(value);
     }
     formatValue(input) {
-        const result = moment.utc(input).toISOString();
-        return result === 'Invalid date' ? input : result;
+        if (dayjs(input).isValid()) {
+            return dayjs.utc(input).toISOString();
+        }
+        return input;
     }
     isEqual(valueA, valueB = this.dataValue) {
         return (this.isEmpty(valueA) && this.isEmpty(valueB))
-            || moment.utc(valueA).format(this.momentFormat) === moment.utc(valueB).format(this.momentFormat);
+            || dayjs.utc(valueA).format(this.dayjsFormat) === dayjs.utc(valueB).format(this.dayjsFormat);
     }
     createWrapper() {
         return false;
@@ -178,18 +180,18 @@ export default class DateTimeComponent extends Input {
         return super.checkValidity(data, dirty, rowData);
     }
     getValueAsString(value, options) {
-        let format = FormioUtils.convertFormatToMoment(this.component.format);
-        format += format.match(/z$/) ? '' : ' z';
+        let format = FormioUtils.convertFormatToDayjs(this.component.format);
         const timezone = this.timezone;
         if (value && !this.attached && timezone) {
+            format += format.match(/z$/) ? '' : ' z';
             if (Array.isArray(value) && this.component.multiple) {
-                return value.map(item => _.trim(FormioUtils.momentDate(item, format, timezone, options).format(format))).join(', ');
+                return value.map(item => _.trim(FormioUtils.dayjsDate(item, format, timezone, options).format(format))).join(', ');
             }
-            return _.trim(FormioUtils.momentDate(value, format, timezone, options).format(format));
+            return _.trim(FormioUtils.dayjsDate(value, format, timezone, options).format(format));
         }
         if (Array.isArray(value) && this.component.multiple) {
-            return value.map(item => _.trim(moment(item).format(format))).join(', ');
+            return value.map(item => _.trim(dayjs(item).format(format))).join(', ');
         }
-        return (value ? _.trim(moment(value).format(format)) : value) || '';
+        return (value ? _.trim(dayjs(value).format(format)) : value) || '';
     }
 }

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.d.ts

@@ -101,7 +101,6 @@ export default class EditGridComponent extends NestedArrayComponent {
     changeState(changed: any, flags: any): void;
     openWhenEmpty(): void;
     restoreRowContext(editRow: any, flags?: {}): void;
-    emptyRows(): void;
     hasChanged: (newValue: any, oldValue: any) => boolean;
 }
 import NestedArrayComponent from '../_classes/nestedarray/NestedArrayComponent';

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',
@@ -1192,13 +1192,5 @@ export default class EditGridComponent extends NestedArrayComponent {
             this.setNestedValue(component, editRow.data, flags);
         });
     }
-    emptyRows() {
-        this.editRows.forEach((editRow, index) => this.destroyComponents(false, index));
-        this.editRows = [];
-    }
-    resetValue() {
-        super.resetValue();
-        this.emptyRows();
-    }
 }
 EditGridComponent.prototype.hasChanged = Component.prototype.hasChanged;

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';

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.d.ts

@@ -16,6 +16,7 @@ export default class RadioComponent extends ListComponent {
     static savedValueTypes(schema: any): any[];
     constructor(component: any, options: any, data: any);
     previousValue: any;
+    uncheckValue(flags?: {}): void;
     get inputInfo(): any;
     get emptyValue(): string;
     get isRadio(): boolean;
@@ -27,8 +28,8 @@ export default class RadioComponent extends ListComponent {
     itemsLoadedResolve: ((value: any) => void) | undefined;
     optionsLoaded: boolean | undefined;
     loadedOptions: any[] | undefined;
-    valuesMap: Map<any, any> | undefined;
     beforeSubmit(): Promise<any>;
+    convertValues(values: any): any;
     render(): string;
     attach(element: any): Promise<void>;
     detach(element: any): void;
@@ -36,14 +37,18 @@ export default class RadioComponent extends ListComponent {
     validateValueAvailability(setting: any, value: any): boolean;
     getValueAsString(value: any, options?: {}): any;
     setValueAt(index: any, value: any): void;
-    prepareValue(item: any, options?: {}): any;
-    getValueByInput(input: any): any;
     loadItems(url: any, search: any, headers: any, options: any, method: any, body: any): void;
     loadItemsFromMetadata(): void;
     setItems(items: any): void;
     setSelectedClasses(): void;
-    setMetadata(value: any): void;
     updateValue(value: any, flags: any): boolean;
     currentValue: any;
+    /**
+     * Normalize values coming into updateValue. For example, depending on the configuration, string value `"true"` will be normalized to boolean `true`.
+     * @param {*} value - The value to normalize
+     * @returns {*} - Returns the normalized value
+     */
+    convertByDataType(value: any): any;
+    normalizeValue(value: any): any;
 }
 import ListComponent from '../_classes/list/ListComponent';

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

@@ -1,8 +1,7 @@
 import _ from 'lodash';
 import ListComponent from '../_classes/list/ListComponent';
 import { Formio } from '../../Formio';
-import { boolValue, componentValueTypes, getComponentSavedTypes } from '../../utils/utils';
-import { v4 as uuidv4 } from 'uuid';
+import { boolValue, componentValueTypes, getComponentSavedTypes } from '../../utils';
 export default class RadioComponent extends ListComponent {
     static schema(...extend) {
         return ListComponent.schema({
@@ -81,13 +80,15 @@ export default class RadioComponent extends ListComponent {
         }
         return defaultValue;
     }
-    resetValue() {
+    uncheckValue(flags = {}) {
         this.unset();
         this.setValue(this.emptyValue, {
             noUpdateEvent: true,
             noValidate: true,
             resetValue: true
         });
+        this.triggerChange(flags);
+        this.setSelectedClasses();
     }
     get inputInfo() {
         const info = super.elementInfo();
@@ -143,7 +144,6 @@ export default class RadioComponent extends ListComponent {
         });
         this.optionsLoaded = !this.component.dataSrc || this.component.dataSrc === 'values';
         this.loadedOptions = [];
-        this.valuesMap = new Map();
         if (!this.visible) {
             this.itemsLoadedResolve();
         }
@@ -155,6 +155,12 @@ export default class RadioComponent extends ListComponent {
             this.dataReady.then(() => res(true));
         });
     }
+    convertValues(values) {
+        if (this.options.renderMode === 'html' && this.type === 'radio') {
+            return values.map(x => ({ ...x, value: this.convertByDataType(x.value) }));
+        }
+        return values;
+    }
     render() {
         if (!this.optionsLoaded) {
             return super.render(this.renderTemplate('loader'));
@@ -162,7 +168,7 @@ export default class RadioComponent extends ListComponent {
         return super.render(this.renderTemplate('radio', {
             input: this.inputInfo,
             inline: this.component.inline,
-            values: this.component.dataSrc === 'values' ? this.component.values : this.loadedOptions,
+            values: this.component.dataSrc === 'values' ? this.convertValues(this.component.values) : this.loadedOptions,
             value: this.dataValue,
             row: this.row,
         }));
@@ -183,12 +189,9 @@ export default class RadioComponent extends ListComponent {
                 if (!_.isString(this.dataValue)) {
                     dataValue = _.toString(this.dataValue);
                 }
-                if (this.isSelectURL) {
-                    const valueKey = this.loadedOptions[index].value;
-                    const optionValue = this.valuesMap.has(valueKey)
-                        ? this.valuesMap.get(valueKey)
-                        : valueKey;
-                    input.checked = _.isEqual(this.normalizeValue(optionValue), this.dataValue);
+                if (this.isSelectURL && _.isObject(this.loadedOptions[index].value)) {
+                    const optionValue = this.component.dataType === 'string' ? JSON.stringify(this.loadedOptions[index].value) : this.loadedOptions[index].value;
+                    input.checked = _.isEqual(optionValue, this.dataValue);
                 }
                 else {
                     input.checked = (dataValue === input.value && (input.value || this.component.dataSrc !== 'url'));
@@ -225,14 +228,9 @@ export default class RadioComponent extends ListComponent {
         let value = this.component.inputType === 'checkbox' ? '' : this.dataValue;
         this.refs.input.forEach((input, index) => {
             if (input.checked) {
-                if (!this.isSelectURL) {
-                    value = input.value;
-                    return;
-                }
-                const optionValue = this.loadedOptions[index].value;
-                value = this.valuesMap.has(optionValue)
-                    ? this.valuesMap.get(optionValue)
-                    : optionValue;
+                value = (this.isSelectURL && _.isObject(this.loadedOptions[index].value)) ?
+                    this.loadedOptions[index].value :
+                    input.value;
             }
         });
         return value;
@@ -276,8 +274,8 @@ export default class RadioComponent extends ListComponent {
     }
     setValueAt(index, value) {
         if (this.refs.input && this.refs.input[index] && value !== null && value !== undefined) {
-            const inputValue = this.getValueByInput(this.refs.input[index]);
-            this.refs.input[index].checked = _.isEqual(inputValue, value);
+            const inputValue = this.refs.input[index].value;
+            this.refs.input[index].checked = (inputValue === value.toString());
         }
     }
     get shouldLoad() {
@@ -287,23 +285,6 @@ export default class RadioComponent extends ListComponent {
         }
         return super.shouldLoad;
     }
-    prepareValue(item, options = {}) {
-        const value = this.component.valueProperty && !options.skipValueProperty
-            ? _.get(item, this.component.valueProperty)
-            : item;
-        if (this.component.type === 'radio' && typeof value !== 'string') {
-            const uuid = uuidv4();
-            this.valuesMap.set(uuid, value);
-            return uuid;
-        }
-        return value;
-    }
-    getValueByInput(input) {
-        const inputValue = input.value;
-        return this.valuesMap.has(inputValue)
-            ? this.valuesMap.get(inputValue)
-            : inputValue;
-    }
     loadItems(url, search, headers, options, method, body) {
         if (this.optionsLoaded) {
             this.itemsLoadedResolve();
@@ -354,7 +335,7 @@ export default class RadioComponent extends ListComponent {
                 label: this.itemTemplate(item)
             };
             if (_.isEqual(item, this.selectData || _.pick(this.dataValue, _.keys(item)))) {
-                this.loadedOptions[i].value = this.prepareValue(this.dataValue, { skipValueProperty: true });
+                this.loadedOptions[i].value = this.dataValue;
             }
         });
         this.optionsLoaded = true;
@@ -364,15 +345,12 @@ export default class RadioComponent extends ListComponent {
         const listData = [];
         items?.forEach((item, i) => {
             const valueAtProperty = _.get(item, this.component.valueProperty);
-            const value = this.prepareValue(item);
-            const label = this.component.valueProperty
-                ? this.itemTemplate(item, valueAtProperty, i)
-                : this.itemTemplate(item, item, i);
-            this.loadedOptions[i] = { label, value };
-            listData.push(this.templateData[i]);
-            if (this.valuesMap.has(value)) {
-                this.templateData[value] = this.templateData[i];
-            }
+            this.loadedOptions[i] = {
+                value: this.component.valueProperty ? valueAtProperty : item,
+                label: this.component.valueProperty ? this.itemTemplate(item, valueAtProperty) : this.itemTemplate(item, item, i)
+            };
+            listData.push(this.templateData[this.component.valueProperty ? valueAtProperty : i]);
+            const value = this.loadedOptions[i].value;
             if (!this.isRadio && (_.isObject(value) || _.isBoolean(value) || _.isUndefined(value))) {
                 this.loadedOptions[i].invalid = true;
             }
@@ -395,11 +373,7 @@ export default class RadioComponent extends ListComponent {
             const value = this.dataValue;
             this.refs.wrapper.forEach((wrapper, index) => {
                 const input = this.refs.input[index];
-                const checked = (value === undefined || value === null)
-                    ? false
-                    : (input.type === 'checkbox')
-                        ? value[input.value] || input.checked
-                        : _.isEqual(this.normalizeValue(this.getValueByInput(input)), value);
+                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);
@@ -413,25 +387,10 @@ export default class RadioComponent extends ListComponent {
             });
         }
     }
-    setMetadata(value) {
-        let key = value;
-        if (typeof value !== 'string') {
-            const checkedInput = Array.prototype.find.call(this.refs.input ?? [], (input => input.type === 'radio' && input.getAttribute('checked')));
-            key = checkedInput?.value || key;
-        }
-        if (this.isSelectURL && this.templateData && this.templateData[key]) {
-            const submission = this.root.submission;
-            if (!submission.metadata.selectData) {
-                submission.metadata.selectData = {};
-            }
-            _.set(submission.metadata.selectData, this.path, this.templateData[key]);
-        }
-    }
     updateValue(value, flags) {
         const changed = super.updateValue(value, flags);
         if (changed) {
             this.setSelectedClasses();
-            this.setMetadata(this.dataValue);
         }
         if (!flags || !flags.modified || !this.isRadio) {
             if (changed) {
@@ -443,9 +402,7 @@ export default class RadioComponent extends ListComponent {
         this.currentValue = this.dataValue;
         const shouldResetValue = flags && flags.modified && !flags.noUpdateEvent && this.previousValue === this.currentValue;
         if (shouldResetValue) {
-            this.resetValue();
-            this.triggerChange(flags);
-            this.setSelectedClasses();
+            this.uncheckValue(flags);
         }
         this.previousValue = this.dataValue;
         return changed;
@@ -455,7 +412,7 @@ export default class RadioComponent extends ListComponent {
      * @param {*} value - The value to normalize
      * @returns {*} - Returns the normalized value
      */
-    normalizeValue(value) {
+    convertByDataType(value) {
         const dataType = this.component.dataType || 'auto';
         if (value === this.emptyValue) {
             return value;
@@ -487,9 +444,17 @@ export default class RadioComponent extends ListComponent {
                 value = !(!value || value.toString() === 'false');
                 break;
         }
-        return super.normalizeValue(value);
+        return value;
     }
-    isSingleInputValue() {
-        return true;
+    normalizeValue(value) {
+        const valueConverted = this.convertByDataType(value);
+        if (this.isSelectURL && this.templateData && this.templateData[valueConverted]) {
+            const submission = this.root.submission;
+            if (!submission.metadata.selectData) {
+                submission.metadata.selectData = {};
+            }
+            _.set(submission.metadata.selectData, this.path, this.templateData[valueConverted]);
+        }
+        return super.normalizeValue(valueConverted);
     }
 }

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.d.ts

@@ -89,6 +89,7 @@ export default class SelectComponent extends ListComponent {
     disableInfiniteScroll(): void;
     set serverCount(value: any);
     get serverCount(): any;
+    shouldResetChoicesItems(items: any): boolean;
     setItems(items: any, fromSearch: any): void;
     selectItems: any;
     set downloadedResources(value: any);

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) {
@@ -359,6 +359,18 @@ export default class SelectComponent extends ListComponent {
         this.downloadedResources.serverCount = this.downloadedResources.length;
         this.serverCount = this.downloadedResources.length;
     }
+    shouldResetChoicesItems(items) {
+        if (this.choices._store.choices.length !== items.length) {
+            return true;
+        }
+        for (let item of items) {
+            const choicesItem = this.choices._store.choices.find((i) => i.label === item.label);
+            if (!choicesItem) {
+                return true;
+            }
+        }
+        return false;
+    }
     /* eslint-disable max-statements */
     setItems(items, fromSearch) {
         this.selectItems = items;
@@ -444,7 +456,7 @@ export default class SelectComponent extends ListComponent {
             this.addOption(itemValueAndLabel.value, itemValueAndLabel.label, {}, _.get(item, this.component.idPath, String(index)));
         });
         if (this.choices) {
-            this.choices.setChoices(this.selectOptions, 'value', 'label', true);
+            this.choices.setChoices(this.selectOptions, 'value', 'label', true, true, !fromSearch && this.shouldResetChoicesItems(this.selectOptions));
         }
         else if (this.loading) {
             // Re-attach select input.
@@ -935,8 +947,9 @@ export default class SelectComponent extends ListComponent {
             });
         }
         // Add value options.
+        const value = this.undoValueTyping(this.dataValue);
         this.addValueOptions();
-        this.setChoicesValue(this.dataValue);
+        this.setChoicesValue(value);
         if (this.isSelectResource && this.refs.addResource) {
             this.addEventListener(this.refs.addResource, 'click', (event) => {
                 event.preventDefault();
@@ -1248,7 +1261,7 @@ export default class SelectComponent extends ListComponent {
             }
             _.set(submission.metadata.selectData, this.path, templateData);
         }
-        if (flags.resetValue && this.root?.submission && !this.options.readOnly) {
+        if (flags.resetValue && !flags.fromSubmission && this.root?.submission && !this.options.readOnly) {
             const submission = this.root.submission;
             if (!submission.metadata) {
                 submission.metadata = {};
@@ -1312,6 +1325,9 @@ export default class SelectComponent extends ListComponent {
             this.lazyLoadInit = true;
             const searchProperty = this.component.searchField || this.component.valueProperty;
             this.triggerUpdate(_.get(value.data || value, searchProperty, value), true);
+            this.itemsLoaded.then(() => {
+                this.setChoicesValue(value, hasPreviousValue, flags);
+            });
             return changed;
         }
         // Add the value options.

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.d.ts

@@ -8,6 +8,12 @@ export default class SelectBoxesComponent extends RadioComponent {
      * @returns {boolean} - If the value is empty.
      */
     isEmpty(value?: any): boolean;
+    /**
+     * Normalize values coming into updateValue.
+     * @param {any} value - The value to normalize.
+     * @returns {*} - The normalized value
+     */
+    normalizeValue(value: any): any;
     setInputsDisabled(value: any, onlyUnchecked: any): void;
     checkComponentValidity(data: any, dirty: any, rowData: any, options: any, errors?: any[]): boolean;
 }

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) {

package/lib/mjs/components/signature/Signature.js

@@ -1,7 +1,7 @@
 import SignaturePad from 'signature_pad';
 import Input from '../_classes/input/Input';
 import _ from 'lodash';
-import { componentValueTypes, getComponentSavedTypes } from '../../utils/utils';
+import { componentValueTypes, getComponentSavedTypes } from '../../utils';
 export default class SignatureComponent extends Input {
     static schema(...extend) {
         return Input.schema({

package/lib/mjs/components/survey/Survey.js

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

package/lib/mjs/components/tags/Tags.js

@@ -1,4 +1,4 @@
-import { componentValueTypes, getComponentSavedTypes } from '../../utils/utils';
+import { componentValueTypes, getComponentSavedTypes } from '../../utils';
 import Input from '../_classes/input/Input';
 import Choices from 'choices.js';
 export default class TagsComponent extends Input {

package/lib/mjs/components/textarea/TextArea.js

@@ -1,7 +1,7 @@
 /* global Quill */
 import TextFieldComponent from '../textfield/TextField';
 import _ from 'lodash';
-import { uniqueName, getBrowserInfo } from '../../utils/utils';
+import { uniqueName, getBrowserInfo } from '../../utils';
 export default class TextAreaComponent extends TextFieldComponent {
     static schema(...extend) {
         return TextFieldComponent.schema({
@@ -58,8 +58,8 @@ export default class TextAreaComponent extends TextFieldComponent {
         if ((this.options.readOnly || this.disabled) && !this.isHtmlRenderMode()) {
             const elementStyle = this.info.attr.style || '';
             const children = `
-        <div ${this._referenceAttributeName}="input" 
-          class="formio-editor-read-only-content" 
+        <div ${this._referenceAttributeName}="input"
+          class="formio-editor-read-only-content"
           ${elementStyle ? `style='${elementStyle}'` : ''}
           role="textbox"
           aria-multiline="true"