@formio/js 5.0.0-rc.90 → 5.0.0-rc.92

package/dist/formio.utils.min.js.LICENSE.txt

@@ -20,7 +20,7 @@
 
 /*! @license DOMPurify 3.1.6 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.1.6/LICENSE */
 
-/*! formiojs v5.0.0-rc.90 | https://unpkg.com/formiojs@5.0.0-rc.90/LICENSE.txt */
+/*! formiojs v5.0.0-rc.92 | https://unpkg.com/formiojs@5.0.0-rc.92/LICENSE.txt */
 
 /**
  * @license

package/lib/cjs/Webform.js

@@ -1228,9 +1228,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

@@ -70,6 +70,9 @@ class Components {
             const rowIndex = component.row;
             const rowIndexPath = rowIndex && !['container'].includes(thisPath.component.type) ? `[${Number.parseInt(rowIndex)}]` : '';
             path = `${thisPath.path}${rowIndexPath}.`;
+            if (rowIndexPath && (0, utils_2.getModelType)(thisPath) === 'nestedDataArray') {
+                path = `${path}data.`;
+            }
             path += componentKey;
             return lodash_1.default.trim(path, '.');
         }

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

@@ -1738,12 +1738,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 {
@@ -2937,8 +2937,8 @@ class Component extends Element_1.default {
         if (this.options.alwaysDirty) {
             flags.dirty = true;
         }
-        if (flags.fromSubmission && this.hasValue(data) && !(this.pristine && this.protected)) {
-            flags.dirty = true;
+        if (flags.fromSubmission && this.hasValue(data)) {
+            flags.dirty = this.pristine && this.component.protected ? false : true;
         }
         this.setDirty(flags.dirty);
         return this.setComponentValidity(errors, flags.dirty, flags.silentCheck, flags.fromSubmission);

package/lib/cjs/components/_classes/component/editForm/Component.edit.conditional.js

@@ -50,6 +50,6 @@ exports.default = [
     },
     utils_1.default.javaScriptValue('Advanced Conditions', 'customConditional', 'conditional.json', 110, '<p>You must assign the <strong>show</strong> variable a boolean result.</p>' +
         '<p><strong>Note: Advanced Conditional logic will override the results of the Simple Conditional logic.</strong></p>' +
-        '<h5>Example</h5><pre>show = !!data.showMe;</pre>', '<p><a href="http://formio.github.io/formio.js/app/examples/conditions.html" target="_blank" rel="noopener noreferrer">Click here for an example</a></p>')
+        '<h5>Example</h5><pre>show = !!data.showMe;</pre>', '<p><a href="https://help.form.io/userguide/form-building/logic-and-conditions" target="_blank" rel="noopener noreferrer">Click here for an example</a></p>')
 ];
 /* eslint-enable quotes, max-len */

package/lib/cjs/components/_classes/component/editForm/Component.edit.data.js

@@ -140,7 +140,7 @@ exports.default = [
         input: true
     },
     utils_1.default.javaScriptValue('Custom Default Value', 'customDefaultValue', 'customDefaultValue', 1000, '<p><h4>Example:</h4><pre>value = data.firstName + " " + data.lastName;</pre></p>', '<p><h4>Example:</h4><pre>{"cat": [{"var": "data.firstName"}, " ", {"var": "data.lastName"}]}</pre>'),
