@formio/js 5.0.0-dev.5834.98680ce → 5.0.0-dev.5834.b72f609

package/lib/cjs/Webform.js

@@ -1237,9 +1237,15 @@ class Webform extends NestedDataComponent_1.default {
      * @param {any} changes - The changes that have occured in the form.
      */
     onChange(flags, changed, modified, changes) {
+        var _a;
         flags = flags || {};
         let isChangeEventEmitted = false;
-        super.onChange(flags, true);
+        if (((_a = this.parent) === null || _a === void 0 ? void 0 : _a.subForm) === this) {
+            super.onChange(Object.assign(Object.assign({}, flags), { modified }), false);
+        }
+        else {
+            super.onChange(flags, true);
+        }
         const value = lodash_1.default.clone(this.submission);
         flags.changed = value.changed = changed;
         flags.changes = changes;

package/lib/cjs/components/Components.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const Component_1 = __importDefault(require("./_classes/component/Component"));
 const utils_1 = __importDefault(require("./_classes/component/editForm/utils"));
 const Component_form_1 = __importDefault(require("./_classes/component/Component.form"));
+const utils_2 = require("../utils/utils");
 const lodash_1 = __importDefault(require("lodash"));
 class Components {
     static set EditFormUtils(value) {
@@ -56,7 +57,8 @@ class Components {
     static getComponentPath(component) {
         var _a;
         let path = '';
-        if (component.component.key) {
+        const componentKey = (0, utils_2.getComponentKey)(component.component);
+        if (componentKey) {
             let thisPath = ((_a = component.options) === null || _a === void 0 ? void 0 : _a.parent) || component;
             while (thisPath && !thisPath.allowData && thisPath.parent) {
                 thisPath = thisPath.parent;
@@ -68,7 +70,10 @@ class Components {
             const rowIndex = component.row;
             const rowIndexPath = rowIndex && !['container'].includes(thisPath.component.type) ? `[${Number.parseInt(rowIndex)}]` : '';
             path = `${thisPath.path}${rowIndexPath}.`;
-            path += component.component.key;
+            if (rowIndexPath && (0, utils_2.getModelType)(thisPath) === 'nestedDataArray') {
+                path = `${path}data.`;
+            }
+            path += componentKey;
             return lodash_1.default.trim(path, '.');
         }
         return path;

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

@@ -1757,12 +1757,12 @@ class Component extends Element_1.default {
         var _a, _b, _c;
         if ((_a = this.root) === null || _a === void 0 ? void 0 : _a.currentSelection) {
             if ((_b = this.refs.input) === null || _b === void 0 ? void 0 : _b.length) {
-                const { selection, index } = this.root.currentSelection;
+                const { index } = this.root.currentSelection;
                 let input = this.refs.input[index];
                 const isInputRangeSelectable = (i) => /text|search|password|tel|url/i.test((i === null || i === void 0 ? void 0 : i.type) || '');
                 if (input) {
                     if (isInputRangeSelectable(input)) {
-                        input.setSelectionRange(...selection);
+                        input.setSelectionRange(input.value.length, input.value.length);
                     }
                 }
                 else {
@@ -2966,7 +2966,7 @@ class Component extends Element_1.default {
             flags.dirty = true;
         }
         if (flags.fromSubmission && this.hasValue(data)) {
-            flags.dirty = true;
+            flags.dirty = this.pristine && this.component.protected ? false : true;
         }
         this.setDirty(flags.dirty);
         return this.setComponentValidity(errors, flags.dirty, flags.silentCheck, flags.fromSubmission);
@@ -2992,6 +2992,7 @@ class Component extends Element_1.default {
             value: this.validationValue,
             path: this.path || this.component.key,
             instance: this,
+            form: this.root ? this.root._form : {},
             scope: { errors: [] },
             processors: [
                 process_1.validateProcessInfo
@@ -3468,14 +3469,16 @@ class Component extends Element_1.default {
         window.scrollTo(verticalOnly ? window.scrollX : left + window.scrollX, top + window.scrollY);
     }
     focus(index) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         if ('beforeFocus' in this.parent) {
             this.parent.beforeFocus(this);
         }
-        index = index || ((_a = this.refs.input) === null || _a === void 0 ? void 0 : _a.length) - 1;
-        if ((_b = this.refs.input) === null || _b === void 0 ? void 0 : _b.length) {
+        if (!index && !lodash_1.default.isNumber(index) && ((_b = (_a = this.refs) === null || _a === void 0 ? void 0 : _a.input) === null || _b === void 0 ? void 0 : _b.length)) {
+            index = this.refs.input.length - 1;
+        }
+        if ((_c = this.refs.input) === null || _c === void 0 ? void 0 : _c.length) {
             const focusingInput = this.refs.input[index];
-            if (((_c = this.component.widget) === null || _c === void 0 ? void 0 : _c.type) === 'calendar') {
+            if (((_d = this.component.widget) === null || _d === void 0 ? void 0 : _d.type) === 'calendar') {
                 const sibling = focusingInput.nextSibling;
                 if (sibling) {
                     sibling.focus();

package/lib/cjs/components/_classes/list/ListComponent.js

@@ -190,6 +190,7 @@ class ListComponent extends Field_1.default {
                     return;
                 }
                 let { url } = this.component.data;
+                url = lodash_1.default.trim(url);
                 let method;
                 let body;
                 if (url.startsWith('/')) {

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

@@ -214,6 +214,16 @@ class AddressComponent extends Container_1.default {
     isValueInLegacyFormat(value) {
         return value && !value.mode;
     }
+    set dataValue(value) {
+        super.dataValue = value;
+    }
+    get dataValue() {
+        const resultValue = lodash_1.default.get(this._data, this.component.path);
+        if (!lodash_1.default.isArray(resultValue) && this.component.multiple) {
+            return [resultValue];
+        }
+        return super.dataValue;
+    }
     normalizeValue(value) {
         return (this.manualModeEnabled && this.isValueInLegacyFormat(value))
             ? {

package/lib/cjs/components/day/Day.js

@@ -286,7 +286,7 @@ class DayComponent extends Field_1.default {
                 if (!this.component.fields.day.hide && maxDay) {
                     this.refs.day.max = maxDay;
                 }
-                if (maxDay && day > maxDay) {
+                if (maxDay && day > maxDay && this.refs.day) {
                     this.refs.day.value = this.refs.day.max;
                 }
                 updateValueAndSaveFocus(this.refs.month, 'month')();
@@ -496,27 +496,40 @@ class DayComponent extends Field_1.default {
         if (defaultValue) {
             defaults = defaultValue.split('/').map(x => parseInt(x, 10));
         }
+        const isModalEditClosed = this.component.modalEdit && !this.componentModal.isOpened;
         if (this.showDay && this.refs.day) {
-            day = parseInt(this.refs.day.value, 10);
+            day = (this.refs.day.value === '' && !isModalEditClosed) ? '' : parseInt(this.refs.day.value, 10);
         }
-        if (day === undefined || lodash_1.default.isNaN(day)) {
-            day = defaults[DAY] && !lodash_1.default.isNaN(defaults[DAY]) ? defaults[DAY] : 0;
+        if (day === undefined || lodash_1.default.isNaN(day) || value) {
+            day = (defaults.length !== 3)
+                ? this.getDayWithHiddenFields(defaults).day
+                : (defaults[DAY] && !lodash_1.default.isNaN(defaults[DAY]) ? defaults[DAY] : 0);
         }
         if (this.showMonth && this.refs.month) {
             // Months are 0 indexed.
-            month = parseInt(this.refs.month.value, 10);
+            month = (this.refs.month.value === '' && !isModalEditClosed) ? '' : parseInt(this.refs.month.value, 10);
         }
-        if (month === undefined || lodash_1.default.isNaN(month)) {
-            month = defaults[MONTH] && !lodash_1.default.isNaN(defaults[MONTH]) ? defaults[MONTH] : 0;
+        if (month === undefined || lodash_1.default.isNaN(month) || value) {
+            month = (defaults.length !== 3)
+                ? this.getDayWithHiddenFields(defaults).month
+                : (defaults[MONTH] && !lodash_1.default.isNaN(defaults[MONTH]) ? defaults[MONTH] : 0);
         }
         if (this.showYear && this.refs.year) {
-            year = parseInt(this.refs.year.value);
+            year = (this.refs.year.value === '' && !isModalEditClosed) ? '' : parseInt(this.refs.year.value);
         }
-        if (year === undefined || lodash_1.default.isNaN(year)) {
-            year = defaults[YEAR] && !lodash_1.default.isNaN(defaults[YEAR]) ? defaults[YEAR] : 0;
+        if (year === undefined || lodash_1.default.isNaN(year) || value) {
+            year = (defaults.length !== 3)
+                ? this.getDayWithHiddenFields(defaults).year
+                : (defaults[YEAR] && !lodash_1.default.isNaN(defaults[YEAR]) ? defaults[YEAR] : 0);
         }
         let result;
         if (!day && !month && !year) {
+            if (!isModalEditClosed) {
+                this.dataValue = this.emptyValue;
+                if (this.options.building) {
+                    this.triggerChange();
+                }
+            }
             return null;
         }
         // add trailing zeros if the data is showed
@@ -571,6 +584,9 @@ class DayComponent extends Field_1.default {
      * @returns {string|null} - The string value of the date.
      */
     getValueAsString(value) {
+        if (!value) {
+            return '';
+        }
         return this.getDate(value) || '';
     }
     focus(field) {

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

@@ -13,6 +13,7 @@ const utils_1 = require("../../utils/utils");
 const EditRowState = {
     New: 'new',
     Editing: 'editing',
+    Saving: 'saving',
     Saved: 'saved',
     Viewing: 'viewing',
     Removed: 'removed',
@@ -808,6 +809,10 @@ class EditGridComponent extends NestedArrayComponent_1.default {
         if (!this.component.rowDrafts) {
             editRow.components.forEach((comp) => comp.setPristine(false));
         }
+        // Mark the row with a 'Saving' state to trigger validation for future row changes
+        if (editRow.state === EditRowState.New) {
+            editRow.state = EditRowState.Saving;
+        }
         const errors = this.validateRow(editRow, true);
         if (!this.component.rowDrafts) {
             if (errors.length) {
@@ -820,7 +825,7 @@ class EditGridComponent extends NestedArrayComponent_1.default {
                 this.root.focusedComponent = null;
             }
             switch (editRow.state) {
-                case EditRowState.New: {
+                case EditRowState.Saving: {
                     const newIndex = dataValue.length;
                     dataValue.push(editRow.data);
                     editRow.components.forEach(component => component.rowIndex = newIndex);
@@ -980,7 +985,7 @@ class EditGridComponent extends NestedArrayComponent_1.default {
     }
     shouldValidateRow(editRow, dirty) {
         return this.shouldValidateDraft(editRow) ||
-            editRow.state === EditRowState.New ||
+            editRow.state === EditRowState.Saving ||
             editRow.state === EditRowState.Editing ||
             editRow.alerts ||
             dirty;
@@ -1084,6 +1089,7 @@ class EditGridComponent extends NestedArrayComponent_1.default {
                     }
                     else if (errorContainer) {
                         errorContainer.textContent = '';
+                        this.removeClass(errorContainer, 'help-block');
                     }
                 }
             }

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

@@ -79,6 +79,14 @@ class RadioComponent extends ListComponent_1.default {
         }
         return defaultValue;
     }
+    resetValue() {
+        this.unset();
+        this.setValue(this.emptyValue, {
+            noUpdateEvent: true,
+            noValidate: true,
+            resetValue: true
+        });
+    }
     get inputInfo() {
         var _a;
         const info = super.elementInfo();

package/lib/cjs/components/select/Select.js

@@ -246,7 +246,11 @@ class SelectComponent extends ListComponent_1.default {
             const value = (typeof itemLabel === 'string') ? this.t(itemLabel, { _userInput: true }) : itemLabel;
             return this.sanitize(value, this.shouldSanitizeValue);
         }
-        if (this.component.multiple && lodash_1.default.isArray(this.dataValue) ? this.dataValue.find((val) => this.normalizeSingleValue(value) === val) : (this.dataValue === this.normalizeSingleValue(value))) {
+        // Inside DataTable component won't have dataValue set
+        const shouldUseSelectData = (this.component.multiple && lodash_1.default.isArray(this.dataValue)
+            ? this.dataValue.find((val) => this.normalizeSingleValue(value) === val)
+            : (this.dataValue === this.normalizeSingleValue(value))) || this.inDataTable;
+        if (shouldUseSelectData) {
             const selectData = this.selectData;
             if (selectData) {
                 const templateValue = this.component.reference && (value === null || value === void 0 ? void 0 : value._id) ? value._id.toString() : value;
@@ -1213,7 +1217,7 @@ class SelectComponent extends ListComponent_1.default {
         // Check to see if we need to save off the template data into our metadata.
         const templateValue = this.component.reference && (value === null || value === void 0 ? void 0 : value._id) ? value._id.toString() : value;
         const shouldSaveData = !valueIsObject || this.component.reference;
-        if (templateValue && shouldSaveData && this.templateData && this.templateData[templateValue] && ((_a = this.root) === null || _a === void 0 ? void 0 : _a.submission)) {
+        if (!lodash_1.default.isNil(templateValue) && shouldSaveData && this.templateData && this.templateData[templateValue] && ((_a = this.root) === null || _a === void 0 ? void 0 : _a.submission)) {
             const submission = this.root.submission;
             if (!submission.metadata) {
                 submission.metadata = {};
@@ -1468,8 +1472,12 @@ class SelectComponent extends ListComponent_1.default {
     asString(value, options = {}) {
         var _a;
         value = value !== null && value !== void 0 ? value : this.getValue();
-        if (options.modalPreview) {
-            const template = this.itemTemplate(value, value);
+        if (options.modalPreview || this.inDataTable) {
+            if (this.inDataTable) {
+                value = this.undoValueTyping(value);
+            }
+            const templateValue = (this.isEntireObjectDisplay() && !lodash_1.default.isObject(value.data)) ? { data: value } : value;
+            const template = this.itemTemplate(templateValue, value, options);
             return template;
         }
         //need to convert values to strings to be able to compare values with available options that are strings

package/lib/cjs/utils/formUtils.d.ts

@@ -15,8 +15,8 @@ export const getComponentPath: typeof Utils.getComponentPath;
 export const isComponentNestedDataType: typeof Utils.isComponentNestedDataType;
 export const componentPath: typeof Utils.componentPath;
 export const componentChildPath: any;
-export const eachComponentDataAsync: (components: Component[], data: DataObject, fn: AsyncComponentDataCallback, path?: string | undefined, index?: number | undefined, parent?: any, includeAll?: boolean | undefined) => Promise<void>;
-export const eachComponentData: (components: Component[], data: DataObject, fn: ComponentDataCallback, path?: string | undefined, index?: number | undefined, parent?: any, includeAll?: boolean | undefined) => void;
+export const eachComponentDataAsync: (components: Component[], data: DataObject, fn: EachComponentDataAsyncCallback, path?: string | undefined, index?: number | undefined, parent?: any, includeAll?: boolean | undefined) => Promise<void>;
+export const eachComponentData: (components: Component[], data: DataObject, fn: EachComponentDataCallback, path?: string | undefined, index?: number | undefined, parent?: any, includeAll?: boolean | undefined) => void;
 export const getComponentKey: typeof Utils.getComponentKey;
 export const getContextualRowPath: typeof Utils.getContextualRowPath;
 export const getContextualRowData: typeof Utils.getContextualRowData;

package/lib/mjs/Webform.js

@@ -1241,7 +1241,12 @@ export default class Webform extends NestedDataComponent {
     onChange(flags, changed, modified, changes) {
         flags = flags || {};
         let isChangeEventEmitted = false;
-        super.onChange(flags, true);
+        if (this.parent?.subForm === this) {
+            super.onChange({ ...flags, modified }, false);
+        }
+        else {
+            super.onChange(flags, true);
+        }
         const value = _.clone(this.submission);
         flags.changed = value.changed = changed;
         flags.changes = changes;

package/lib/mjs/components/Components.js

@@ -1,6 +1,7 @@
 import Component from './_classes/component/Component';
 import EditFormUtils from './_classes/component/editForm/utils';
 import BaseEditForm from './_classes/component/Component.form';
+import { getComponentKey, getModelType } from '../utils/utils';
 import _ from 'lodash';
 export default class Components {
     static _editFormUtils = EditFormUtils;
@@ -52,7 +53,8 @@ export default class Components {
      */
     static getComponentPath(component) {
         let path = '';
-        if (component.component.key) {
+        const componentKey = getComponentKey(component.component);
+        if (componentKey) {
             let thisPath = component.options?.parent || component;
             while (thisPath && !thisPath.allowData && thisPath.parent) {
                 thisPath = thisPath.parent;
@@ -64,7 +66,10 @@ export default class Components {
             const rowIndex = component.row;
             const rowIndexPath = rowIndex && !['container'].includes(thisPath.component.type) ? `[${Number.parseInt(rowIndex)}]` : '';
             path = `${thisPath.path}${rowIndexPath}.`;
-            path += component.component.key;
+            if (rowIndexPath && getModelType(thisPath) === 'nestedDataArray') {
+                path = `${path}data.`;
+            }
+            path += componentKey;
             return _.trim(path, '.');
         }
         return path;

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

@@ -1720,12 +1720,12 @@ export default class Component extends Element {
     restoreCaretPosition() {
         if (this.root?.currentSelection) {
             if (this.refs.input?.length) {
-                const { selection, index } = this.root.currentSelection;
+                const { index } = this.root.currentSelection;
                 let input = this.refs.input[index];
                 const isInputRangeSelectable = (i) => /text|search|password|tel|url/i.test(i?.type || '');
                 if (input) {
                     if (isInputRangeSelectable(input)) {
-                        input.setSelectionRange(...selection);
+                        input.setSelectionRange(input.value.length, input.value.length);
                     }
                 }
                 else {
@@ -2930,7 +2930,7 @@ export default class Component extends Element {
             flags.dirty = true;
         }
         if (flags.fromSubmission && this.hasValue(data)) {
-            flags.dirty = true;
+            flags.dirty = this.pristine && this.component.protected ? false : true;
         }
         this.setDirty(flags.dirty);
         return this.setComponentValidity(errors, flags.dirty, flags.silentCheck, flags.fromSubmission);
@@ -2956,6 +2956,7 @@ export default class Component extends Element {
             value: this.validationValue,
             path: this.path || this.component.key,
             instance: this,
+            form: this.root ? this.root._form : {},
             scope: { errors: [] },
             processors: [
                 validateProcessInfo
@@ -3433,7 +3434,9 @@ export default class Component extends Element {
         if ('beforeFocus' in this.parent) {
             this.parent.beforeFocus(this);
         }
-        index = index || this.refs.input?.length - 1;
+        if (!index && !_.isNumber(index) && this.refs?.input?.length) {
+            index = this.refs.input.length - 1;
+        }
         if (this.refs.input?.length) {
             const focusingInput = this.refs.input[index];
             if (this.component.widget?.type === 'calendar') {

package/lib/mjs/components/_classes/list/ListComponent.js

@@ -185,6 +185,7 @@ export default class ListComponent extends Field {
                     return;
                 }
                 let { url } = this.component.data;
+                url = _.trim(url);
                 let method;
                 let body;
                 if (url.startsWith('/')) {

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

@@ -210,6 +210,16 @@ export default class AddressComponent extends ContainerComponent {
     isValueInLegacyFormat(value) {
         return value && !value.mode;
     }
+    set dataValue(value) {
+        super.dataValue = value;
+    }
+    get dataValue() {
+        const resultValue = _.get(this._data, this.component.path);
+        if (!_.isArray(resultValue) && this.component.multiple) {
+            return [resultValue];
+        }
+        return super.dataValue;
+    }
     normalizeValue(value) {
         return (this.manualModeEnabled && this.isValueInLegacyFormat(value))
             ? {

package/lib/mjs/components/day/Day.js

@@ -284,7 +284,7 @@ export default class DayComponent extends Field {
                 if (!this.component.fields.day.hide && maxDay) {
                     this.refs.day.max = maxDay;
                 }
-                if (maxDay && day > maxDay) {
+                if (maxDay && day > maxDay && this.refs.day) {
                     this.refs.day.value = this.refs.day.max;
                 }
                 updateValueAndSaveFocus(this.refs.month, 'month')();
@@ -494,27 +494,40 @@ export default class DayComponent extends Field {
         if (defaultValue) {
             defaults = defaultValue.split('/').map(x => parseInt(x, 10));
         }
+        const isModalEditClosed = this.component.modalEdit && !this.componentModal.isOpened;
         if (this.showDay && this.refs.day) {
-            day = parseInt(this.refs.day.value, 10);
+            day = (this.refs.day.value === '' && !isModalEditClosed) ? '' : parseInt(this.refs.day.value, 10);
         }
-        if (day === undefined || _.isNaN(day)) {
-            day = defaults[DAY] && !_.isNaN(defaults[DAY]) ? defaults[DAY] : 0;
+        if (day === undefined || _.isNaN(day) || value) {
+            day = (defaults.length !== 3)
+                ? this.getDayWithHiddenFields(defaults).day
+                : (defaults[DAY] && !_.isNaN(defaults[DAY]) ? defaults[DAY] : 0);
         }
         if (this.showMonth && this.refs.month) {
             // Months are 0 indexed.
-            month = parseInt(this.refs.month.value, 10);
+            month = (this.refs.month.value === '' && !isModalEditClosed) ? '' : parseInt(this.refs.month.value, 10);
         }
-        if (month === undefined || _.isNaN(month)) {
-            month = defaults[MONTH] && !_.isNaN(defaults[MONTH]) ? defaults[MONTH] : 0;
+        if (month === undefined || _.isNaN(month) || value) {
+            month = (defaults.length !== 3)
+                ? this.getDayWithHiddenFields(defaults).month
+                : (defaults[MONTH] && !_.isNaN(defaults[MONTH]) ? defaults[MONTH] : 0);
         }
         if (this.showYear && this.refs.year) {
-            year = parseInt(this.refs.year.value);
+            year = (this.refs.year.value === '' && !isModalEditClosed) ? '' : parseInt(this.refs.year.value);
         }
-        if (year === undefined || _.isNaN(year)) {
-            year = defaults[YEAR] && !_.isNaN(defaults[YEAR]) ? defaults[YEAR] : 0;
+        if (year === undefined || _.isNaN(year) || value) {
+            year = (defaults.length !== 3)
+                ? this.getDayWithHiddenFields(defaults).year
+                : (defaults[YEAR] && !_.isNaN(defaults[YEAR]) ? defaults[YEAR] : 0);
         }
         let result;
         if (!day && !month && !year) {
+            if (!isModalEditClosed) {
+                this.dataValue = this.emptyValue;
+                if (this.options.building) {
+                    this.triggerChange();
+                }
+            }
             return null;
         }
         // add trailing zeros if the data is showed
@@ -569,6 +582,9 @@ export default class DayComponent extends Field {
      * @returns {string|null} - The string value of the date.
      */
     getValueAsString(value) {
+        if (!value) {
+            return '';
+        }
         return this.getDate(value) || '';
     }
     focus(field) {

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

@@ -8,6 +8,7 @@ import { fastCloneDeep, Evaluator, getArrayFromComponentPath, eachComponent } fr
 const EditRowState = {
     New: 'new',
     Editing: 'editing',
+    Saving: 'saving',
     Saved: 'saved',
     Viewing: 'viewing',
     Removed: 'removed',
@@ -798,6 +799,10 @@ export default class EditGridComponent extends NestedArrayComponent {
         if (!this.component.rowDrafts) {
             editRow.components.forEach((comp) => comp.setPristine(false));
         }
+        // Mark the row with a 'Saving' state to trigger validation for future row changes
+        if (editRow.state === EditRowState.New) {
+            editRow.state = EditRowState.Saving;
+        }
         const errors = this.validateRow(editRow, true);
         if (!this.component.rowDrafts) {
             if (errors.length) {
@@ -810,7 +815,7 @@ export default class EditGridComponent extends NestedArrayComponent {
                 this.root.focusedComponent = null;
             }
             switch (editRow.state) {
-                case EditRowState.New: {
+                case EditRowState.Saving: {
                     const newIndex = dataValue.length;
                     dataValue.push(editRow.data);
                     editRow.components.forEach(component => component.rowIndex = newIndex);
@@ -970,7 +975,7 @@ export default class EditGridComponent extends NestedArrayComponent {
     }
     shouldValidateRow(editRow, dirty) {
         return this.shouldValidateDraft(editRow) ||
-            editRow.state === EditRowState.New ||
+            editRow.state === EditRowState.Saving ||
             editRow.state === EditRowState.Editing ||
             editRow.alerts ||
             dirty;
@@ -1072,6 +1077,7 @@ export default class EditGridComponent extends NestedArrayComponent {
                     }
                     else if (errorContainer) {
                         errorContainer.textContent = '';
+                        this.removeClass(errorContainer, 'help-block');
                     }
                 }
             }

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

@@ -80,6 +80,14 @@ export default class RadioComponent extends ListComponent {
         }
         return defaultValue;
     }
+    resetValue() {
+        this.unset();
+        this.setValue(this.emptyValue, {
+            noUpdateEvent: true,
+            noValidate: true,
+            resetValue: true
+        });
+    }
     get inputInfo() {
         const info = super.elementInfo();
         info.type = 'input';

package/lib/mjs/components/select/Select.js

@@ -246,7 +246,11 @@ export default class SelectComponent extends ListComponent {
             const value = (typeof itemLabel === 'string') ? this.t(itemLabel, { _userInput: true }) : itemLabel;
             return this.sanitize(value, this.shouldSanitizeValue);
         }
-        if (this.component.multiple && _.isArray(this.dataValue) ? this.dataValue.find((val) => this.normalizeSingleValue(value) === val) : (this.dataValue === this.normalizeSingleValue(value))) {
+        // Inside DataTable component won't have dataValue set
+        const shouldUseSelectData = (this.component.multiple && _.isArray(this.dataValue)
+            ? this.dataValue.find((val) => this.normalizeSingleValue(value) === val)
+            : (this.dataValue === this.normalizeSingleValue(value))) || this.inDataTable;
+        if (shouldUseSelectData) {
             const selectData = this.selectData;
             if (selectData) {
                 const templateValue = this.component.reference && value?._id ? value._id.toString() : value;
@@ -1241,7 +1245,7 @@ export default class SelectComponent extends ListComponent {
         // Check to see if we need to save off the template data into our metadata.
         const templateValue = this.component.reference && value?._id ? value._id.toString() : value;
         const shouldSaveData = !valueIsObject || this.component.reference;
-        if (templateValue && shouldSaveData && this.templateData && this.templateData[templateValue] && this.root?.submission) {
+        if (!_.isNil(templateValue) && shouldSaveData && this.templateData && this.templateData[templateValue] && this.root?.submission) {
             const submission = this.root.submission;
             if (!submission.metadata) {
                 submission.metadata = {};
@@ -1495,8 +1499,12 @@ export default class SelectComponent extends ListComponent {
     }
     asString(value, options = {}) {
         value = value ?? this.getValue();
-        if (options.modalPreview) {
-            const template = this.itemTemplate(value, value);
+        if (options.modalPreview || this.inDataTable) {
+            if (this.inDataTable) {
+                value = this.undoValueTyping(value);
+            }
+            const templateValue = (this.isEntireObjectDisplay() && !_.isObject(value.data)) ? { data: value } : value;
+            const template = this.itemTemplate(templateValue, value, options);
             return template;
         }
         //need to convert values to strings to be able to compare values with available options that are strings

package/lib/mjs/utils/formUtils.d.ts

@@ -15,8 +15,8 @@ export const getComponentPath: typeof Utils.getComponentPath;
 export const isComponentNestedDataType: typeof Utils.isComponentNestedDataType;
 export const componentPath: typeof Utils.componentPath;
 export const componentChildPath: any;
-export const eachComponentDataAsync: (components: Component[], data: DataObject, fn: AsyncComponentDataCallback, path?: string | undefined, index?: number | undefined, parent?: any, includeAll?: boolean | undefined) => Promise<void>;
-export const eachComponentData: (components: Component[], data: DataObject, fn: ComponentDataCallback, path?: string | undefined, index?: number | undefined, parent?: any, includeAll?: boolean | undefined) => void;
+export const eachComponentDataAsync: (components: Component[], data: DataObject, fn: EachComponentDataAsyncCallback, path?: string | undefined, index?: number | undefined, parent?: any, includeAll?: boolean | undefined) => Promise<void>;
+export const eachComponentData: (components: Component[], data: DataObject, fn: EachComponentDataCallback, path?: string | undefined, index?: number | undefined, parent?: any, includeAll?: boolean | undefined) => void;
 export const getComponentKey: typeof Utils.getComponentKey;
 export const getContextualRowPath: typeof Utils.getContextualRowPath;
 export const getContextualRowData: typeof Utils.getContextualRowData;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@formio/js",
-  "version": "5.0.0-dev.5834.98680ce",
+  "version": "5.0.0-dev.5834.b72f609",
   "description": "JavaScript powered Forms with JSON Form Builder",
   "main": "lib/cjs/index.js",
   "exports": {
@@ -82,7 +82,7 @@
   "dependencies": {
     "@formio/bootstrap": "3.0.0-dev.98.17ba6ea",
     "@formio/choices.js": "^10.2.1",
-    "@formio/core": "v2.1.0-dev.160.d45b496",
+    "@formio/core": "2.3.0-dev.160.cabaa43",
     "@formio/text-mask-addons": "^3.8.0-formio.2",
     "@formio/vanilla-text-mask": "^5.1.1-formio.1",
     "abortcontroller-polyfill": "^1.7.5",