Additional fixes for the 5x renderer.

package.json

@@ -82,7 +82,7 @@
   "dependencies": {
     "@formio/bootstrap": "3.0.0-dev.98.17ba6ea",
     "@formio/choices.js": "^10.2.1",
-    "@formio/core": "2.1.0-dev.191.8c609ab",
+    "@formio/core": "2.1.0-dev.189.e38e07a",
     "@formio/text-mask-addons": "^3.8.0-formio.3",
     "@formio/vanilla-text-mask": "^5.1.1-formio.1",
     "abortcontroller-polyfill": "^1.7.5",

src/Webform.js

@@ -660,6 +660,7 @@ export default class Webform extends NestedDataComponent {
         try {
             // Do not set the form again if it has been already set
             if (isFormAlreadySet && JSON.stringify(this._form) === JSON.stringify(form)) {
+                this.formReadyResolve();
                 return Promise.resolve();
             }
 
@@ -671,11 +672,13 @@ export default class Webform extends NestedDataComponent {
             }
 
             if (this.parent?.component?.modalEdit) {
+                this.formReadyResolve();
                 return Promise.resolve();
             }
         } catch (err) {
             console.warn(err);
             // If provided form is not a valid JSON object, do not set it too
+            this.formReadyReject(err);
             return Promise.resolve();
         }
 
@@ -959,6 +962,9 @@ export default class Webform extends NestedDataComponent {
     }
 
     getValue() {
+        if (!this._submission) {
+            this._submission = {};
+        }
         if (!this._submission.data) {
             this._submission.data = {};
         }
@@ -1271,32 +1277,24 @@ export default class Webform extends NestedDataComponent {
         }
 
         // Mark any components as invalid if in a custom message.
+        const componentErrors = {};
         errors.forEach((err) => {
-            const { components = [] } = err;
-            if (err.component) {
-                components.push(err.component);
+            const path = err.path || err.context?.path || err.component?.key;
+            if (!componentErrors[path]) {
+                componentErrors[path] = [];
             }
+            componentErrors[path].push(err);
+        });
 
-            if (err.path) {
-                components.push(err.path);
+        // Iterate through all of our component errors and apply them to the components.
+        for (let path in componentErrors) {
+            const component = this.getComponent(path);
+            const errors = componentErrors[path];
+            if (component) {
+                component.serverErrors = errors.filter((err) => err.fromServer);
+                component.setCustomValidity(errors, true)
             }
-
-            components.forEach((path) => {
-                const originalPath = getStringFromComponentPath(path);
-                const component = this.getComponent(path, _.identity, originalPath);
-
-                if (err.fromServer) {
-                    if (component.serverErrors) {
-                        component.serverErrors.push(err);
-                    } else {
-                        component.serverErrors = [err];
-                    }
-                }
-                const components = _.compact(Array.isArray(component) ? component : [component]);
-
-                components.forEach((component) => component.setCustomValidity(err.message, true));
-            });
-        });
+        }
 
         const displayedErrors = [];
         if (errors.length) {
@@ -1521,7 +1519,7 @@ export default class Webform extends NestedDataComponent {
         });
     }
 
-    submitForm(options = {}) {
+    submitForm(options = {}, local = false) {
         this.clearServerErrors();
 
         return new Promise((resolve, reject) => {
@@ -1556,6 +1554,7 @@ export default class Webform extends NestedDataComponent {
                                 return reject("Invalid Submission");
                             }
                             const errors = this.validate(submission.data, {
+                                local,
                                 dirty: true,
                                 silentCheck: false,
                                 process: "submit",
@@ -1575,11 +1574,11 @@ export default class Webform extends NestedDataComponent {
 
                     this.everyComponent((comp) => {
                         if (submission._vnote && comp.type === "form" && comp.component.reference) {
-                            _.get(submission.data, comp.path, {})._vnote = submission._vnote;
+                            _.get(submission.data, local ? comp.paths?.localDataPath : comp.path, {})._vnote = submission._vnote;
                         }
                         const { persistent } = comp.component;
                         if (persistent === "client-only") {
-                            _.unset(submission.data, comp.path);
+                            _.unset(submission.data, local ? comp.paths?.localDataPath : comp.path);
                         }
                     });
 
@@ -1777,7 +1776,7 @@ export default class Webform extends NestedDataComponent {
             return;
         }
         const captchaComponent = [];
-        eachComponent(this.components, (component) => {
+        this.eachComponent((component) => {
             if (/^(re)?captcha$/.test(component.type) && component.component.eventType === 'formLoad') {
                 captchaComponent.push(component);
             }

src/Wizard.js

@@ -432,7 +432,7 @@ export default class Wizard extends Webform {
 
   attachHeader() {
     const isAllowPrevious = this.isAllowPrevious();
-    this.attachTooltips(this.refs[`${this.wizardKey}-tooltip`], this.currentPanel.tooltip);
+    this.attachTooltips(this.refs[`${this.wizardKey}-tooltip`], this.currentPanel?.tooltip);
 
     if (this.isBreadcrumbClickable() || isAllowPrevious) {
       this.refs[`${this.wizardKey}-link`]?.forEach((link, index) => {
@@ -1080,7 +1080,7 @@ export default class Wizard extends Webform {
           errors = [...errors, ...subWizard.errors]
         }
       })
-    };
+    }
     return super.showErrors(errors, triggerEvent)
   }
 

src/components/Components.js

@@ -1,7 +1,6 @@
 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;
@@ -57,35 +56,6 @@ export default class Components {
     Components.components[name] = comp;
   }
 
-  /**
-   * Return a path of component's value.
-   * @param {Component} component - The component instance.
-   * @returns {string} - The component's value path.
-   */
-  static getComponentPath(component) {
-    let path = '';
-    const componentKey = getComponentKey(component.component);
-    if (componentKey) {
-      let thisPath = component.options?.parent || component;
-      while (thisPath && !thisPath.allowData && thisPath.parent) {
-        thisPath = thisPath.parent;
-      }
-      // TODO: any component that is nested in e.g. a Data Grid or an Edit Grid is going to receive a row prop; the problem
-      // is that options.row is passed to each further nested component, which results in erroneous paths like
-      // `editGrid[0].container[0].textField` rather than `editGrid[0].container.textField`. This should be adapted for other
-      // components with a tree-like data model
-      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, '.');
-    }
-    return path;
-  }
-
   static create(component, options, data) {
     let comp = null;
     if (component.type && Components.components.hasOwnProperty(component.type)) {
@@ -110,9 +80,7 @@ export default class Components {
     else {
       comp = new Component(component, options, data);
     }
-    const path = Components.getComponentPath(comp);
-    if (path) {
-      comp.path = path;
+    if (comp.path) {
       comp.componentsMap[comp.path] = comp;
     }
     return comp;

src/components/_classes/component/Component.js

@@ -8,7 +8,7 @@
 import { Formio } from '../../../Formio';
 import * as FormioUtils from '../../../utils/utils';
 import {
-  fastCloneDeep, boolValue, getComponentPath, isInsideScopingComponent, currentTimezone, getScriptPlugin
+  fastCloneDeep, boolValue, isInsideScopingComponent, currentTimezone, getScriptPlugin, getContextualRowData
 } from '../../../utils/utils';
 import Element from '../../../Element';
 import ComponentModal from '../componentModal/ComponentModal';
@@ -256,6 +256,11 @@
      */
     this._hasCondition = null;
 
+    /**
+     * The row index for this component.
+     */
+    this._rowIndex = undefined;
+
     /**
      * References to dom elements
      */
@@ -270,12 +275,6 @@
       _.merge(component, this.options.components[component.type]);
     }
 
-    /**
-     * The data path to this specific component instance.
-     * @type {string}
-     */
-    this.path = component?.key || '';
-
     /**
      * An array of all the children components errors.
      */
@@ -360,6 +359,14 @@
      */
     this.parent = this.options.parent;
 
+    /**
+     * The component paths for this component.
+     * @type {import('@formio/core').ComponentPaths} - The component paths.
+     */
+    this.paths = FormioUtils.getComponentPaths(this.component, this.parent?.component, {
+      ...this.parent?.paths,
+      dataIndex: this.options.rowIndex === undefined ? this.parent?.paths?.dataIndex : this.options.rowIndex
+    });
     this.options.name = this.options.name || 'data';
 
     this._path = '';
@@ -479,12 +486,7 @@
   /* eslint-enable max-statements */
 
   get componentsMap() {
-    if (this.localRoot?.childComponentsMap) {
-      return this.localRoot.childComponentsMap;
-    }
-    const localMap = {};
-    localMap[this.path] = this;
-    return localMap;
+    return this.root.childComponentsMap;
   }
 
   get data() {
@@ -541,6 +543,27 @@
     }
   }
 
+  /**
+   * Get Row Index.
+   * @returns {number} - The row index.
+   */
+  get rowIndex() {
+    return this._rowIndex;
+  }
+
+  /**
+   * Set Row Index to row and update each component.
+   * @param {number} value - The row index.
+   * @returns {void}
+   */
+  set rowIndex(value) {
+    this.paths = FormioUtils.getComponentPaths(this.component, this.parent?.component, {
+      ...(this.parent?.paths || {}),
+      ...{ dataIndex: value }
+    });
+    this._rowIndex = value;
+  }
+
   afterComponentAssign() {
     //implement in extended classes
   }
@@ -623,6 +646,14 @@
     return _.get(this.component, 'key', '');
   }
 
+  get path() {
+    return this.paths.dataPath;
+  }
+
+  set path(path) {
+    throw new Error('Should not be setting the path of a component.');
+  }
+
   set parentVisible(value) {
     this._parentVisible = value;
   }
@@ -1457,7 +1488,7 @@
       this.refresh(this.data, changed, flags);
     }
     else if (
-      (changePath && getComponentPath(changed.instance) === refreshData) && changed && changed.instance &&
+      (changePath && (changed.instance?.paths?.localPath === refreshData)) && changed && changed.instance &&
       // Make sure the changed component is not in a different "context". Solves issues where refreshOn being set
       // in fields inside EditGrids could alter their state from other rows (which is bad).
       this.inContext(changed.instance)
@@ -2969,7 +3000,7 @@
 
   /**
    * Returns if the value (e.g. array) should be divided between several inputs
    * @returns {boolean}
    */
   isSingleInputValue() {
     return false;
@@ -3311,6 +3342,9 @@
    * @returns {string} - The message to show when the component is invalid.
    */
   invalidMessage(data, dirty, ignoreCondition, row) {
+    if (!row) {
+      row = getContextualRowData(this.component, data, this.paths);
+    }
     if (!ignoreCondition && !this.checkCondition(row, data)) {
       return '';
     }
@@ -3331,6 +3365,8 @@
       data,
       row,
       path: this.path || this.component.key,
+      parent: this.parent?.component,
+      paths: this.paths,
       scope: validationScope,
       instance: this,
       processors: [
@@ -3388,7 +3424,7 @@
     if (flags.silentCheck) {
       return [];
     }
-    let isDirty = this.dirty || flags.dirty;
+    let isDirty = (flags.dirty === false) ? false : (this.dirty || flags.dirty);
     if (this.options.alwaysDirty) {
       isDirty = true;
     }
@@ -3414,7 +3450,10 @@
       component: this.component,
       data,
       row,
+      local: !!flags.local,
       value: this.validationValue,
+      parent: this.parent?.component,
+      paths: this.paths,
       path: this.path || this.component.key,
       instance: this,
       form: this.root ? this.root._form : {},