@formio/js 5.0.0-dev.5850.b6b5101 → 5.0.0-dev.5855.daa98f8

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/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/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

@@ -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/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/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.5850.b6b5101",
+  "version": "5.0.0-dev.5855.daa98f8",
   "description": "JavaScript powered Forms with JSON Form Builder",
   "main": "lib/cjs/index.js",
   "exports": {