-    utils_1.default.javaScriptValue('Calculated Value', 'calculateValue', 'calculateValue', 1100, '<p><h4>Example:</h4><pre>value = data.a + data.b + data.c;</pre></p>', '<p><h4>Example:</h4><pre>{"+": [{"var": "data.a"}, {"var": "data.b"}, {"var": "data.c"}]}</pre><p><a href="http://formio.github.io/formio.js/app/examples/calculated.html" target="_blank" rel="noopener noreferrer">Click here for an example</a></p>', '<tr><th>token</th><td>The decoded JWT token for the authenticated user.</td></tr>'),
+    utils_1.default.javaScriptValue('Calculated Value', 'calculateValue', 'calculateValue', 1100, '<p><h4>Example:</h4><pre>value = data.a + data.b + data.c;</pre></p>', '<p><h4>Example:</h4><pre>{"+": [{"var": "data.a"}, {"var": "data.b"}, {"var": "data.c"}]}</pre><p><a href="https://help.form.io/userguide/form-building/logic-and-conditions#calculated-values" target="_blank" rel="noopener noreferrer">Click here for an example</a></p>', '<tr><th>token</th><td>The decoded JWT token for the authenticated user.</td></tr>'),
     {
         type: 'checkbox',
         input: true,

package/lib/cjs/components/_classes/component/editForm/utils.js

@@ -55,7 +55,7 @@ const EditFormUtils = {
                 '<tr><th>value</th><td>The current value of the component.</td></tr>' +
                 '<tr><th>moment</th><td>The moment.js library for date manipulation.</td></tr>' +
                 '<tr><th>_</th><td>An instance of <a href="https://lodash.com/docs/" target="_blank" rel="noopener noreferrer">Lodash</a>.</td></tr>' +
-                '<tr><th>utils</th><td>An instance of the <a href="http://formio.github.io/formio.js/docs/identifiers.html#utils" target="_blank" rel="noopener noreferrer">FormioUtils</a> object.</td></tr>' +
+                '<tr><th>utils</th><td>An instance of the <a href="https://help.form.io/developers/javascript-development/javascript-utilities" target="_blank" rel="noopener noreferrer">FormioUtils</a> object.</td></tr>' +
                 '<tr><th>util</th><td>An alias for "utils".</td></tr>' +
                 '</table><br/>'
             /* eslint-enable prefer-template */

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

@@ -584,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',
@@ -798,6 +799,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) {
@@ -810,7 +815,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);
@@ -970,7 +975,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;
@@ -1074,6 +1079,7 @@ class EditGridComponent extends NestedArrayComponent_1.default {
                     }
                     else if (errorContainer) {
                         errorContainer.textContent = '';
+                        this.removeClass(errorContainer, 'help-block');
                     }
                 }
             }

package/lib/cjs/components/editgrid/fixtures/comp19.d.ts

@@ -0,0 +1,59 @@
+declare namespace _default {
+    let _id: string;
+    let title: string;
+    let name: string;
+    let path: string;
+    let type: string;
+    let display: string;
+    let components: ({
+        label: string;
+        tableView: boolean;
+        validateWhenHidden: boolean;
+        rowDrafts: boolean;
+        key: string;
+        type: string;
+        displayAsTable: boolean;
+        input: boolean;
+        components: {
+            label: string;
+            columns: {
+                components: {
+                    label: string;
+                    applyMaskOn: string;
+                    tableView: boolean;
+                    validate: {
+                        required: boolean;
+                    };
+                    validateWhenHidden: boolean;
+                    key: string;
+                    type: string;
+                    input: boolean;
+                }[];
+                width: number;
+                offset: number;
+                push: number;
+                pull: number;
+                size: string;
+                currentWidth: number;
+            }[];
+            key: string;
+            type: string;
+            input: boolean;
+            tableView: boolean;
+        }[];
+        disableOnInvalid?: undefined;
+    } | {
+        type: string;
+        label: string;
+        key: string;
+        disableOnInvalid: boolean;
+        input: boolean;
+        tableView: boolean;
+        validateWhenHidden?: undefined;
+        rowDrafts?: undefined;
+        displayAsTable?: undefined;
+        components?: undefined;
+    })[];
+    let project: string;
+}
+export default _default;

package/lib/cjs/components/editgrid/fixtures/comp19.js

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    _id: '6704f3d329cf52a3ddd4e244',
+    title: 'uiu',
+    name: 'uiu',
+    path: 'uiu',
+    type: 'resource',
+    display: 'form',
+    components: [
+        {
+            label: 'Edit Grid',
+            tableView: false,
+            validateWhenHidden: false,
+            rowDrafts: false,
+            key: 'editGrid',
+            type: 'editgrid',
+            displayAsTable: false,
+            input: true,
+            components: [
+                {
+                    label: 'Columns',
+                    columns: [
+                        {
+                            components: [
+                                {
+                                    label: 'Text Field',
+                                    applyMaskOn: 'change',
+                                    tableView: true,
+                                    validate: {
+                                        required: true,
+                                    },
+                                    validateWhenHidden: false,
+                                    key: 'textField',
+                                    type: 'textfield',
+                                    input: true,
+                                },
+                            ],
+                            width: 6,
+                            offset: 0,
+                            push: 0,
+                            pull: 0,
+                            size: 'md',
+                            currentWidth: 6,
+                        },
+                        {
+                            components: [],
+                            width: 6,
+                            offset: 0,
+                            push: 0,
+                            pull: 0,
+                            size: 'md',
+                            currentWidth: 6,
+                        },
+                    ],
+                    key: 'columns',
+                    type: 'columns',
+                    input: false,
+                    tableView: false,
+                },
+            ],
+        },
+        {
+            type: 'button',
+            label: 'Submit',
+            key: 'submit',
+            disableOnInvalid: true,
+            input: true,
+            tableView: false,
+        },
+    ],
+    project: '66f66c655879bf08113cf465',
+};

