@formio/js 5.0.0-dev.5933.606556f → 5.0.0-dev.5936.905c79f

package/lib/cjs/WebformBuilder.js

@@ -1085,6 +1085,12 @@ class WebformBuilder extends Component_1.default {
                     parentComponent.tabs[tabIndex].splice(index, 1, newComp);
                     newComp.checkValidity = () => true;
                     newComp.build(defaultValueComponent.element);
+                    if (this.preview && !this.preview.defaultChanged) {
+                        const defaultValue = lodash_1.default.get(this.preview._data, this.editForm._data.key);
+                        if (lodash_1.default.isObject(defaultValue) && !lodash_1.default.isArray(defaultValue)) {
+                            this.editForm._data.defaultValue = defaultValue;
+                        }
+                    }
                 }
             }
             else {
@@ -1095,6 +1101,7 @@ class WebformBuilder extends Component_1.default {
                     path.unshift(component.key);
                     dataPath = (0, utils_1.getStringFromComponentPath)(path);
                 }
+                this.preview.defaultChanged = true;
                 lodash_1.default.set(this.preview._data, dataPath, changed.value);
                 lodash_1.default.set(this.webform._data, dataPath, changed.value);
             }

package/lib/cjs/Wizard.js

@@ -602,7 +602,10 @@ class Wizard extends Webform_1.default {
             }
             this.redraw().then(() => {
                 this.checkData(this.submission.data);
-                this.validateCurrentPage();
+                const errors = this.submitted ? this.validate(this.localData, { dirty: true }) : this.validateCurrentPage();
+                if (this.alert) {
+                    this.showErrors(errors, true, true);
+                }
             });
             return Promise.resolve();
         }
@@ -699,9 +702,11 @@ class Wizard extends Webform_1.default {
                 });
             });
         }
