@formio/js 5.0.0-dev.5844.c491f7d → 5.0.0-dev.5846.7f5a910

package/lib/cjs/Webform.js

@@ -710,6 +710,7 @@ class Webform extends NestedDataComponent_1.default {
      */
     onSetSubmission(submission, flags = {}) {
         this.submissionSet = true;
+        flags.submission = structuredClone(submission);
         this.triggerChange(flags);
         this.emit('beforeSetSubmission', submission);
         this.setValue(submission, flags);
@@ -1247,9 +1248,10 @@ class Webform extends NestedDataComponent_1.default {
             this.pristine = false;
         }
         this.checkData(value.data, flags);
-        const shouldValidate = !flags.noValidate ||
-            flags.fromIframe ||
-            (flags.fromSubmission && this.rootPristine && this.pristine && flags.changed);
+        let shouldValidate = flags.noValidate ? false :
+            lodash_1.default.isUndefined(flags.noValidate) ||
+                flags.fromIframe ||
+                (flags.fromSubmission && this.rootPristine && this.pristine);
         const errors = shouldValidate
             ? this.validate(value.data, Object.assign(Object.assign({}, flags), { noValidate: false, process: 'change' }))
             : [];

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

@@ -2456,7 +2456,6 @@ class Component extends Element_1.default {
             return;
         }
         lodash_1.default.set(this._data, this.key, value);
-        return;
     }
     /**
      * Splice a value from the dataValue.
@@ -2959,17 +2958,19 @@ class Component extends Element_1.default {
      * @returns {boolean} - TRUE if the component is valid.
      */
     showValidationErrors(errors, data, row, flags) {
+        var _a;
         if (flags.silentCheck) {
             return [];
         }
+        let dirty = this.dirty || flags.dirty;
         if (this.options.alwaysDirty) {
-            flags.dirty = true;
+            dirty = true;
         }
-        if (flags.fromSubmission && this.hasValue(data) && !(this.pristine && this.protected)) {
-            flags.dirty = true;
+        if (flags.fromSubmission && !lodash_1.default.isUndefined(lodash_1.default.get((_a = flags === null || flags === void 0 ? void 0 : flags.submission) === null || _a === void 0 ? void 0 : _a.data, this.key)) && !(this.pristine && this.protected)) {
+            dirty = this.pristine && this.component.protected ? false : true;
         }
-        this.setDirty(flags.dirty);
-        return this.setComponentValidity(errors, flags.dirty, flags.silentCheck, flags.fromSubmission);
+        this.setDirty(dirty);
+        return this.setComponentValidity(errors, dirty, flags.silentCheck, flags.fromSubmission);
     }
     /**
      * Perform a component validation.

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

@@ -827,22 +827,23 @@ class NestedComponent extends Field_1.default {
     }
     setNestedValue(component, value, flags = {}) {
         component._data = this.componentContext(component);
+        let componentFlags = Object.assign({}, flags);
         if (component.type === 'button') {
             return false;
         }
         if (component.type === 'components') {
             if (component.tree && component.hasValue(value)) {
-                return component.setValue(lodash_1.default.get(value, component.key), flags);
+                return component.setValue(lodash_1.default.get(value, component.key), componentFlags);
             }
-            return component.setValue(value, flags);
+            return component.setValue(value, componentFlags);
         }
         else if (value && component.hasValue(value)) {
-            return component.setValue(lodash_1.default.get(value, component.key), flags);
+            return component.setValue(lodash_1.default.get(value, component.key), componentFlags);
         }
         else if ((!this.rootPristine || component.visible) && component.shouldAddDefaultValue) {
-            flags.noValidate = !flags.dirty;
-            flags.resetValue = true;
-            return component.setValue(component.defaultValue, flags);
+            componentFlags.noValidate = !componentFlags.dirty;
+            componentFlags.resetValue = true;
+            return component.setValue(component.defaultValue, componentFlags);
         }
     }
     setValue(value, flags = {}) {

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

@@ -983,6 +983,7 @@ class EditGridComponent extends NestedArrayComponent_1.default {
             editRow.state === EditRowState.New ||
             editRow.state === EditRowState.Editing ||
             editRow.alerts ||
+            this.dirty ||
             dirty;
     }
     validateRow(editRow, dirty, forceSilentCheck) {

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/mjs/Webform.js

@@ -708,6 +708,7 @@ export default class Webform extends NestedDataComponent {
      */
     onSetSubmission(submission, flags = {}) {
         this.submissionSet = true;
+        flags.submission = structuredClone(submission);
         this.triggerChange(flags);
         this.emit('beforeSetSubmission', submission);
         this.setValue(submission, flags);
@@ -1249,9 +1250,10 @@ export default class Webform extends NestedDataComponent {
             this.pristine = false;
         }
         this.checkData(value.data, flags);
-        const shouldValidate = !flags.noValidate ||
-            flags.fromIframe ||
-            (flags.fromSubmission && this.rootPristine && this.pristine && flags.changed);
+        let shouldValidate = flags.noValidate ? false :
+            _.isUndefined(flags.noValidate) ||
+                flags.fromIframe ||
+                (flags.fromSubmission && this.rootPristine && this.pristine);
         const errors = shouldValidate
             ? this.validate(value.data, {
                 ...flags,

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

@@ -2422,7 +2422,6 @@ export default class Component extends Element {
             return;
         }
         _.set(this._data, this.key, value);
-        return;
     }
     /**
      * Splice a value from the dataValue.
@@ -2926,14 +2925,15 @@ export default class Component extends Element {
         if (flags.silentCheck) {
             return [];
         }
+        let dirty = this.dirty || flags.dirty;
         if (this.options.alwaysDirty) {
-            flags.dirty = true;
+            dirty = true;
         }
-        if (flags.fromSubmission && this.hasValue(data) && !(this.pristine && this.protected)) {
-            flags.dirty = true;
+        if (flags.fromSubmission && !_.isUndefined(_.get(flags?.submission?.data, this.key)) && !(this.pristine && this.protected)) {
+            dirty = this.pristine && this.component.protected ? false : true;
         }
-        this.setDirty(flags.dirty);
-        return this.setComponentValidity(errors, flags.dirty, flags.silentCheck, flags.fromSubmission);
+        this.setDirty(dirty);
+        return this.setComponentValidity(errors, dirty, flags.silentCheck, flags.fromSubmission);
     }
     /**
      * Perform a component validation.

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

@@ -822,22 +822,23 @@ export default class NestedComponent extends Field {
     }
     setNestedValue(component, value, flags = {}) {
         component._data = this.componentContext(component);
+        let componentFlags = { ...flags };
         if (component.type === 'button') {
             return false;
         }
         if (component.type === 'components') {
             if (component.tree && component.hasValue(value)) {
-                return component.setValue(_.get(value, component.key), flags);
+                return component.setValue(_.get(value, component.key), componentFlags);
             }
-            return component.setValue(value, flags);
+            return component.setValue(value, componentFlags);
         }
         else if (value && component.hasValue(value)) {
-            return component.setValue(_.get(value, component.key), flags);
+            return component.setValue(_.get(value, component.key), componentFlags);
         }
         else if ((!this.rootPristine || component.visible) && component.shouldAddDefaultValue) {
-            flags.noValidate = !flags.dirty;
-            flags.resetValue = true;
-            return component.setValue(component.defaultValue, flags);
+            componentFlags.noValidate = !componentFlags.dirty;
+            componentFlags.resetValue = true;
+            return component.setValue(component.defaultValue, componentFlags);
         }
     }
     setValue(value, flags = {}) {

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

@@ -973,6 +973,7 @@ export default class EditGridComponent extends NestedArrayComponent {
             editRow.state === EditRowState.New ||
             editRow.state === EditRowState.Editing ||
             editRow.alerts ||
+            this.dirty ||
             dirty;
     }
     validateRow(editRow, dirty, forceSilentCheck) {

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

@@ -1,6 +1,6 @@
 {
   "name": "@formio/js",
-  "version": "5.0.0-dev.5844.c491f7d",
+  "version": "5.0.0-dev.5846.7f5a910",
   "description": "JavaScript powered Forms with JSON Form Builder",
   "main": "lib/cjs/index.js",
   "exports": {