package/lib/cjs/components/editgrid/fixtures/index.d.ts

@@ -15,7 +15,8 @@ import comp14 from './comp14';
 import comp15 from './comp15';
 import comp16 from './comp16';
 import comp18 from './comp18';
+import comp19 from './comp19';
 import compOpenWhenEmpty from './comp-openWhenEmpty';
 import withOpenWhenEmptyAndConditions from './comp-with-conditions-and-openWhenEmpty';
 import compWithCustomDefaultValue from './comp-with-custom-default-value';
-export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8, comp9, comp10, comp11, comp12, comp13, comp14, comp15, comp16, comp17, comp18, compOpenWhenEmpty, withOpenWhenEmptyAndConditions, compWithCustomDefaultValue, compTestEvents };
+export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8, comp9, comp10, comp11, comp12, comp13, comp14, comp15, comp16, comp17, comp18, comp19, compOpenWhenEmpty, withOpenWhenEmptyAndConditions, compWithCustomDefaultValue, compTestEvents };

package/lib/cjs/components/editgrid/fixtures/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.compTestEvents = exports.compWithCustomDefaultValue = exports.withOpenWhenEmptyAndConditions = exports.compOpenWhenEmpty = exports.comp18 = exports.comp17 = exports.comp16 = exports.comp15 = exports.comp14 = exports.comp13 = exports.comp12 = exports.comp11 = exports.comp10 = exports.comp9 = exports.comp8 = exports.comp7 = exports.comp6 = exports.comp5 = exports.comp4 = exports.comp3 = exports.comp2 = exports.comp1 = void 0;
+exports.compTestEvents = exports.compWithCustomDefaultValue = exports.withOpenWhenEmptyAndConditions = exports.compOpenWhenEmpty = exports.comp19 = exports.comp18 = exports.comp17 = exports.comp16 = exports.comp15 = exports.comp14 = exports.comp13 = exports.comp12 = exports.comp11 = exports.comp10 = exports.comp9 = exports.comp8 = exports.comp7 = exports.comp6 = exports.comp5 = exports.comp4 = exports.comp3 = exports.comp2 = exports.comp1 = void 0;
 const comp1_1 = __importDefault(require("./comp1"));
 exports.comp1 = comp1_1.default;
 const comp2_1 = __importDefault(require("./comp2"));
@@ -40,6 +40,8 @@ const comp17_1 = __importDefault(require("./comp17"));
 exports.comp17 = comp17_1.default;
 const comp18_1 = __importDefault(require("./comp18"));
 exports.comp18 = comp18_1.default;
+const comp19_1 = __importDefault(require("./comp19"));
+exports.comp19 = comp19_1.default;
 const comp_with_conditions_and_openWhenEmpty_1 = __importDefault(require("./comp-with-conditions-and-openWhenEmpty"));
 exports.withOpenWhenEmptyAndConditions = comp_with_conditions_and_openWhenEmpty_1.default;
 const comp_openWhenEmpty_1 = __importDefault(require("./comp-openWhenEmpty"));

package/lib/cjs/components/form/editForm/Form.edit.data.js

