@formio/js 5.1.0-dev.5936.81a1533 → 5.1.0-dev.5939.f5aa9d6

package/lib/cjs/Element.d.ts

@@ -170,10 +170,11 @@ export default class Element {
     /**
      * Translate a text using the i18n system.
      * @param {string|Array<string>} text - The i18n identifier.
+     * @param {any} data - contextual data object containing data, component, row, etc.
      * @param {...any} args - The arguments to pass to the i18n translation.
      * @returns {string} - The translated text.
      */
-    t(text: string | Array<string>, ...args: any[]): string;
+    t(text: string | Array<string>, data: any, ...args: any[]): string;
     /**
      * Alias to create a text node.
      * @param {string} text - The text to create.

package/lib/cjs/Element.js

@@ -8,8 +8,9 @@ const moment_1 = __importDefault(require("moment"));
 const vanilla_text_mask_1 = __importDefault(require("@formio/vanilla-text-mask"));
 const EventEmitter_1 = __importDefault(require("./EventEmitter"));
 const Formio_1 = require("./Formio");
-const i18n_1 = require("./utils/i18n");
 const utils_1 = __importDefault(require("./utils"));
+const core_1 = require("@formio/core");
+const en_1 = __importDefault(require("./translations/en"));
 /**
  * The root component for all elements within the Form.io renderer.
  */
@@ -44,7 +45,7 @@ class Element {
         if ((_a = this.options) === null || _a === void 0 ? void 0 : _a.language) {
             this.options.i18n.language = this.options.language;
         }
-        this.options.i18next = this.i18next = this.options.i18next || i18n_1.I18n.init(this.options.i18n);
+        this.options.i18next = this.i18next = this.options.i18next || core_1.I18n.init(Object.assign({ en: en_1.default }, this.options.i18n));
         /**
          * An instance of the EventEmitter class to handle the emitting and registration of events.
          * @type {EventEmitter}
@@ -392,11 +393,12 @@ class Element {
     /**
      * Translate a text using the i18n system.
      * @param {string|Array<string>} text - The i18n identifier.
+     * @param {any} data - contextual data object containing data, component, row, etc.
      * @param {...any} args - The arguments to pass to the i18n translation.
      * @returns {string} - The translated text.
      */
-    t(text, ...args) {
-        return this.i18next ? this.i18next.t(text, ...args) : text;
+    t(text, data, ...args) {
+        return this.i18next ? this.i18next.t(text, data, ...args) : text;
     }
     /**
      * Alias to create a text node.

package/lib/cjs/PDFBuilder.d.ts

@@ -51,5 +51,6 @@ export default class PDFBuilder extends WebformBuilder {
     onDropzoneDrop(e: any): boolean;
     dropEvent: any;
     onDragEnd(e: any): void;
+    repeatablePathsComps: any[] | undefined;
 }
 import WebformBuilder from './WebformBuilder';

package/lib/cjs/PDFBuilder.js

@@ -451,21 +451,21 @@ class PDFBuilder extends WebformBuilder_1.default {
         e.target.style.cursor = 'default';
     }
     highlightInvalidComponents() {
-        const repeatablePaths = this.findRepeatablePaths();
+        const repeatablePathsComps = this.findComponentsWithRepeatablePaths();
         // update elements which path was duplicated if any pathes have been changed
-        if (!lodash_1.default.isEqual(this.repeatablePaths, repeatablePaths)) {
-            (0, utils_1.eachComponent)(this.webform.getComponents(), (comp, path) => {
-                if (this.repeatablePaths.includes(path)) {
+        if (!lodash_1.default.isEqual(this.repeatablePathsComps, repeatablePathsComps)) {
+            (0, utils_1.eachComponent)(this.webform.getComponents(), (comp) => {
+                if (this.repeatablePathsComps.includes(comp.component)) {
                     this.webform.postMessage({ name: 'updateElement', data: comp.component });
                 }
             });
-            this.repeatablePaths = repeatablePaths;
+            this.repeatablePathsComps = repeatablePathsComps;
         }
-        if (!repeatablePaths.length) {
+        if (!repeatablePathsComps.length) {
             return;
         }
-        (0, utils_1.eachComponent)(this.webform.getComponents(), (comp, path) => {
-            if (this.repeatablePaths.includes(path)) {
+        (0, utils_1.eachComponent)(this.webform.getComponents(), (comp) => {
+            if (this.repeatablePathsComps.includes(comp)) {
                 this.webform.postMessage({
                     name: 'showBuilderErrors',
                     data: {

package/lib/cjs/Webform.d.ts

@@ -45,7 +45,7 @@
  * @property {number} [saveDraftThrottle] - The throttle for the save draft feature.
  * @property {boolean} [readOnly] - Set this form to readOnly.
  * @property {boolean} [noAlerts] - Disable the alerts dialog.
- * @property {{[key: string]: string}} [i18n] - The translation file for this rendering.
+ * @property {{[key: string]: string}} [enTranslation] - The translation file for this rendering.
  * @property {string} [template] - Custom logic for creation of elements.
  * @property {boolean} [noDefaults] - Exclude default values from the settings.
  * @property {any} [fileService] - The file service for this form.
@@ -586,7 +586,7 @@ export type FormOptions = {
     /**
      * - The translation file for this rendering.
      */
-    i18n?: {
+    enTranslation?: {
         [key: string]: string;
     } | undefined;
     /**

package/lib/cjs/Webform.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const lodash_1 = __importDefault(require("lodash"));
 const compare_versions_1 = require("compare-versions");
 const EventEmitter_1 = __importDefault(require("./EventEmitter"));
-const i18n_1 = __importDefault(require("./i18n"));
+const en_1 = __importDefault(require("./translations/en"));
 const Formio_1 = require("./Formio");
 const Components_1 = __importDefault(require("./components/Components"));
 const NestedDataComponent_1 = __importDefault(require("./components/_classes/nesteddata/NestedDataComponent"));
@@ -99,7 +99,7 @@ function getOptions(options) {
  * @property {number} [saveDraftThrottle] - The throttle for the save draft feature.
  * @property {boolean} [readOnly] - Set this form to readOnly.
  * @property {boolean} [noAlerts] - Disable the alerts dialog.
- * @property {{[key: string]: string}} [i18n] - The translation file for this rendering.
+ * @property {{[key: string]: string}} [enTranslation] - The translation file for this rendering.
  * @property {string} [template] - Custom logic for creation of elements.
  * @property {boolean} [noDefaults] - Exclude default values from the settings.
  * @property {any} [fileService] - The file service for this form.
@@ -369,7 +369,7 @@ class Webform extends NestedDataComponent_1.default {
      */
     addLanguage(code, lang, active = false) {
         if (this.i18next) {
-            var translations = lodash_1.default.assign((0, utils_1.fastCloneDeep)(i18n_1.default.resources.en.translation), lang);
+            var translations = lodash_1.default.assign((0, utils_1.fastCloneDeep)(en_1.default), lang);
             this.i18next.addResourceBundle(code, 'translation', translations, true, true);
             if (active) {
                 this.language = code;
@@ -1320,6 +1320,7 @@ class Webform extends NestedDataComponent_1.default {
             userAgent: navigator.userAgent,
             pathName: window.location.pathname,
             onLine: navigator.onLine,
+            language: this.language,
         });
     }
     submitForm(options = {}, local = false) {

package/lib/cjs/WebformBuilder.d.ts

@@ -78,7 +78,7 @@ export default class WebformBuilder extends Component {
     replaceDoubleQuotes(data: any, fieldsToRemoveDoubleQuotes?: any[]): any;
     updateComponent(component: any, changed: any): void;
     originalDefaultValue: any;
-    findRepeatablePaths(): any[];
+    findComponentsWithRepeatablePaths(): any[];
     highlightInvalidComponents(): void;
     /**
      * Called when a new component is saved.

package/lib/cjs/WebformBuilder.js

@@ -1125,31 +1125,50 @@ class WebformBuilder extends Component_1.default {
         // Called when we update a component.
         this.emit('updateComponent', component);
     }
-    findRepeatablePaths() {
-        const repeatablePaths = [];
+    findComponentsWithRepeatablePaths() {
+        const repeatablePaths = {};
         const keys = new Map();
         (0, utils_1.eachComponent)(this.form.components, (comp, path, components, parent, paths) => {
+            var _a, _b;
+            const isRadioCheckbox = comp.type === 'checkbox' && comp.inputType === 'radio';
             const isLayout = (0, utils_1.componentInfo)(comp).layout;
             if (!isLayout) {
                 if (keys.has(paths.dataPath)) {
-                    repeatablePaths.push(paths.dataPath);
+                    const onlyRadioCheckboxes = ((_a = repeatablePaths[paths.dataPath]) === null || _a === void 0 ? void 0 : _a.onlyRadioCheckboxes) === false ? false : isRadioCheckbox;
+                    repeatablePaths[paths.dataPath] = {
+                        comps: [...(((_b = repeatablePaths[paths.dataPath]) === null || _b === void 0 ? void 0 : _b.comps) || []), keys.get(paths.dataPath), comp],
+                        onlyRadioCheckboxes,
+                    };
                 }
                 else {
-                    keys.set(paths.dataPath, true);
+                    keys.set(paths.dataPath, comp);
                 }
             }
         }, true);
-        return repeatablePaths;
+        const componentsWithRepeatablePaths = [];
+        Object.keys(repeatablePaths).forEach((path) => {
+            const { comps, onlyRadioCheckboxes } = repeatablePaths[path];
+            if (!onlyRadioCheckboxes) {
+                componentsWithRepeatablePaths.push(...comps);
+            }
+        });
+        return componentsWithRepeatablePaths;
     }
     highlightInvalidComponents() {
-        const repeatablePaths = this.findRepeatablePaths();
+        const repeatablePathsComps = this.findComponentsWithRepeatablePaths();
         let hasInvalidComponents = false;
+        // Matches anything expect letters and  '_' at the beginning of the key and anything except of letters, numbers,
+        // '-', '.' and '_' in the rest of the key
+        const badCharacters = /^[^A-Za-z_]+|[^A-Za-z0-9\-._]+/g;
         this.webform.everyComponent((comp) => {
-            const path = comp.path;
-            if (repeatablePaths.includes(path)) {
+            if (repeatablePathsComps.includes(comp.component)) {
                 comp.setCustomValidity(this.t('apiKey', { key: comp.key }));
                 hasInvalidComponents = true;
             }
+            else if (comp.key.replace(badCharacters, '') === '') {
+                comp.setCustomValidity(this.t('apiKeyNotValid', { key: comp.key }));
+                hasInvalidComponents = true;
+            }
             else {
                 comp.setCustomValidity();
             }

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

@@ -2710,6 +2710,11 @@ class Component extends Element_1.default {
                 this.setValueAt(i, isArray && !this.isSingleInputValue() ? value[i] : value, flags);
             }
         }
+        // Also reset value of the modal component, otherwise it will keep the old value locally and the preview
+        // element won't refresh
+        if (this.componentModal && flags && flags.resetValue) {
+            this.componentModal.setValue(value);
+        }
         return changed;
     }
     /**

package/lib/cjs/components/_classes/input/Input.d.ts

@@ -25,7 +25,7 @@ export default class Input extends Multivalue {
     get suffix(): any;
     renderElement(value: any, index: any): any;
     setCounter(type: any, element: any, count: any, max: any): void;
-    updateValueAt(value: any, flags: any, index: any): void;
+    updateValueAt(value: any, flags: any, index?: number): void;
     getValueAt(index: any): any;
     updateValue(value: any, flags: any, index: any): boolean;
     parseValue(value: any): any;

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

@@ -118,7 +118,7 @@ class Input extends Multivalue_1.default {
         }
         const info = this.inputInfo;
         info.attr = info.attr || {};
-        info.attr.value = this.getValueAsString(this.formatValue(this.parseValue(value)))
+        info.attr.value = this.getValueAsString(this.formatValue(this.parseValue(this.isMultipleMasksField ? value.value : value)))
             .replace(/"/g, '"');
         const valueMask = this.component.inputMask;
         const displayMask = this.component.displayMask;
@@ -163,7 +163,7 @@ class Input extends Multivalue_1.default {
             }));
         }
     }
-    updateValueAt(value, flags, index) {
+    updateValueAt(value, flags, index = 0) {
         flags = flags || {};
         if (lodash_1.default.get(this.component, 'showWordCount', false)) {
             if (this.refs.wordcount && this.refs.wordcount[index]) {

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

@@ -664,7 +664,7 @@ class NestedComponent extends Field_1.default {
     validationProcessor({ scope, data, row, instance, paths }, flags) {
         var _a;
         const { dirty } = flags;
-        if (this.root.hasSubWizards && this.page !== this.root.page) {
+        if (this.root && this.root.hasSubWizards && this.page !== this.root.page) {
             instance = ((_a = this.componentsMap) === null || _a === void 0 ? void 0 : _a.hasOwnProperty(paths.dataPath))
                 ? this.componentsMap[paths.dataPath]
                 : this.getComponent(paths.dataPath);
@@ -800,8 +800,10 @@ class NestedComponent extends Field_1.default {
         return this.data;
     }
     resetValue() {
-        super.resetValue();
+        // Reset values of child components first, then reset the parent one, otherwise it will restore the default
+        // value of parent component and clear it one by one while resetting child components
         this.getComponents().forEach((comp) => comp.resetValue());
+        super.resetValue();
         this.setPristine(true);
     }
     get dataReady() {

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

@@ -249,7 +249,7 @@ class AddressComponent extends Container_1.default {
         if (this.manualMode) {
             this.restoreComponentsContext();
         }
-        if (changed || !lodash_1.default.isEmpty(value) && flags.fromSubmission) {
+        if (changed || !lodash_1.default.isEmpty(value) && flags.fromSubmission || flags.resetValue) {
             this.redraw();
         }
         return changed;

package/lib/cjs/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/cjs/components/editgrid/EditGrid.js

@@ -1200,14 +1200,6 @@ class EditGridComponent extends NestedArrayComponent_1.default {
             this.setNestedValue(component, editRow.data, flags);
         });
     }
-    emptyRows() {
-        this.editRows.forEach((editRow, index) => this.destroyComponents(false, index));
-        this.editRows = [];
-    }
-    resetValue() {
-        super.resetValue();
-        this.emptyRows();
-    }
 }
 exports.default = EditGridComponent;
 EditGridComponent.prototype.hasChanged = Component_1.default.prototype.hasChanged;

package/lib/cjs/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/cjs/components/radio/Radio.js

@@ -6,8 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const lodash_1 = __importDefault(require("lodash"));
 const ListComponent_1 = __importDefault(require("../_classes/list/ListComponent"));
 const Formio_1 = require("../../Formio");
-const utils_1 = require("../../utils/utils");
-const uuid_1 = require("uuid");
+const utils_1 = require("../../utils");
 class RadioComponent extends ListComponent_1.default {
     static schema(...extend) {
         return ListComponent_1.default.schema({
@@ -80,13 +79,15 @@ class RadioComponent extends ListComponent_1.default {
         }
         return defaultValue;
     }
-    resetValue() {
+    uncheckValue(flags = {}) {
         this.unset();
         this.setValue(this.emptyValue, {
             noUpdateEvent: true,
             noValidate: true,
             resetValue: true
         });
+        this.triggerChange(flags);
+        this.setSelectedClasses();
     }
     get inputInfo() {
         var _a;
@@ -143,7 +144,6 @@ class RadioComponent extends ListComponent_1.default {
         });
         this.optionsLoaded = !this.component.dataSrc || this.component.dataSrc === 'values';
         this.loadedOptions = [];
-        this.valuesMap = new Map();
         if (!this.visible) {
             this.itemsLoadedResolve();
         }
@@ -155,6 +155,12 @@ class RadioComponent extends ListComponent_1.default {
             this.dataReady.then(() => res(true));
         });
     }
+    convertValues(values) {
+        if (this.options.renderMode === 'html' && this.type === 'radio') {
+            return values.map(x => (Object.assign(Object.assign({}, x), { value: this.convertByDataType(x.value) })));
+        }
+        return values;
+    }
     render() {
         if (!this.optionsLoaded) {
             return super.render(this.renderTemplate('loader'));
@@ -162,7 +168,7 @@ class RadioComponent extends ListComponent_1.default {
         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 @@ class RadioComponent extends ListComponent_1.default {
                 if (!lodash_1.default.isString(this.dataValue)) {
                     dataValue = lodash_1.default.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 = lodash_1.default.isEqual(this.normalizeValue(optionValue), this.dataValue);
+                if (this.isSelectURL && lodash_1.default.isObject(this.loadedOptions[index].value)) {
+                    const optionValue = this.component.dataType === 'string' ? JSON.stringify(this.loadedOptions[index].value) : this.loadedOptions[index].value;
+                    input.checked = lodash_1.default.isEqual(optionValue, this.dataValue);
                 }
                 else {
                     input.checked = (dataValue === input.value && (input.value || this.component.dataSrc !== 'url'));
@@ -225,14 +228,9 @@ class RadioComponent extends ListComponent_1.default {
         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 && lodash_1.default.isObject(this.loadedOptions[index].value)) ?
+                    this.loadedOptions[index].value :
+                    input.value;
             }
         });
         return value;
@@ -276,8 +274,8 @@ class RadioComponent extends ListComponent_1.default {
     }
     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 = lodash_1.default.isEqual(inputValue, value);
+            const inputValue = this.refs.input[index].value;
+            this.refs.input[index].checked = (inputValue === value.toString());
         }
     }
     get shouldLoad() {
@@ -287,23 +285,6 @@ class RadioComponent extends ListComponent_1.default {
         }
         return super.shouldLoad;
     }
-    prepareValue(item, options = {}) {
-        const value = this.component.valueProperty && !options.skipValueProperty
-            ? lodash_1.default.get(item, this.component.valueProperty)
-            : item;
-        if (this.component.type === 'radio' && typeof value !== 'string') {
-            const uuid = (0, uuid_1.v4)();
-            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 @@ class RadioComponent extends ListComponent_1.default {
                 label: this.itemTemplate(item)
             };
             if (lodash_1.default.isEqual(item, this.selectData || lodash_1.default.pick(this.dataValue, lodash_1.default.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 @@ class RadioComponent extends ListComponent_1.default {
         const listData = [];
         items === null || items === void 0 ? void 0 : items.forEach((item, i) => {
             const valueAtProperty = lodash_1.default.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 && (lodash_1.default.isObject(value) || lodash_1.default.isBoolean(value) || lodash_1.default.isUndefined(value))) {
                 this.loadedOptions[i].invalid = true;
             }
@@ -395,11 +373,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 = (value === undefined || value === null)
-                    ? false
-                    : (input.type === 'checkbox')
-                        ? value[input.value] || input.checked
-                        : lodash_1.default.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,26 +387,10 @@ class RadioComponent extends ListComponent_1.default {
             });
         }
     }
-    setMetadata(value) {
-        var _a;
-        let key = value;
-        if (typeof value !== 'string') {
-            const checkedInput = Array.prototype.find.call((_a = this.refs.input) !== null && _a !== void 0 ? _a : [], (input => input.type === 'radio' && input.getAttribute('checked')));
-            key = (checkedInput === null || checkedInput === void 0 ? void 0 : checkedInput.value) || key;
-        }
-        if (this.isSelectURL && this.templateData && this.templateData[key]) {
-            const submission = this.root.submission;
-            if (!submission.metadata.selectData) {
-                submission.metadata.selectData = {};
-            }
-            lodash_1.default.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) {
@@ -444,9 +402,7 @@ class RadioComponent extends ListComponent_1.default {
         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;
@@ -456,7 +412,7 @@ class RadioComponent extends ListComponent_1.default {
      * @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;
@@ -488,10 +444,18 @@ class RadioComponent extends ListComponent_1.default {
                 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 = {};
+            }
+            lodash_1.default.set(submission.metadata.selectData, this.path, this.templateData[valueConverted]);
+        }
+        return super.normalizeValue(valueConverted);
     }
 }
 exports.default = RadioComponent;

package/lib/cjs/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/cjs/components/select/Select.js

@@ -355,6 +355,18 @@ class SelectComponent extends ListComponent_1.default {
         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) {
         var _a, _b;
@@ -441,7 +453,7 @@ class SelectComponent extends ListComponent_1.default {
             this.addOption(itemValueAndLabel.value, itemValueAndLabel.label, {}, lodash_1.default.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.
@@ -903,8 +915,9 @@ class SelectComponent extends ListComponent_1.default {
             });
         }
         // 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();
@@ -1219,7 +1232,7 @@ class SelectComponent extends ListComponent_1.default {
             }
             lodash_1.default.set(submission.metadata.selectData, this.path, templateData);
         }
-        if (flags.resetValue && ((_b = this.root) === null || _b === void 0 ? void 0 : _b.submission) && !this.options.readOnly) {
+        if (flags.resetValue && !flags.fromSubmission && ((_b = this.root) === null || _b === void 0 ? void 0 : _b.submission) && !this.options.readOnly) {
             const submission = this.root.submission;
             if (!submission.metadata) {
                 submission.metadata = {};
@@ -1283,6 +1296,9 @@ class SelectComponent extends ListComponent_1.default {
             this.lazyLoadInit = true;
             const searchProperty = this.component.searchField || this.component.valueProperty;
             this.triggerUpdate(lodash_1.default.get(value.data || value, searchProperty, value), true);
+            this.itemsLoaded.then(() => {
+                this.setChoicesValue(value, hasPreviousValue, flags);
+            });
             return changed;
         }
         // Add the value options.