@formio/js 5.4.0 → 5.4.2

package/lib/cjs/components/panel/editForm/Panel.edit.display.js

@@ -92,10 +92,7 @@ exports.default = [
                 defaultValue: true,
                 customConditional({ data = {}, buildingForm = {} }) {
                     const formSettings = buildingForm.settings || {};
-                    return ![
-                        data.breadcrumb,
-                        formSettings.wizardBreadcrumbsType,
-                    ].includes('none');
+                    return ![data.breadcrumb, formSettings.wizardBreadcrumbsType].includes('none');
                 },
             },
             {
@@ -107,10 +104,7 @@ exports.default = [
                 tooltip: 'Determines if the breadcrumb bar is clickable or not for visited tabs.',
                 conditional: {
                     json: {
-                        '===': [
-                            { var: 'data.breadcrumbClickable' },
-                            false,
-                        ],
+                        '===': [{ var: 'data.breadcrumbClickable' }, false],
                     },
                 },
             },
@@ -216,10 +210,7 @@ exports.default = [
         input: true,
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.collapsible' },
-                    true,
-                ],
+                '===': [{ var: 'data.collapsible' }, true],
             },
         },
     },

package/lib/cjs/components/password/Password.js

@@ -26,10 +26,7 @@ class PasswordComponent extends TextField_1.default {
         };
     }
     get defaultSchema() {
-        return lodash_1.default.omit(PasswordComponent.schema(), [
-            'protected',
-            'tableView',
-        ]);
+        return lodash_1.default.omit(PasswordComponent.schema(), ['protected', 'tableView']);
     }
     get inputInfo() {
         const info = super.inputInfo;

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

@@ -14,9 +14,7 @@ class RadioComponent extends ListComponent_1.default {
             inputType: 'radio',
             label: 'Radio',
             key: 'radio',
-            values: [
-                { label: '', value: '' },
-            ],
+            values: [{ label: '', value: '' }],
             data: {
                 url: '',
             },
@@ -60,23 +58,12 @@ class RadioComponent extends ListComponent_1.default {
             return types;
         }
         if (dataType === 'object') {
-            return [
-                object,
-                array,
-            ];
+            return [object, array];
         }
         if (utils_1.componentValueTypes[dataType]) {
-            return [
-                utils_1.componentValueTypes[dataType],
-            ];
+            return [utils_1.componentValueTypes[dataType]];
         }
-        return [
-            boolean,
-            string,
-            number,
-            object,
-            array,
-        ];
+        return [boolean, string, number, object, array];
     }
     constructor(component, options, data) {
         super(component, options, data);
@@ -417,6 +404,9 @@ class RadioComponent extends ListComponent_1.default {
             if (changed) {
                 this.previousValue = this.dataValue;
             }
+            if (!this.visible) {
+                this.previousValue = this.emptyValue;
+            }
             return changed;
         }
         // If they clicked on the radio that is currently selected, it needs to reset the value.

package/lib/cjs/components/radio/editForm/Radio.edit.data.js

@@ -23,9 +23,7 @@ exports.default = [
         },
         onChange(context) {
             if (context && context.flags && context.flags && context.flags.modified) {
-                context.data.values = [
-                    { label: '', value: '' },
-                ];
+                context.data.values = [{ label: '', value: '' }];
             }
         },
     },
@@ -37,9 +35,7 @@ exports.default = [
         tooltip: 'The radio button values that can be picked for this field. Values are text submitted with the form data. Labels are text that appears next to the radio buttons on the form.',
         weight: 10,
         reorder: true,
-        defaultValue: [
-            { label: '', value: '' },
-        ],
+        defaultValue: [{ label: '', value: '' }],
         components: [
             {
                 label: 'Label',
@@ -78,10 +74,7 @@ exports.default = [
         ],
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.dataSrc' },
-                    'values',
-                ],
+                '===': [{ var: 'data.dataSrc' }, 'values'],
             },
         },
     },
@@ -109,10 +102,7 @@ exports.default = [
         key: 'template',
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.dataSrc' },
-                    'url',
-                ],
+                '===': [{ var: 'data.dataSrc' }, 'url'],
             },
         },
     },

package/lib/cjs/components/recaptcha/ReCaptcha.js