@@ -7,7 +7,7 @@ const utils_1 = __importDefault(require("../../_classes/component/editForm/utils
 /* eslint-disable max-len */
 exports.default = [
     utils_1.default.javaScriptValue('Custom Default Value', 'customDefaultValue', 'customDefaultValue', 120, '<p><h4>Example:</h4><pre>value = data.firstName + " " + data.lastName;</pre></p>', '<p><h4>Example:</h4><pre>{"cat": [{"var": "data.firstName"}, " ", {"var": "data.lastName"}]}</pre>'),
-    utils_1.default.javaScriptValue('Calculated Value', 'calculateValue', 'calculateValue', 130, '<p><h4>Example:</h4><pre>value = data.a + data.b + data.c;</pre></p>', '<p><h4>Example:</h4><pre>{"+": [{"var": "data.a"}, {"var": "data.b"}, {"var": "data.c"}]}</pre><p><a href="http://formio.github.io/formio.js/app/examples/calculated.html" target="_blank" rel="noopener noreferrer">Click here for an example</a></p>'),
+    utils_1.default.javaScriptValue('Calculated Value', 'calculateValue', 'calculateValue', 130, '<p><h4>Example:</h4><pre>value = data.a + data.b + data.c;</pre></p>', '<p><h4>Example:</h4><pre>{"+": [{"var": "data.a"}, {"var": "data.b"}, {"var": "data.c"}]}</pre><p><a href="https://help.form.io/userguide/form-building/logic-and-conditions#calculated-values" target="_blank" rel="noopener noreferrer">Click here for an example</a></p>'),
     {
         weight: 140,
         type: 'checkbox',

package/lib/cjs/components/number/fixtures/comp11.d.ts

@@ -0,0 +1,17 @@
+declare namespace _default {
+    let components: {
+        label: string;
+        mask: boolean;
+        tableView: boolean;
+        modalEdit: boolean;
+        multiple: boolean;
+        delimiter: string;
+        requireDecimal: boolean;
+        inputFormat: string;
+        truncateMultipleSpaces: boolean;
+        key: string;
+        type: string;
+        input: boolean;
+    }[];
+}
+export default _default;

package/lib/cjs/components/number/fixtures/comp11.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    components: [
+        {
+            label: 'Number',
+            mask: true,
+            tableView: false,
+            modalEdit: true,
+            multiple: true,
+            delimiter: ',',
+            requireDecimal: false,
+            inputFormat: 'plain',
+            truncateMultipleSpaces: false,
+            key: 'number',
+            type: 'number',
+            input: true
+        }
+    ]
+};

package/lib/cjs/components/number/fixtures/index.d.ts

@@ -8,4 +8,5 @@ import comp7 from './comp7';
 import comp8 from './comp8';
 import comp9 from './comp9';
 import comp10 from './comp10';
-export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8, comp9, comp10 };
+import comp11 from './comp11';
+export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8, comp9, comp10, comp11 };

package/lib/cjs/components/number/fixtures/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.comp10 = exports.comp9 = exports.comp8 = exports.comp7 = exports.comp6 = exports.comp5 = exports.comp4 = exports.comp3 = exports.comp2 = exports.comp1 = void 0;
+exports.comp11 = exports.comp10 = exports.comp9 = exports.comp8 = exports.comp7 = exports.comp6 = exports.comp5 = exports.comp4 = exports.comp3 = exports.comp2 = exports.comp1 = void 0;
 const comp1_1 = __importDefault(require("./comp1"));
 exports.comp1 = comp1_1.default;
 const comp2_1 = __importDefault(require("./comp2"));
@@ -24,3 +24,5 @@ const comp9_1 = __importDefault(require("./comp9"));
 exports.comp9 = comp9_1.default;
 const comp10_1 = __importDefault(require("./comp10"));
 exports.comp10 = comp10_1.default;
+const comp11_1 = __importDefault(require("./comp11"));
+exports.comp11 = comp11_1.default;

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

@@ -247,7 +247,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;
@@ -1214,7 +1218,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 = {};
@@ -1469,8 +1473,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/components/time/Time.js

@@ -56,12 +56,6 @@ class TimeComponent extends TextField_1.default {
         }
         return value;
     }