-        // Validate the form, before go to the next page
-        const errors = this.validateCurrentPage({ dirty: true });
-        if (errors.length === 0) {
+        // Validate the form before going to the next page
+        const currentPageErrors = this.validateCurrentPage({ dirty: true });
+        const errors = this.submitted ? this.validate(this.localData, { dirty: true }) : currentPageErrors;
+        // allow going to the next page if the current page is valid, even if there are form level errors
+        if (currentPageErrors.length === 0) {
             this.checkData(this.submission.data);
             return this.beforePage(true).then(() => {
                 return this.setPage(this.getNextPage()).then(() => {
@@ -716,7 +721,7 @@ class Wizard extends Webform_1.default {
         else {
             this.currentPage.components.forEach((comp) => comp.setPristine(false));
             this.scrollIntoView(this.element, true);
-            return Promise.reject(super.showErrors(errors, true));
+            return Promise.reject(this.showErrors(errors, true));
         }
     }
     validateCurrentPage(flags = {}) {
@@ -921,10 +926,7 @@ class Wizard extends Webform_1.default {
         return components.reduce((check, comp) => comp.checkValidity(data, dirty, row, currentPageOnly, childErrors) && check, true);
     }
     get errors() {
-        if (!this.isLastPage()) {
-            return this.currentPage.errors;
-        }
-        return super.errors;
+        return !this.isLastPage() && !this.submitted ? this.currentPage.errors : super.errors;
     }
     focusOnComponent(key) {
         const component = this.getComponent(key);

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

@@ -413,7 +413,6 @@ class DataGridComponent extends NestedArrayComponent_1.default {
         });
         this.checkConditions();
         this.triggerChange();
-        this.triggerChange({ modified: true });
         this.redraw().then(() => {
             this.focusOnNewRowElement(this.rows[index]);
         });
@@ -493,9 +492,6 @@ class DataGridComponent extends NestedArrayComponent_1.default {
             const options = lodash_1.default.clone(this.options);
             options.name += `[${rowIndex}]`;
             options.row = `${rowIndex}-${colIndex}`;
-            options.onChange = (flags, changed, modified) => {
-                this.triggerChange({ modified });
-            };
             let columnComponent;
             if (this.builderMode) {
                 col.id = col.id + rowIndex;

package/lib/cjs/components/radio/Radio.d.ts

@@ -27,6 +27,7 @@ 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>;
     render(): import("../_classes/field/Field").default;
     attach(element: any): Promise<void>;
@@ -35,10 +36,13 @@ 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;
 }

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

@@ -7,6 +7,7 @@ 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");
 class RadioComponent extends ListComponent_1.default {
     static schema(...extend) {
         return ListComponent_1.default.schema({
@@ -142,6 +143,7 @@ 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();
         }
@@ -181,9 +183,12 @@ class RadioComponent extends ListComponent_1.default {
                 if (!lodash_1.default.isString(this.dataValue)) {
                     dataValue = lodash_1.default.toString(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);
+                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);
                 }
                 else {
                     input.checked = (dataValue === input.value && (input.value || this.component.dataSrc !== 'url'));
@@ -220,9 +225,14 @@ class RadioComponent extends ListComponent_1.default {
         let value = this.component.inputType === 'checkbox' ? '' : this.dataValue;
         this.refs.input.forEach((input, index) => {
             if (input.checked) {
-                value = (this.isSelectURL && lodash_1.default.isObject(this.loadedOptions[index].value)) ?
-                    this.loadedOptions[index].value :
-                    input.value;
+                if (!this.isSelectURL) {
+                    value = input.value;
+                    return;
+                }
+                const optionValue = this.loadedOptions[index].value;
+                value = this.valuesMap.has(optionValue)
+                    ? this.valuesMap.get(optionValue)
+                    : optionValue;
             }
         });
         return value;
@@ -266,8 +276,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.refs.input[index].value;
-            this.refs.input[index].checked = (inputValue === value.toString());
+            const inputValue = this.getValueByInput(this.refs.input[index]);
+            this.refs.input[index].checked = lodash_1.default.isEqual(inputValue, value);
         }
     }
     get shouldLoad() {
@@ -277,6 +287,23 @@ 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();
@@ -327,7 +354,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.dataValue;
+                this.loadedOptions[i].value = this.prepareValue(this.dataValue, { skipValueProperty: true });
             }
         });
         this.optionsLoaded = true;
@@ -337,12 +364,15 @@ 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);
-            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;
+            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];
+            }
             if (!this.isRadio && (lodash_1.default.isObject(value) || lodash_1.default.isBoolean(value) || lodash_1.default.isUndefined(value))) {
                 this.loadedOptions[i].invalid = true;
             }
@@ -365,7 +395,9 @@ class RadioComponent extends ListComponent_1.default {
             const value = this.dataValue;
             this.refs.wrapper.forEach((wrapper, index) => {
                 const input = this.refs.input[index];
-                const checked = (input.type === 'checkbox') ? value[input.value] || input.checked : (input.value.toString() === value.toString());
+                const checked = (input.type === 'checkbox')
+                    ? value[input.value] || input.checked
+                    : lodash_1.default.isEqual(this.normalizeValue(this.getValueByInput(input)), value);
                 if (checked) {
                     //add class to container when selected
                     this.addClass(wrapper, this.optionSelectedClass);
@@ -379,10 +411,25 @@ class RadioComponent extends ListComponent_1.default {
             });
         }
     }
+    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 === 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) {
@@ -438,14 +485,10 @@ class RadioComponent extends ListComponent_1.default {
                 value = !(!value || value.toString() === 'false');
                 break;
         }
-        if (this.isSelectURL && this.templateData && this.templateData[value]) {
-            const submission = this.root.submission;
-            if (!submission.metadata.selectData) {
-                submission.metadata.selectData = {};
-            }
-            lodash_1.default.set(submission.metadata.selectData, this.path, this.templateData[value]);
-        }
         return super.normalizeValue(value);
     }
+    isSingleInputValue() {
+        return true;
+    }
 }
 exports.default = RadioComponent;

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

@@ -139,6 +139,14 @@ class SelectBoxesComponent extends Radio_1.default {
             checkedValues.forEach((value) => selectData.push(this.templateData[value]));
             lodash_1.default.set(submission.metadata.selectData, this.path, selectData);
         }
+        // Ensure that for dataSrc == 'values' that there are not any other superfluous values.
+        if (this.component.dataSrc === 'values') {
+            for (const key in value) {
+                if (!this.component.values.find((val) => val.value === key)) {
+                    delete value[key];
+                }
+            }
+        }
         return value;
     }
     /**

package/lib/mjs/WebformBuilder.js

@@ -1069,6 +1069,12 @@ export default class WebformBuilder extends Component {
                     parentComponent.tabs[tabIndex].splice(index, 1, newComp);
                     newComp.checkValidity = () => true;
                     newComp.build(defaultValueComponent.element);
+                    if (this.preview && !this.preview.defaultChanged) {
+                        const defaultValue = _.get(this.preview._data, this.editForm._data.key);
+                        if (_.isObject(defaultValue) && !_.isArray(defaultValue)) {
+                            this.editForm._data.defaultValue = defaultValue;
+                        }
+                    }
                 }
             }
             else {
@@ -1079,6 +1085,7 @@ export default class WebformBuilder extends Component {
                     path.unshift(component.key);
                     dataPath = getStringFromComponentPath(path);
                 }
+                this.preview.defaultChanged = true;
                 _.set(this.preview._data, dataPath, changed.value);
                 _.set(this.webform._data, dataPath, changed.value);
             }

package/lib/mjs/Wizard.js

@@ -594,7 +594,10 @@ export default class Wizard extends Webform {
             }
             this.redraw().then(() => {
                 this.checkData(this.submission.data);
-                this.validateCurrentPage();
+                const errors = this.submitted ? this.validate(this.localData, { dirty: true }) : this.validateCurrentPage();
+                if (this.alert) {
+                    this.showErrors(errors, true, true);
+                }
             });
             return Promise.resolve();
         }
@@ -689,9 +692,11 @@ export default class Wizard extends Webform {
                 });
             });
         }
-        // Validate the form, before go to the next page
-        const errors = this.validateCurrentPage({ dirty: true });
-        if (errors.length === 0) {
+        // Validate the form before going to the next page
+        const currentPageErrors = this.validateCurrentPage({ dirty: true });
+        const errors = this.submitted ? this.validate(this.localData, { dirty: true }) : currentPageErrors;
+        // allow going to the next page if the current page is valid, even if there are form level errors
+        if (currentPageErrors.length === 0) {
             this.checkData(this.submission.data);
             return this.beforePage(true).then(() => {
                 return this.setPage(this.getNextPage()).then(() => {
@@ -706,7 +711,7 @@ export default class Wizard extends Webform {
         else {
             this.currentPage.components.forEach((comp) => comp.setPristine(false));
             this.scrollIntoView(this.element, true);
-            return Promise.reject(super.showErrors(errors, true));
+            return Promise.reject(this.showErrors(errors, true));
         }
     }
     validateCurrentPage(flags = {}) {
@@ -908,10 +913,7 @@ export default class Wizard extends Webform {
         return components.reduce((check, comp) => comp.checkValidity(data, dirty, row, currentPageOnly, childErrors) && check, true);
     }
     get errors() {
-        if (!this.isLastPage()) {
-            return this.currentPage.errors;
-        }
-        return super.errors;
+        return !this.isLastPage() && !this.submitted ? this.currentPage.errors : super.errors;
     }
     focusOnComponent(key) {
         const component = this.getComponent(key);

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

@@ -410,7 +410,6 @@ export default class DataGridComponent extends NestedArrayComponent {
         });
         this.checkConditions();
         this.triggerChange();
-        this.triggerChange({ modified: true });
         this.redraw().then(() => {
             this.focusOnNewRowElement(this.rows[index]);
         });
@@ -489,9 +488,6 @@ export default class DataGridComponent extends NestedArrayComponent {
             const options = _.clone(this.options);
             options.name += `[${rowIndex}]`;
             options.row = `${rowIndex}-${colIndex}`;
-            options.onChange = (flags, changed, modified) => {
-                this.triggerChange({ modified });
-            };
             let columnComponent;
             if (this.builderMode) {
                 col.id = col.id + rowIndex;

package/lib/mjs/components/radio/Radio.d.ts

@@ -27,6 +27,7 @@ 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>;
     render(): import("../_classes/field/Field").default;
     attach(element: any): Promise<void>;
@@ -35,10 +36,13 @@ 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;
 }

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

@@ -2,6 +2,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';
 export default class RadioComponent extends ListComponent {
     static schema(...extend) {
         return ListComponent.schema({
@@ -142,6 +143,7 @@ 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();
         }
@@ -181,9 +183,12 @@ export default class RadioComponent extends ListComponent {
                 if (!_.isString(this.dataValue)) {
                     dataValue = _.toString(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);
+                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);
                 }
                 else {
                     input.checked = (dataValue === input.value && (input.value || this.component.dataSrc !== 'url'));
@@ -220,9 +225,14 @@ export default class RadioComponent extends ListComponent {
         let value = this.component.inputType === 'checkbox' ? '' : this.dataValue;
         this.refs.input.forEach((input, index) => {
             if (input.checked) {
-                value = (this.isSelectURL && _.isObject(this.loadedOptions[index].value)) ?
-                    this.loadedOptions[index].value :
-                    input.value;
+                if (!this.isSelectURL) {
+                    value = input.value;
+                    return;
+                }
+                const optionValue = this.loadedOptions[index].value;
+                value = this.valuesMap.has(optionValue)
+                    ? this.valuesMap.get(optionValue)
+                    : optionValue;
             }
         });
         return value;
@@ -266,8 +276,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.refs.input[index].value;
-            this.refs.input[index].checked = (inputValue === value.toString());
+            const inputValue = this.getValueByInput(this.refs.input[index]);
+            this.refs.input[index].checked = _.isEqual(inputValue, value);
         }
     }
     get shouldLoad() {
@@ -277,6 +287,23 @@ 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();
@@ -327,7 +354,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.dataValue;
+                this.loadedOptions[i].value = this.prepareValue(this.dataValue, { skipValueProperty: true });
             }
         });
         this.optionsLoaded = true;
@@ -337,12 +364,15 @@ export default class RadioComponent extends ListComponent {
         const listData = [];
         items?.forEach((item, i) => {
             const valueAtProperty = _.get(item, this.component.valueProperty);
-            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;
+            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];
+            }
             if (!this.isRadio && (_.isObject(value) || _.isBoolean(value) || _.isUndefined(value))) {
                 this.loadedOptions[i].invalid = true;
             }
@@ -365,7 +395,9 @@ export default class RadioComponent extends ListComponent {
             const value = this.dataValue;
             this.refs.wrapper.forEach((wrapper, index) => {
                 const input = this.refs.input[index];
-                const checked = (input.type === 'checkbox') ? value[input.value] || input.checked : (input.value.toString() === value.toString());
+                const checked = (input.type === 'checkbox')
+                    ? value[input.value] || input.checked
+                    : _.isEqual(this.normalizeValue(this.getValueByInput(input)), value);
                 if (checked) {
                     //add class to container when selected
                     this.addClass(wrapper, this.optionSelectedClass);
@@ -379,10 +411,25 @@ 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) {
@@ -438,13 +485,9 @@ export default class RadioComponent extends ListComponent {
                 value = !(!value || value.toString() === 'false');
                 break;
         }
-        if (this.isSelectURL && this.templateData && this.templateData[value]) {
-            const submission = this.root.submission;
-            if (!submission.metadata.selectData) {
-                submission.metadata.selectData = {};
-            }
-            _.set(submission.metadata.selectData, this.path, this.templateData[value]);
-        }
         return super.normalizeValue(value);
     }
+    isSingleInputValue() {
+        return true;
+    }
 }

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

@@ -141,6 +141,14 @@ export default class SelectBoxesComponent extends RadioComponent {
             checkedValues.forEach((value) => selectData.push(this.templateData[value]));
             _.set(submission.metadata.selectData, this.path, selectData);
         }
+        // Ensure that for dataSrc == 'values' that there are not any other superfluous values.
+        if (this.component.dataSrc === 'values') {
+            for (const key in value) {
+                if (!this.component.values.find((val) => val.value === key)) {
+                    delete value[key];
+                }
+            }
+        }
         return value;
     }
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@formio/js",
-  "version": "5.0.0-dev.5933.606556f",
+  "version": "5.0.0-dev.5936.905c79f",
   "description": "JavaScript powered Forms with JSON Form Builder",
   "main": "lib/cjs/index.js",
   "exports": {