@formio/js 5.0.1-rc.2 → 5.1.0-dev.5959.e361e82

package/lib/cjs/components/datamap/DataMap.js

@@ -8,7 +8,6 @@ const DataGrid_1 = __importDefault(require("../datagrid/DataGrid"));
 const lodash_1 = __importDefault(require("lodash"));
 const eventemitter3_1 = __importDefault(require("eventemitter3"));
 const utils_1 = require("../../utils/utils");
-const Components_1 = __importDefault(require("../Components"));
 class DataMapComponent extends DataGrid_1.default {
     static schema(...extend) {
         return Component_1.default.schema({
@@ -75,7 +74,7 @@ class DataMapComponent extends DataGrid_1.default {
     }
     get dataValue() {
         if (!this.key ||
-            (!this.visible && this.component.clearOnHide)) {
+            (this.conditionallyHidden && this.component.clearOnHide)) {
             return this.emptyValue;
         }
         if (!this.hasValue() && this.shouldAddDefaultValue) {
@@ -232,6 +231,7 @@ class DataMapComponent extends DataGrid_1.default {
         options.events = new eventemitter3_1.default();
         options.name += `[${rowIndex}]`;
         options.row = `${rowIndex}`;
+        options.rowIndex = rowIndex;
         const components = {};
         components['__key'] = this.createComponent(this.keySchema, options, { __key: this.builderMode ? this.defaultRowKey : key });
         components['__key'].on('componentChange', (event) => {
@@ -241,7 +241,6 @@ class DataMapComponent extends DataGrid_1.default {
             delete dataValue[key];
             const comp = components[this.valueKey];
             comp.component.key = newKey;
-            comp.path = Components_1.default.getComponentPath(comp);
             key = newKey;
         });
         const valueComponent = lodash_1.default.clone(this.component.valueComponent);

package/lib/cjs/components/day/Day.d.ts

@@ -85,7 +85,7 @@ export default class DayComponent extends Field {
     }[] | undefined;
     setErrorClasses(elements: any, dirty: any, hasError: any): void;
     dayFirst: any;
-    render(): Field;
+    render(): string;
     renderField(name: any): any;
     attach(element: any): Promise<void>;
     set disabled(disabled: any);

package/lib/cjs/components/editgrid/EditGrid.d.ts

@@ -43,7 +43,7 @@ export default class EditGridComponent extends NestedArrayComponent {
     get defaultValue(): any[];
     hasRemoveButtons(): boolean;
     editRows: any;
-    checkRowVariableTypeComponents(editRow: any, rowIndex: any): void;
+    checkRowVariableTypeComponents(editRow: any, rowIndex: any): boolean;
     setVariableTypeComponents(): void;
     variableTypeComponentsIndexes: any[] | undefined;
     isOpen(editRow: any): boolean;

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

@@ -294,12 +294,15 @@ class EditGridComponent extends NestedArrayComponent_1.default {
     }
     checkRowVariableTypeComponents(editRow, rowIndex) {
         const rowComponents = editRow.components;
+        let typeChanged = false;
         if (lodash_1.default.some(this.variableTypeComponentsIndexes, (compIndex) => {
             const variableTypeComp = rowComponents[compIndex];
             return variableTypeComp.type !== variableTypeComp.component.type;
         })) {
             editRow.components = this.createRowComponents(editRow.data, rowIndex, true);
+            typeChanged = true;
         }
+        return typeChanged;
     }
     setVariableTypeComponents() {
         //set components which type is changing within a row (e.g.,by mergeComponentSchema action)
@@ -677,6 +680,11 @@ class EditGridComponent extends NestedArrayComponent_1.default {
                 }
             },
         }, this.component.saveRow || 'Save'));
+        this.emit('editGridOpenModal', {
+            component: this.component,
+            row: editRow,
+            instance: this,
+        });
         return this.attachComponents(modalContent, components);
     }
     showDialog(rowIndex) {
@@ -734,6 +742,11 @@ class EditGridComponent extends NestedArrayComponent_1.default {
             editRow.data = dataSnapshot;
             this.restoreRowContext(editRow);
         }
+        this.emit('editGridEditRow', {
+            component: this.component,
+            row: editRow,
+            instance: this,
+        });
         if (this.component.modal) {
             return this.addRowModal(rowIndex);
         }
@@ -924,6 +937,7 @@ class EditGridComponent extends NestedArrayComponent_1.default {
             const options = lodash_1.default.clone(this.options);
             options.name += `[${rowIndex}]`;
             options.row = `${rowIndex}-${colIndex}`;
+            options.rowIndex = rowIndex;
             options.onChange = (flags = {}, changed, modified) => {
                 var _a, _b;
                 if (((_a = changed.instance.root) === null || _a === void 0 ? void 0 : _a.id) && (((_b = this.root) === null || _b === void 0 ? void 0 : _b.id) !== changed.instance.root.id)) {
@@ -938,11 +952,13 @@ class EditGridComponent extends NestedArrayComponent_1.default {
                 const editRow = this.editRows[rowIndex];
                 if (editRow) {
                     this.processRow('checkData', null, Object.assign(Object.assign({}, flags), { changed }), editRow.data, editRow.components);
-                    this.validateRow(editRow, false);
+                    this.validateRow(editRow, false, false);
                 }
                 if (this.variableTypeComponentsIndexes.length) {
-                    this.checkRowVariableTypeComponents(editRow, rowIndex);
-                    this.redraw();
+                    const typeChanged = this.checkRowVariableTypeComponents(editRow, rowIndex);
+                    if (typeChanged) {
+                        this.redraw();
+                    }
                 }
             };
             const comp = this.createComponent(lodash_1.default.assign({}, column, { row: options.row }), options, row, null, recreatePartially && currentRowComponents ? currentRowComponents[colIndex] : null);
@@ -977,25 +993,24 @@ class EditGridComponent extends NestedArrayComponent_1.default {
             dirty;
     }
     validateRow(editRow, dirty, forceSilentCheck, fromSubmission) {
-        var _a;
+        var _a, _b;
         editRow.errors = [];
         if (this.shouldValidateRow(editRow, dirty, fromSubmission)) {
-            const silentCheck = (this.component.rowDrafts && !this.shouldValidateDraft(editRow)) || forceSilentCheck;
+            const silentCheck = forceSilentCheck === false ? false : ((this.component.rowDrafts && !this.shouldValidateDraft(editRow)) || forceSilentCheck);
             const rootValue = (0, utils_1.fastCloneDeep)(this.rootValue);
             const editGridValue = lodash_1.default.get(rootValue, this.path, []);
             editGridValue[editRow.rowIndex] = editRow.data;
             lodash_1.default.set(rootValue, this.path, editGridValue);
             const validationProcessorProcess = (context) => this.validationProcessor(context, { dirty, silentCheck });
             const errors = (0, process_1.processSync)({
-                components: (0, utils_1.fastCloneDeep)(this.component.components).map((component) => {
-                    component.parentPath = `${this.path}[${editRow.rowIndex}]`;
-                    return component;
-                }),
+                components: this.component.components,
                 data: rootValue,
                 row: editRow.data,
                 process: 'validateRow',
                 instances: this.componentsMap,
                 scope: { errors: [] },
+                parent: this.component,
+                parentPaths: Object.assign(Object.assign({}, this.paths), { dataIndex: editRow.rowIndex }),
                 processors: [
                     {
                         process: validationProcessorProcess,
@@ -1027,9 +1042,12 @@ class EditGridComponent extends NestedArrayComponent_1.default {
                 });
             }
         }
-        if (!this.component.rowDrafts || ((_a = this.root) === null || _a === void 0 ? void 0 : _a.submitted)) {
+        if (editRow.alerts && (!this.component.rowDrafts || ((_a = this.root) === null || _a === void 0 ? void 0 : _a.submitted))) {
             this.showRowErrorAlerts(editRow, editRow.errors);
         }
+        else if ((_b = editRow.errors) === null || _b === void 0 ? void 0 : _b.length) {
+            this.setCustomValidity(editRow.errors, dirty);
+        }
         return editRow.errors;
     }
     showRowErrorAlerts(editRow, errors) {
@@ -1141,7 +1159,7 @@ class EditGridComponent extends NestedArrayComponent_1.default {
             }
         }
         const changed = this.hasChanged(value, this.dataValue);
-        if (this.parent && !this.options.server) {
+        if (this.parent) {
             this.parent.checkComponentConditions();
         }
         this.dataValue = value;
@@ -1174,10 +1192,7 @@ class EditGridComponent extends NestedArrayComponent_1.default {
         this.editRows = this.editRows.slice(0, dataLength);
         this.openWhenEmpty();
         this.updateOnChange(flags, changed);
-        // do not call checkData with server option, it is called when change is triggered in updateOnChange
-        if (!this.options.server) {
-            this.checkData();
-        }
+        this.checkData();
         this.changeState(changed, flags);
         return changed;
     }

package/lib/cjs/components/file/File.d.ts

@@ -33,7 +33,7 @@ export default class FileComponent extends Field {
     get dataReady(): Promise<any>;
     loadImage(fileInfo: any): any;
     get emptyValue(): never[];
-    getValueAsString(value: any): any;
+    getValueAsString(value: any, options: any): any;
     get defaultValue(): any[];
     get hasTypes(): any;
     _fileBrowseHidden: any;
@@ -45,7 +45,7 @@ export default class FileComponent extends Field {
         type: number;
         actions: number;
     };
-    render(): Field;
+    render(): string;
     getVideoStream(constraints: any): any;
     stopVideoStream(videoStream: any): void;
     getFrame(videoPlayer: any): Promise<any>;

package/lib/cjs/components/file/File.js

@@ -114,7 +114,12 @@ class FileComponent extends Field_1.default {
     get emptyValue() {
         return [];
     }
-    getValueAsString(value) {
+    getValueAsString(value, options) {
+        if ((options === null || options === void 0 ? void 0 : options.review) && !this.component.uploadOnly) {
+            return lodash_1.default.map(value, (val, index) => {
+                return `<a href="${val.url || '#'}" target="_blank" data-path='${this.path}' data-fileindex='${index}'>${val.originalName}</a>`;
+            }).join(', ');
+        }
         if (lodash_1.default.isArray(value)) {
             return lodash_1.default.map(value, 'originalName').join(', ');
         }

package/lib/cjs/components/form/Form.d.ts

@@ -21,7 +21,7 @@ export default class FormComponent extends Component {
     get useOriginalRevision(): any;
     setFormRevision(rev: any): void;
     subFormRevision: any;
-    getComponent(path: any, fn: any): any;
+    getComponent(path: any): any;
     getSubOptions(options?: {}): {};
     render(): string;
     asString(value: any): any;
@@ -55,8 +55,6 @@ export default class FormComponent extends Component {
      */
     loadSubForm(fromAttach: boolean): Promise<any>;
     subFormLoading: boolean | undefined;
-    get subFormData(): any;
-    checkComponentValidity(data: any, dirty: any, row: any, options: any, errors?: any[]): any;
     checkComponentConditions(data: any, flags: any, row: any): any;
     calculateValue(data: any, flags: any, row: any): any;
     setPristine(pristine: any): void;
@@ -90,6 +88,13 @@ export default class FormComponent extends Component {
     isHidden(): boolean;
     setValue(submission: any, flags?: {}): boolean;
     setSubFormValue(submission: any, flags: any): void;
+    /**
+     * Sets the subform value
+     * @param {object|null|undefined} submission - The submission to set.
+     * @param {object|null|undefined} flags - Any flags to apply when setting the submission.
+     * @returns {void}
+     */
+    onSetSubFormValue(submission: object | null | undefined, flags: object | null | undefined): void;
     areAllComponentsEmpty(data: any): boolean;
     updateSubFormVisibility(): void;
     /**

package/lib/cjs/components/form/Form.js

@@ -133,24 +133,19 @@ class FormComponent extends Component_1.default {
             this.subFormRevision = undefined;
         }
     }
-    getComponent(path, fn) {
-        path = (0, utils_1.getArrayFromComponentPath)(path);
-        if (path[0] === 'data') {
-            path.shift();
-        }
-        const originalPathStr = `${this.path}.data.${(0, utils_1.getStringFromComponentPath)(path)}`;
-        if (this.subForm) {
-            return this.subForm.getComponent(path, fn, originalPathStr);
+    getComponent(path) {
+        if (!this.subForm) {
+            return null;
         }
+        return this.subForm.getComponent(path);
     }
     /* eslint-disable max-statements */
     getSubOptions(options = {}) {
         options.events = this.createEmitter();
         // Make sure to not show the submit button in wizards in the nested forms.
         lodash_1.default.set(options, 'buttonSettings.showSubmit', false);
-        // Set the parent options to the subform so those references are stable when the subform is created
+        // Set the parent option to the subform so those references are stable when the subform is created
         options.parent = this;
-        options.parentVisible = this.visible;
         if (!this.options) {
             return options;
         }
@@ -212,6 +207,7 @@ class FormComponent extends Component_1.default {
         if (this.options.skipDraftRestore) {
             options.skipDraftRestore = this.options.skipDraftRestore;
         }
+        options.parent = this;
         return options;
     }
     /* eslint-enable max-statements */
@@ -300,6 +296,7 @@ class FormComponent extends Component_1.default {
                     const modalShouldBeOpened = this.componentModal ? this.componentModal.isOpened : false;
                     const currentValue = modalShouldBeOpened ? this.componentModal.currentValue : this.dataValue;
                     this.componentModal = new ComponentModal_1.default(this, element, modalShouldBeOpened, currentValue, this._referenceAttributeName);
+                    this.subForm.element = this.componentModal.refs.componentContent || this.subForm.element;
                     this.setOpenModalElement();
                 }
                 this.calculateValue();
@@ -398,6 +395,11 @@ class FormComponent extends Component_1.default {
             return (new Form_1.default(form, this.getSubOptions())).ready.then((instance) => {
                 this.subForm = instance;
                 this.subForm.currentForm = this;
+                this.subForm.parentVisible = this.visible;
+                const componentsMap = this.componentsMap;
+                const formComponentsMap = this.subForm.componentsMap;
+                lodash_1.default.assign(componentsMap, formComponentsMap);
+                this.component.components = this.subForm.components.map((comp) => comp.component);
                 this.subForm.on('change', () => {
                     if (this.subForm) {
                         this.dataValue = this.subForm.getValue();
@@ -414,6 +416,8 @@ class FormComponent extends Component_1.default {
                 this.valueChanged = this.hasSetValue;
                 this.onChange();
                 return this.subForm;
+            }).catch((err) => {
+                console.log(err);
             });
         }).then((subForm) => {
             this.updateSubWizards(subForm);
@@ -422,10 +426,11 @@ class FormComponent extends Component_1.default {
         return this.subFormReady;
     }
     hideSubmitButton(component) {
-        const isSubmitButton = (component.type === 'button') &&
-            ((component.action === 'submit') || !component.action);
+        const isSubmitButton = component.type === 'button' && (component.action === 'submit' || !component.action);
         if (isSubmitButton) {
             component.hidden = true;
+            // clearOnHide no longer clears from the JSON `hidden` flag, so we make the button conditionally hidden to clear its data
+            component.customConditional = 'show = false';
         }
     }
     /**
@@ -435,7 +440,7 @@ class FormComponent extends Component_1.default {
      */
     loadSubForm(fromAttach) {
         var _a, _b, _c, _d, _e;
-        if (this.builderMode || this.isHidden() || (this.isSubFormLazyLoad() && !fromAttach)) {
+        if (this.builderMode || this.conditionallyHidden || (this.isSubFormLazyLoad() && !fromAttach)) {
             return Promise.resolve();
         }
         if (this.hasLoadedForm && !this.isRevisionChanged &&
@@ -470,18 +475,6 @@ class FormComponent extends Component_1.default {
         }
         return Promise.resolve();
     }
-    get subFormData() {
-        var _a;
-        return ((_a = this.dataValue) === null || _a === void 0 ? void 0 : _a.data) || {};
-    }
-    checkComponentValidity(data, dirty, row, options, errors = []) {
-        options = options || {};
-        const silentCheck = options.silentCheck || false;
-        if (this.subForm) {
-            return this.subForm.checkValidity(this.subFormData, dirty, null, silentCheck, errors);
-        }
-        return super.checkComponentValidity(data, dirty, row, options, errors);
-    }
     checkComponentConditions(data, flags, row) {
         const visible = super.checkComponentConditions(data, flags, row);
         // Return if already hidden
@@ -489,14 +482,14 @@ class FormComponent extends Component_1.default {
             return visible;
         }
         if (this.subForm) {
-            return this.subForm.checkConditions(this.subFormData);
+            return this.subForm.checkConditions(data, flags, row);
         }
         // There are few cases when subForm is not loaded when a change is triggered,
         // so we need to perform checkConditions after it is ready, or some conditional fields might be hidden in View mode
         else if (this.subFormReady) {
             this.subFormReady.then(() => {
                 if (this.subForm) {
-                    return this.subForm.checkConditions(this.subFormData);
+                    return this.subForm.checkConditions(data, flags, row);
                 }
             });
         }
@@ -504,7 +497,7 @@ class FormComponent extends Component_1.default {
     }
     calculateValue(data, flags, row) {
         if (this.subForm) {
-            return this.subForm.calculateValue(this.subFormData, flags);
+            return this.subForm.calculateValue(data, flags, row);
         }
         return super.calculateValue(data, flags, row);
     }
@@ -519,7 +512,7 @@ class FormComponent extends Component_1.default {
      * @returns {*|boolean} - TRUE if the subform should be submitted, FALSE if it should not.
      */
     get shouldSubmit() {
-        return this.subFormReady && (!this.component.hasOwnProperty('reference') || this.component.reference) && !this.isHidden();
+        return this.subFormReady && (!this.component.hasOwnProperty('reference') || this.component.reference) && !this.conditionallyHidden;
     }
     /**
      * Returns the data for the subform.
@@ -546,7 +539,7 @@ class FormComponent extends Component_1.default {
                 }
                 this.subForm.nosubmit = false;
                 this.subForm.submitted = true;
-                return this.subForm.submitForm().then(result => {
+                return this.subForm.submitForm({}, true).then(result => {
                     this.subForm.loading = false;
                     this.subForm.showAllErrors = false;
                     this.dataValue = result.submission;
@@ -650,9 +643,18 @@ class FormComponent extends Component_1.default {
             });
         }
         else {
-            this.subForm.setValue(submission, flags);
+            this.onSetSubFormValue(submission, flags);
         }
     }
+    /**
+     * Sets the subform value
+     * @param {object|null|undefined} submission - The submission to set.
+     * @param {object|null|undefined} flags - Any flags to apply when setting the submission.
+     * @returns {void}
+     */
+    onSetSubFormValue(submission, flags) {
+        this.subForm.setValue(submission, flags);
+    }
     isEmpty(value = this.dataValue) {
         return value === null || lodash_1.default.isEqual(value, this.emptyValue) || (this.areAllComponentsEmpty(value === null || value === void 0 ? void 0 : value.data) && !(value === null || value === void 0 ? void 0 : value._id));
     }

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

@@ -47,7 +47,7 @@ exports.default = [
         },
         searchField: 'title__regex',
         template: '<span>{{ item._vid }}</span>',
-        valueProperty: '_id',
+        valueProperty: 'revisionId',
         authenticate: true,
         label: 'Form Revision',
         key: 'revision',
@@ -69,7 +69,7 @@ exports.default = [
         input: true,
         weight: 20,
         key: 'reference',
-        label: 'Save as reference',
-        tooltip: 'Using this option will save this field as a reference and link its value to the value of the origin record.'
+        label: 'Submit as reference',
+        tooltip: 'When "Submit as reference" is enabled, the form submission will be recorded against the Parent Form as well as the Child Form. When a submission recorded with "Submit as reference" is edited, the update is applied to each submission made against the Parent Form and Child Form.'
     }
 ];

package/lib/cjs/components/hidden/Hidden.d.ts

@@ -10,7 +10,6 @@ export default class HiddenComponent extends Input {
     };
     get inputInfo(): any;
     labelIsHidden(): boolean;
-    get emptyValue(): string;
     setValue(value: any, flags?: {}): boolean;
 }
 import Input from '../_classes/input/Input';

package/lib/cjs/components/hidden/Hidden.js

@@ -48,7 +48,7 @@ class HiddenComponent extends Input_1.default {
         return true;
     }
     get emptyValue() {
-        return '';
+        return null;
     }
     setValue(value, flags = {}) {
         return this.updateValue(value, flags);

package/lib/cjs/components/html/HTML.js

@@ -56,9 +56,21 @@ class HTMLComponent extends Component_1.default {
     }
     checkRefreshOn(changed) {
         super.checkRefreshOn(changed);
-        if (!this.builderMode && this.component.refreshOnChange && this.element &&
-            !lodash_1.default.isUndefined(changed) && ((lodash_1.default.isBoolean(changed) && changed) || !lodash_1.default.isEmpty(changed)) &&
-            this.conditionallyVisible(this.data, this.row)) {
+        let visible;
+        if (this.hasCondition()) {
+            this._conditionallyHidden = this.checkConditionallyHidden();
+            visible = !this.conditionallyHidden;
+        }
+        else {
+            visible = !this.component.hidden;
+        }
+        const shouldSetContent = !this.builderMode
+            && this.component.refreshOnChange
+            && this.element
+            && !lodash_1.default.isUndefined(changed)
+            && ((lodash_1.default.isBoolean(changed) && changed) || !lodash_1.default.isEmpty(changed))
+            && visible;
+        if (shouldSetContent) {
             this.setContent(this.element, this.renderContent());
         }
     }

package/lib/cjs/components/number/Number.js

@@ -170,14 +170,21 @@ class NumberComponent extends Input_1.default {
         if (typeof input === 'string') {
             input = input.split(this.delimiter).join('').replace(this.decimalSeparator, '.');
         }
-        let value = parseFloat(input);
-        if (!lodash_1.default.isNaN(value)) {
+        let value;
+        if (!lodash_1.default.isNaN(input)) {
             // Format scientific notation
-            if (/e/i.test(String(value))) {
+            if (/[0-9]+[eE]/.test(String(input))) {
+                // Convert to exponential notation will depend on the decimal limit set in the component
+                // Example: 1.23e-5 will be converted to 1.23e-5 if decimal limit is set to 2
+                // Example: 1.23e5 will be converted to 1.23e+5 if decimal limit is set to 2
+                // if decimal limit is 3, 1.23e5 will be converted to 1.230e+5
+                // if decimal limit is not set, 1.23e5 will be converted to 1.23000000000000000000e+5
+                value = parseFloat(input);
                 value = value.toExponential(this.decimalLimit);
             }
             else {
-                value = String(value).replace('.', this.decimalSeparator);
+                value = parseFloat(input);
+                value = !lodash_1.default.isNaN(value) ? String(value).replace('.', this.decimalSeparator) : null;
             }
         }
         else {

package/lib/cjs/components/radio/Radio.d.ts

@@ -28,7 +28,7 @@ export default class RadioComponent extends ListComponent {
     optionsLoaded: boolean | undefined;
     loadedOptions: any[] | undefined;
     beforeSubmit(): Promise<any>;
-    render(): import("../_classes/field/Field").default;
+    render(): string;
     attach(element: any): Promise<void>;
     detach(element: any): void;
     validateValueProperty(): boolean;

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

@@ -293,6 +293,16 @@ class RadioComponent extends ListComponent_1.default {
         if (method.toUpperCase() === 'GET') {
             body = null;
         }
+        const limit = this.component.limit || 100;
+        const skip = this.isScrollLoading ? this.selectOptions.length : 0;
+        // Allow for url interpolation.
+        url = this.sanitize(this.interpolate(url, {
+            formioBase: Formio_1.Formio.getBaseUrl(),
+            search,
+            limit,
+            skip,
+            page: Math.abs(Math.floor(skip / limit))
+        }), this.shouldSanitizeValue);
         // Set ignoreCache if it is
         options.ignoreCache = this.component.ignoreCache;
         // Make the request.

package/lib/cjs/components/select/Select.d.ts

@@ -112,7 +112,7 @@ export default class SelectComponent extends ListComponent {
     activate(): void;
     setLoadingItem(addToCurrentList?: boolean): void;
     get active(): boolean | undefined;
-    render(): import("../_classes/field/Field").default;
+    render(): string;
     wrapElement(element: any): any;
     choicesOptions(): any;
     attach(element: any): Promise<void> | undefined;

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

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const lodash_1 = __importDefault(require("lodash"));
 const Formio_1 = require("../../Formio");
 const ListComponent_1 = __importDefault(require("../_classes/list/ListComponent"));
-const Input_1 = __importDefault(require("../_classes/input/Input"));
 const Form_1 = __importDefault(require("../../Form"));
 const utils_1 = require("../../utils/utils");
 const ChoicesWrapper_1 = __importDefault(require("../../utils/ChoicesWrapper"));
@@ -530,13 +529,13 @@ class SelectComponent extends ListComponent_1.default {
             skip,
         };
         // Allow for url interpolation.
-        url = this.interpolate(url, {
+        url = this.sanitize(this.interpolate(url, {
             formioBase: Formio_1.Formio.getBaseUrl(),
             search,
             limit,
             skip,
             page: Math.abs(Math.floor(skip / limit))
-        });
+        }), this.shouldSanitizeValue);
         // Add search capability.
         if (this.component.searchField && search) {
             const searchValue = Array.isArray(search)
@@ -837,7 +836,7 @@ class SelectComponent extends ListComponent_1.default {
                 this.choices.containerOuter.element.setAttribute('tabIndex', '-1');
                 this.addEventListener(this.choices.containerOuter.element, 'focus', () => this.focusableElement.focus());
             }
-            Input_1.default.prototype.addFocusBlurEvents.call(this, this.focusableElement);
+            this.addFocusBlurEvents(this.choices.input.element);
             if (this.itemsFromUrl && !this.component.noRefreshOnScroll) {
                 this.scrollList = this.choices.choiceList.element;
                 this.addEventListener(this.scrollList, 'scroll', () => this.onScroll());

package/lib/cjs/components/select/editForm/Select.edit.data.d.ts

@@ -1099,6 +1099,7 @@ declare const _default: ({
     alwaysEnabled?: undefined;
 } | {
     key: string;
+    type: string;
     conditional: {
         json: {
             and: ({
@@ -1149,7 +1150,6 @@ declare const _default: ({
         };
     };
     data?: undefined;
-    type?: undefined;
     weight?: undefined;
     input?: undefined;
     label?: undefined;

package/lib/cjs/components/select/editForm/Select.edit.data.js

@@ -641,8 +641,8 @@ exports.default = [
         input: true,
         weight: 25,
         key: 'reference',
-        label: 'Save as reference',
-        tooltip: 'Using this option will save this field as a reference and link its value to the value of the origin record.',
+        label: 'Submit as reference',
+        tooltip: 'Using this option will submit this field as a reference id and link its value to the value of the origin record.',
         conditional: {
             json: { '===': [{ var: 'data.dataSrc' }, 'resource'] },
         },
@@ -687,6 +687,7 @@ exports.default = [
     },
     {
         key: 'selectData',
+        type: 'hidden',
         conditional: {
             json: {
                 and: [

package/lib/cjs/components/signature/Signature.d.ts

@@ -22,7 +22,6 @@ export default class SignatureComponent extends Input {
     showCanvas(show: any): void;
     onDisabled(): void;
     checkSize(force: any, scale: any): void;
-    getModalPreviewTemplate(): any;
     signaturePad: SignaturePad | null | undefined;
     observer: any;
     getValueAsString(value: any): "" | "Yes" | "No";

package/lib/cjs/components/signature/Signature.js

@@ -159,7 +159,9 @@ class SignatureComponent extends Input_1.default {
             if (this.dataValue) {
                 this.setDataToSigaturePad();
             }
-            this.showCanvas(true);
+            if (!this.disabled) {
+                this.showCanvas(true);
+            }
         }
     }
     renderElement(value, index) {
@@ -172,7 +174,7 @@ class SignatureComponent extends Input_1.default {
         return false;
     }
     getModalPreviewTemplate() {
-        return this.renderTemplate('modalPreview', {
+        return this.renderModalPreview({
             previewText: this.dataValue ?
                 `<img src=${this.dataValue} ${this._referenceAttributeName}='openModal' style="width: 100%;height: 100%;" />` :
                 this.t('Click to Sign')