-    get validationValue() {
-        if ((Array.isArray(this.rawData) && !this.rawData.length) || !this.rawData) {
-            return this.dataValue;
-        }
-        return this.rawData;
-    }
     get inputInfo() {
         const info = super.inputInfo;
         info.attr.type = this.component.inputType;

package/lib/cjs/components/time/fixtures/timeForm2.js

@@ -14,6 +14,15 @@ exports.default = {
             'input': true,
             'inputMask': '99:99'
         },
+        {
+            'label': 'Multiple Time',
+            'inputType': 'text',
+            'tableView': true,
+            'key': 'multipleTime',
+            'type': 'time',
+            'input': true,
+            'inputMask': '99:99'
+        },
         {
             'label': 'Submit',
             'showValidations': false,

package/lib/mjs/Webform.js

@@ -1232,7 +1232,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,7 +1,7 @@
 import Component from './_classes/component/Component';
 import EditFormUtils from './_classes/component/editForm/utils';
 import BaseEditForm from './_classes/component/Component.form';
-import { getComponentKey } from '../utils/utils';
+import { getComponentKey, getModelType } from '../utils/utils';
 import _ from 'lodash';
 export default class Components {
     static _editFormUtils = EditFormUtils;
@@ -66,6 +66,9 @@ export default class Components {
             const rowIndex = component.row;
             const rowIndexPath = rowIndex && !['container'].includes(thisPath.component.type) ? `[${Number.parseInt(rowIndex)}]` : '';
             path = `${thisPath.path}${rowIndexPath}.`;
+            if (rowIndexPath && getModelType(thisPath) === 'nestedDataArray') {
+                path = `${path}data.`;
+            }
             path += componentKey;
             return _.trim(path, '.');
         }

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

@@ -1702,12 +1702,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 {
@@ -2904,8 +2904,8 @@ export default class Component extends Element {
         if (this.options.alwaysDirty) {
             flags.dirty = true;
         }
-        if (flags.fromSubmission && this.hasValue(data) && !(this.pristine && this.protected)) {
-            flags.dirty = true;
+        if (flags.fromSubmission && this.hasValue(data)) {
+            flags.dirty = this.pristine && this.component.protected ? false : true;
         }
         this.setDirty(flags.dirty);
         return this.setComponentValidity(errors, flags.dirty, flags.silentCheck, flags.fromSubmission);

package/lib/mjs/components/_classes/component/editForm/Component.edit.conditional.js

@@ -45,6 +45,6 @@ export default [
     },
     EditFormUtils.javaScriptValue('Advanced Conditions', 'customConditional', 'conditional.json', 110, '<p>You must assign the <strong>show</strong> variable a boolean result.</p>' +
         '<p><strong>Note: Advanced Conditional logic will override the results of the Simple Conditional logic.</strong></p>' +
-        '<h5>Example</h5><pre>show = !!data.showMe;</pre>', '<p><a href="http://formio.github.io/formio.js/app/examples/conditions.html" target="_blank" rel="noopener noreferrer">Click here for an example</a></p>')
+        '<h5>Example</h5><pre>show = !!data.showMe;</pre>', '<p><a href="https://help.form.io/userguide/form-building/logic-and-conditions" target="_blank" rel="noopener noreferrer">Click here for an example</a></p>')
 ];
 /* eslint-enable quotes, max-len */

package/lib/mjs/components/_classes/component/editForm/Component.edit.data.js

@@ -135,7 +135,7 @@ export default [
         input: true
     },
     EditFormUtils.javaScriptValue('Custom Default Value', 'customDefaultValue', 'customDefaultValue', 1000, '<p><h4>Example:</h4><pre>value = data.firstName + " " + data.lastName;</pre></p>', '<p><h4>Example:</h4><pre>{"cat": [{"var": "data.firstName"}, " ", {"var": "data.lastName"}]}</pre>'),
-    EditFormUtils.javaScriptValue('Calculated Value', 'calculateValue', 'calculateValue', 1100, '<p><h4>Example:</h4><pre>value = data.a + data.b + data.c;</pre></p>', '<p><h4>Example:</h4><pre>{"+": [{"var": "data.a"}, {"var": "data.b"}, {"var": "data.c"}]}</pre><p><a href="http://formio.github.io/formio.js/app/examples/calculated.html" target="_blank" rel="noopener noreferrer">Click here for an example</a></p>', '<tr><th>token</th><td>The decoded JWT token for the authenticated user.</td></tr>'),
+    EditFormUtils.javaScriptValue('Calculated Value', 'calculateValue', 'calculateValue', 1100, '<p><h4>Example:</h4><pre>value = data.a + data.b + data.c;</pre></p>', '<p><h4>Example:</h4><pre>{"+": [{"var": "data.a"}, {"var": "data.b"}, {"var": "data.c"}]}</pre><p><a href="https://help.form.io/userguide/form-building/logic-and-conditions#calculated-values" target="_blank" rel="noopener noreferrer">Click here for an example</a></p>', '<tr><th>token</th><td>The decoded JWT token for the authenticated user.</td></tr>'),
     {
         type: 'checkbox',
         input: true,

package/lib/mjs/components/_classes/component/editForm/utils.js

@@ -50,7 +50,7 @@ const EditFormUtils = {
                 '<tr><th>value</th><td>The current value of the component.</td></tr>' +
                 '<tr><th>moment</th><td>The moment.js library for date manipulation.</td></tr>' +
                 '<tr><th>_</th><td>An instance of <a href="https://lodash.com/docs/" target="_blank" rel="noopener noreferrer">Lodash</a>.</td></tr>' +
-                '<tr><th>utils</th><td>An instance of the <a href="http://formio.github.io/formio.js/docs/identifiers.html#utils" target="_blank" rel="noopener noreferrer">FormioUtils</a> object.</td></tr>' +
+                '<tr><th>utils</th><td>An instance of the <a href="https://help.form.io/developers/javascript-development/javascript-utilities" target="_blank" rel="noopener noreferrer">FormioUtils</a> object.</td></tr>' +
                 '<tr><th>util</th><td>An alias for "utils".</td></tr>' +
                 '</table><br/>'
             /* eslint-enable prefer-template */

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

@@ -582,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',
@@ -788,6 +789,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) {
@@ -800,7 +805,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);
@@ -960,7 +965,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;
@@ -1062,6 +1067,7 @@ export default class EditGridComponent extends NestedArrayComponent {
                     }
                     else if (errorContainer) {
                         errorContainer.textContent = '';
+                        this.removeClass(errorContainer, 'help-block');
                     }
                 }
             }