@@ -32,10 +32,7 @@ class ReCaptchaComponent extends Component_1.default {
         return [];
     }
     static get conditionOperatorsSettings() {
-        return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { operators: [
-                'isEmpty',
-                'isNotEmpty',
-            ] });
+        return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { operators: ['isEmpty', 'isNotEmpty'] });
     }
     static get serverConditionSettings() {
         return ReCaptchaComponent.conditionOperatorsSettings;
@@ -62,7 +59,7 @@ class ReCaptchaComponent extends Component_1.default {
                 this.recaptchaApiReady = Formio_1.Formio.requireLibrary('googleRecaptcha', 'grecaptcha', recaptchaApiScriptUrl, true);
             }
             else {
-                console.warn('There is no Site Key specified in settings in form JSON');
+                console.warn(this.t('noSiteKey'));
             }
         }
     }
@@ -77,7 +74,7 @@ class ReCaptchaComponent extends Component_1.default {
         return __awaiter(this, void 0, void 0, function* () {
             const siteKey = (0, get_1.default)((_a = this.root) === null || _a === void 0 ? void 0 : _a.form, 'settings.recaptcha.siteKey');
             if (!siteKey) {
-                console.warn('There is no Site Key specified in settings in form JSON');
+                console.warn(this.t('noSiteKey'));
                 return;
             }
             if (!this.recaptchaApiReady) {

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

@@ -17,9 +17,7 @@ class SelectComponent extends ListComponent_1.default {
             key: 'select',
             idPath: 'id',
             data: {
-                values: [
-                    { label: '', value: '' },
-                ],
+                values: [{ label: '', value: '' }],
                 json: '',
                 url: '',
                 resource: '',
@@ -80,12 +78,7 @@ class SelectComponent extends ListComponent_1.default {
                 }
                 return valueComp;
             }, dataTypeOperators: {
-                number: [
-                    'lessThan',
-                    'greaterThan',
-                    'lessThanOrEqual',
-                    'greaterThanOrEqual',
-                ],
+                number: ['lessThan', 'greaterThan', 'lessThanOrEqual', 'greaterThanOrEqual'],
             }, dataTypeValueComponents: {
                 number: {
                     lessThan: numberType,
@@ -103,28 +96,15 @@ class SelectComponent extends ListComponent_1.default {
             return types;
         }
         if (reference) {
-            return [
-                object,
-            ];
+            return [object];
         }
         if (dataType === 'object') {
-            return [
-                object,
-                array,
-            ];
+            return [object, array];
         }
         if (utils_1.componentValueTypes[dataType]) {
-            return [
-                utils_1.componentValueTypes[dataType],
-            ];
-        }
-        return [
-            boolean,
-            string,
-            number,
-            object,
-            array,
-        ];
+            return [utils_1.componentValueTypes[dataType]];
+        }
+        return [boolean, string, number, object, array];
     }
     init() {
         super.init();
@@ -276,11 +256,13 @@ class SelectComponent extends ListComponent_1.default {
         // 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 && !this.element);
+            : this.dataValue === this.normalizeSingleValue(value)) ||
+            (this.inDataTable && !this.element);
         if (shouldUseSelectData) {
-            const selectData = (this.inDataTable && !this.element) ? this.component.selectData : this.selectData;
+            const selectData = this.inDataTable && !this.element ? this.component.selectData : this.selectData;
             if (selectData) {
                 const templateValue = this.component.reference && (value === null || value === void 0 ? void 0 : value._id) ? value._id.toString() : value;
+                const isEqualWithoutData = lodash_1.default.isEqual(data, value) && lodash_1.default.isUndefined(data.data);
                 if (!this.templateData || !this.templateData[templateValue]) {
                     this.getOptionTemplate(data, value);
                 }
@@ -293,7 +275,7 @@ class SelectComponent extends ListComponent_1.default {
                     data = selectData;
                 }
                 // use template data for reference fields to make sure the data is updated
-                if (this.component.reference && this.templateData[templateValue]) {
+                if (this.component.reference && this.templateData[templateValue] && !isEqualWithoutData) {
                     data = this.templateData[templateValue];
                 }
             }
@@ -376,11 +358,7 @@ class SelectComponent extends ListComponent_1.default {
         }
         if (!this.selectOptions.length) {
             // Add the currently selected choices if they don't already exist.
-            const currentChoices = Array.isArray(data) && this.component.multiple
-                ? data
-                : [
-                    data,
-                ];
+            const currentChoices = Array.isArray(data) && this.component.multiple ? data : [data];
             added = this.addCurrentChoices(currentChoices, items);
             if (!added && !this.component.multiple) {
                 this.addPlaceholder();
@@ -519,7 +497,10 @@ class SelectComponent extends ListComponent_1.default {
                     noUpdateEvent: true,
                 });
             }
-            else if (this.shouldAddDefaultValue && !this.options.readOnly && this.root && !this.root.submissionSet) {
+            else if (this.shouldAddDefaultValue &&
+                !this.options.readOnly &&
+                this.root &&
+                !this.root.submissionSet) {
                 // If a default value is provided then select it.
                 const defaultValue = this.defaultValue;
                 if (!this.isEmpty(defaultValue)) {
@@ -668,7 +649,7 @@ class SelectComponent extends ListComponent_1.default {
             component: this.component,
             message: err.toString(),
         });
-        console.warn(`Unable to load resources for ${this.key}`);
+        console.warn(this.t('loadResourcesError', { componentKey: this.key }));
     }
     /**
      * Get the request headers for this select dropdown.
@@ -807,7 +788,7 @@ class SelectComponent extends ListComponent_1.default {
             }
         }
         else if (this.component.dataSrc === 'url' || this.component.dataSrc === 'resource') {
-            this.addOption('', this.t('loading...'));
+            this.addOption('', `${this.t('loading')}...`);
         }
     }
     get active() {
@@ -836,7 +817,9 @@ class SelectComponent extends ListComponent_1.default {
             ? this.component.searchEnabled
             : true;
         const hasPlaceholder = !!this.component.placeholder && !((_a = this.options) === null || _a === void 0 ? void 0 : _a.readOnly);
-        const placeholderValue = hasPlaceholder ? this.t(this.component.placeholder, { _userInput: true }) : null;
+        const placeholderValue = hasPlaceholder
+            ? this.sanitize(this.t(this.component.placeholder, { _userInput: true }), true)
+            : null;
         let customOptions = this.component.customOptions || {};
         if (typeof customOptions == 'string') {
             try {
@@ -854,15 +837,9 @@ class SelectComponent extends ListComponent_1.default {
         return Object.assign({ removeItemButton: this.component.disabled
                 ? false
                 : lodash_1.default.get(this.component, 'removeItemButton', true), itemSelectText: '', classNames: {
-                containerOuter: [
-                    'choices',
-                    'form-group',
-                    'formio-choices',
-                ],
+                containerOuter: ['choices', 'form-group', 'formio-choices'],
                 containerInner: this.transform('class', 'form-control ui fluid selection dropdown').split(' '),
-            }, addItemText: false, allowHTML: true, placeholder: hasPlaceholder, placeholderValue: placeholderValue, noResultsText: this.t('No results found'), noChoicesText: this.t('No choices to choose from'), searchPlaceholderValue: this.t('Type to search'), shouldSort: false, position: this.component.dropdown || 'auto', searchEnabled: useSearch, searchChoices: !this.component.searchField, searchFields: lodash_1.default.get(this, 'component.searchFields', [
-                'label',
-            ]), shadowRoot: this.root ? this.root.shadowRoot : null, fuseOptions: this.component.useExactSearch
+            }, addItemText: false, allowHTML: true, placeholder: hasPlaceholder, placeholderValue: placeholderValue, noResultsText: this.t('noResultsFound'), noChoicesText: this.t('noChoices'), searchPlaceholderValue: this.t('typeToSearch'), shouldSort: false, position: this.component.dropdown || 'auto', searchEnabled: useSearch, searchChoices: !this.component.searchField, searchFields: lodash_1.default.get(this, 'component.searchFields', ['label']), shadowRoot: this.root ? this.root.shadowRoot : null, fuseOptions: this.component.useExactSearch
                 ? Object.assign({ tokenize: true, matchAllTokens: true }, commonFuseOptions) : Object.assign({}, lodash_1.default.get(this, 'component.fuseOptions', {}), Object.assign({ include: 'score', threshold: lodash_1.default.get(this, 'component.selectThreshold', 0.3) }, commonFuseOptions)), valueComparer: lodash_1.default.isEqual, resetScrollPosition: false, duplicateItemsAllowed: false }, customOptions);
     }
     attach(element) {
@@ -886,7 +863,7 @@ class SelectComponent extends ListComponent_1.default {
         }
         this.addEventListener(input, this.inputInfo.changeEvent, () => {
             this.updateValue(null, {
-                modified: true
+                modified: true,
             });
         });
         this.attachRefreshOnBlur();
@@ -902,10 +879,7 @@ class SelectComponent extends ListComponent_1.default {
             }
             this.addEventListener(input, 'keydown', (event) => {
                 const { key } = event;
-                if ([
-                    'Backspace',
-                    'Delete',
-                ].includes(key)) {
+                if (['Backspace', 'Delete'].includes(key)) {
                     this.setValue(this.emptyValue);
                 }
             });
@@ -1017,10 +991,7 @@ class SelectComponent extends ListComponent_1.default {
                         // If valueProperty is set, replace the submission with the corresponding value
                         let value = this.valueProperty ? lodash_1.default.get(submission, this.valueProperty) : submission;
                         if (this.component.multiple) {
-                            value = [
-                                ...this.dataValue,
-                                value,
-                            ];
+                            value = [...this.dataValue, value];
                         }
                         this.setValue(value);
                         this.triggerUpdate();
@@ -1031,7 +1002,7 @@ class SelectComponent extends ListComponent_1.default {
         }
         // Force the disabled state with getters and setters.
         this.disabled = this.shouldDisabled;
-        this.triggerUpdate();
+        this.triggerUpdate(null, !lodash_1.default.isEmpty(this.data[this.key]) && this.itemsFromUrl);
         return superAttach;
     }
     setDropdownPosition() {
@@ -1089,9 +1060,7 @@ class SelectComponent extends ListComponent_1.default {
     attachRefreshOnBlur() {
         if (this.component.refreshOnBlur) {
             this.on('blur', (instance) => {
-                this.checkRefreshOn([
-                    { instance, value: instance.dataValue },
-                ], { fromBlur: true });
+                this.checkRefreshOn([{ instance, value: instance.dataValue }], { fromBlur: true });
             });
         }
     }
@@ -1136,7 +1105,7 @@ class SelectComponent extends ListComponent_1.default {
             return false;
         }
         const notFoundValuesToAdd = [];
-        const added = values.reduce((defaultAdded, value) => {
+        const added = values.reduce((defaultAdded, value, i) => {
             if (!value || lodash_1.default.isEmpty(value)) {
                 return defaultAdded;
             }
@@ -1155,6 +1124,10 @@ class SelectComponent extends ListComponent_1.default {
                         return false;
                     }
                     const itemValue = keyValue ? choice.value : this.itemValue(choice, isSelectOptions);
+                    if (this.component.reference && itemValue._id === value._id) {
+                        lodash_1.default.set(values, i, itemValue);
+                        value = itemValue;
+                    }
                     found |= lodash_1.default.isEqual(itemValue, value);
                     return found ? false : true;
                 });
@@ -1282,7 +1255,7 @@ class SelectComponent extends ListComponent_1.default {
             return normalize[dataType]().value;
         }
         catch (err) {
-            console.warn('Failed to normalize value', err);
+            console.warn(this.t('failedToNormalize'), err);
             return value;
         }
     }
@@ -1299,8 +1272,7 @@ class SelectComponent extends ListComponent_1.default {
     }
     setMetadata(value, flags = {}) {
         var _a, _b;
-        if (lodash_1.default.isNil(value) ||
-            (this.inDataTable && this.component.dataSrc === 'values')) {
+        if (lodash_1.default.isNil(value)) {
             return;
         }
         const valueIsObject = lodash_1.default.isObject(value);
@@ -1339,8 +1311,7 @@ class SelectComponent extends ListComponent_1.default {
             }
             lodash_1.default.set(submission.metadata.selectData, this.path, templateData);
         }
-        else if (!this.templateData[templateValue] &&
-            this.isEmpty(value)) {
+        else if (!this.templateData[templateValue] && this.isEmpty(value)) {
             lodash_1.default.unset(this.root.submission, `metadata.selectData.${this.path}`);
         }
         if (flags.resetValue && ((_b = this.root) === null || _b === void 0 ? void 0 : _b.submission) && !this.options.readOnly) {
@@ -1439,11 +1410,7 @@ class SelectComponent extends ListComponent_1.default {
             if (hasValue) {
                 this.choices.removeActiveItems();
                 // Add the currently selected choices if they don't already exist.
-                const currentChoices = Array.isArray(value) && this.component.multiple
-                    ? value
-                    : [
-                        value,
-                    ];
+                const currentChoices = Array.isArray(value) && this.component.multiple ? value : [value];
                 if (!this.addCurrentChoices(currentChoices, this.selectOptions, true)) {
                     this.choices.setChoices(this.selectOptions, 'value', 'label', true);
                 }
@@ -1455,11 +1422,7 @@ class SelectComponent extends ListComponent_1.default {
         }
         else {
             if (hasValue) {
-                const values = Array.isArray(value)
-                    ? value
-                    : [
-                        value,
-                    ];
+                const values = Array.isArray(value) ? value : [value];
                 if ((!lodash_1.default.isEqual(this.dataValue, this.defaultValue) && this.selectOptions.length < 2) ||
                     (this.selectData && flags.fromSubmission)) {
                     const { value, label } = this.selectValueAndLabel(this.dataValue);
@@ -1504,7 +1467,7 @@ class SelectComponent extends ListComponent_1.default {
                         return JSON.stringify(normalizedOptionValue) === JSON.stringify(value);
                     }
                     catch (err) {
-                        console.warn.error('Error while comparing items', err);
+                        console.warn.error(this.t('failedToCompareItems'), err);
                         return false;
                     }
                 };
@@ -1601,11 +1564,14 @@ class SelectComponent extends ListComponent_1.default {
         var _a;
         value = value !== null && value !== void 0 ? value : this.getValue();
         if (options.modalPreview ||
-            ((this.inDataTable || this.inEditGrid) && !['values', 'custom'].includes(this.component.dataSrc))) {
+            ((this.inDataTable || this.inEditGrid) &&
+                !['values', 'custom'].includes(this.component.dataSrc))) {
             if (this.inDataTable) {
                 value = this.undoValueTyping(value);
             }
-            const templateValue = this.isEntireObjectDisplay() && !lodash_1.default.isObject(value.data) ? { data: value } : value;
+            const templateValue = !lodash_1.default.isEmpty(value) && this.isEntireObjectDisplay() && !lodash_1.default.isObject(value.data)
+                ? { data: value }
+                : value;
             const template = this.itemTemplate(templateValue, value, options);
             return template;
         }
@@ -1629,11 +1595,7 @@ class SelectComponent extends ListComponent_1.default {
             return data;
         };
         value = convertToString(value);
-        if ([
-            'values',
-            'custom',
-        ].includes(this.component.dataSrc) &&
-            !this.asyncCustomValues()) {
+        if (['values', 'custom'].includes(this.component.dataSrc) && !this.asyncCustomValues()) {
             const { items, valueProperty } = this.component.dataSrc === 'values'
                 ? {
                     items: convertToString(this.getNormalizedValues(), 'value'),
@@ -1644,10 +1606,7 @@ class SelectComponent extends ListComponent_1.default {
                     valueProperty: this.valueProperty,
                 };
             const getFromValues = () => {
-                const initialValue = lodash_1.default.find(items, [
-                    valueProperty,
-                    value,
-                ]);
+                const initialValue = lodash_1.default.find(items, [valueProperty, value]);
                 const values = this.defaultSchema.data.values || [];
                 return lodash_1.default.isEqual(initialValue, values[0]) ? '-' : initialValue;
             };
@@ -1703,14 +1662,10 @@ class SelectComponent extends ListComponent_1.default {
     setErrorClasses(elements, dirty, hasError, hasMessages, element = this.element) {
         super.setErrorClasses(elements, dirty, hasError, hasMessages, element);
         if (this.choices) {
-            super.setErrorClasses([
-                this.choices.containerInner.element,
-            ], dirty, hasError, hasMessages, element);
+            super.setErrorClasses([this.choices.containerInner.element], dirty, hasError, hasMessages, element);
         }
         else {
-            super.setErrorClasses([
-                this.refs.selectContainer,
-            ], dirty, hasError, hasMessages, element);
+            super.setErrorClasses([this.refs.selectContainer], dirty, hasError, hasMessages, element);
         }
     }
 }