@formio/js 5.0.0-dev.5935.c16c9d9 → 5.0.0-dev.5936.905c79f

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

@@ -987,7 +987,7 @@ class EditGridComponent extends NestedArrayComponent_1.default {
             dirty;
     }
     validateRow(editRow, dirty, forceSilentCheck, fromSubmission) {
-        var _a, _b;
+        var _a;
         editRow.errors = [];
         if (this.shouldValidateRow(editRow, dirty, fromSubmission)) {
             const silentCheck = (this.component.rowDrafts && !this.shouldValidateDraft(editRow)) || forceSilentCheck;
@@ -1037,12 +1037,9 @@ class EditGridComponent extends NestedArrayComponent_1.default {
                 });
             }
         }
-        if (editRow.alerts && (!this.component.rowDrafts || ((_a = this.root) === null || _a === void 0 ? void 0 : _a.submitted))) {
+        if (!this.component.rowDrafts || ((_a = this.root) === null || _a === void 0 ? void 0 : _a.submitted)) {
             this.showRowErrorAlerts(editRow, editRow.errors);
         }
-        else if ((_b = editRow.errors) === null || _b === void 0 ? void 0 : _b.length) {
-            this.setCustomValidity(editRow.errors, dirty);
-        }
         return editRow.errors;
     }
     showRowErrorAlerts(editRow, errors) {

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/mjs/components/editgrid/EditGrid.js

@@ -1026,12 +1026,9 @@ export default class EditGridComponent extends NestedArrayComponent {
                 });
             }
         }
-        if (editRow.alerts && (!this.component.rowDrafts || this.root?.submitted)) {
+        if (!this.component.rowDrafts || this.root?.submitted) {
             this.showRowErrorAlerts(editRow, editRow.errors);
         }
-        else if (editRow.errors?.length) {
-            this.setCustomValidity(editRow.errors, dirty);
-        }
         return editRow.errors;
     }
     showRowErrorAlerts(editRow, errors) {

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/package.json

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