@formio/js 5.4.0 → 5.4.2

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

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

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

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

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

@@ -9,9 +9,7 @@ export default class RadioComponent extends ListComponent {
             inputType: 'radio',
             label: 'Radio',
             key: 'radio',
-            values: [
-                { label: '', value: '' },
-            ],
+            values: [{ label: '', value: '' }],
             data: {
                 url: '',
             },
@@ -61,23 +59,12 @@ export default class RadioComponent extends ListComponent {
             return types;
         }
         if (dataType === 'object') {
-            return [
-                object,
-                array,
-            ];
+            return [object, array];
         }
         if (componentValueTypes[dataType]) {
-            return [
-                componentValueTypes[dataType],
-            ];
+            return [componentValueTypes[dataType]];
         }
-        return [
-            boolean,
-            string,
-            number,
-            object,
-            array,
-        ];
+        return [boolean, string, number, object, array];
     }
     constructor(component, options, data) {
         super(component, options, data);
@@ -415,6 +402,9 @@ export default class RadioComponent extends ListComponent {
             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/mjs/components/radio/editForm/Radio.edit.data.js

@@ -18,9 +18,7 @@ export default [
         },
         onChange(context) {
             if (context && context.flags && context.flags && context.flags.modified) {
-                context.data.values = [
-                    { label: '', value: '' },
-                ];
+                context.data.values = [{ label: '', value: '' }];
             }
         },
     },
@@ -32,9 +30,7 @@ export 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',
@@ -73,10 +69,7 @@ export default [
         ],
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.dataSrc' },
-                    'values',
-                ],
+                '===': [{ var: 'data.dataSrc' }, 'values'],
             },
         },
     },
@@ -104,10 +97,7 @@ export default [
         key: 'template',
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.dataSrc' },
-                    'url',
-                ],
+                '===': [{ var: 'data.dataSrc' }, 'url'],
             },
         },
     },

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

@@ -20,10 +20,7 @@ export default class ReCaptchaComponent extends Component {
     static get conditionOperatorsSettings() {
         return {
             ...super.conditionOperatorsSettings,
-            operators: [
-                'isEmpty',
-                'isNotEmpty',
-            ],
+            operators: ['isEmpty', 'isNotEmpty'],
         };
     }
     static get serverConditionSettings() {
@@ -50,7 +47,7 @@ export default class ReCaptchaComponent extends Component {
                 this.recaptchaApiReady = 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'));
             }
         }
     }
@@ -63,7 +60,7 @@ export default class ReCaptchaComponent extends Component {
     async verify(actionName) {
         const siteKey = _get(this.root?.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/mjs/components/select/Select.js

@@ -12,9 +12,7 @@ export default class SelectComponent extends ListComponent {
             key: 'select',
             idPath: 'id',
             data: {
-                values: [
-                    { label: '', value: '' },
-                ],
+                values: [{ label: '', value: '' }],
                 json: '',
                 url: '',
                 resource: '',
@@ -78,12 +76,7 @@ export default class SelectComponent extends ListComponent {
                 return valueComp;
             },
             dataTypeOperators: {
-                number: [
-                    'lessThan',
-                    'greaterThan',
-                    'lessThanOrEqual',
-                    'greaterThanOrEqual',
-                ],
+                number: ['lessThan', 'greaterThan', 'lessThanOrEqual', 'greaterThanOrEqual'],
             },
             dataTypeValueComponents: {
                 number: {
@@ -103,28 +96,15 @@ export default class SelectComponent extends ListComponent {
             return types;
         }
         if (reference) {
-            return [
-                object,
-            ];
+            return [object];
         }
         if (dataType === 'object') {
-            return [
-                object,
-                array,
-            ];
+            return [object, array];
         }
         if (componentValueTypes[dataType]) {
-            return [
-                componentValueTypes[dataType],
-            ];
-        }
-        return [
-            boolean,
-            string,
-            number,
-            object,
-            array,
-        ];
+            return [componentValueTypes[dataType]];
+        }
+        return [boolean, string, number, object, array];
     }
     init() {
         super.init();
@@ -276,11 +256,13 @@ export default class SelectComponent extends ListComponent {
         // 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 && !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?._id ? value._id.toString() : value;
+                const isEqualWithoutData = _.isEqual(data, value) && _.isUndefined(data.data);
                 if (!this.templateData || !this.templateData[templateValue]) {
                     this.getOptionTemplate(data, value);
                 }
@@ -293,7 +275,7 @@ export default class SelectComponent extends ListComponent {
                     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];
                 }
             }
@@ -380,11 +362,7 @@ export default class SelectComponent extends ListComponent {
         }
         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();
@@ -522,7 +500,10 @@ export default class SelectComponent extends ListComponent {
                     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)) {
@@ -670,7 +651,7 @@ export default class SelectComponent extends ListComponent {
             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.
@@ -808,7 +789,7 @@ export default class SelectComponent extends ListComponent {
             }
         }
         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 @@ export default class SelectComponent extends ListComponent {
             ? this.component.searchEnabled
             : true;
         const hasPlaceholder = !!this.component.placeholder && !this.options?.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 {
@@ -857,27 +840,21 @@ export default class SelectComponent extends ListComponent {
                 : _.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'),
+            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: _.get(this, 'component.searchFields', [
-                'label',
-            ]),
+            searchFields: _.get(this, 'component.searchFields', ['label']),
             shadowRoot: this.root ? this.root.shadowRoot : null,
             fuseOptions: this.component.useExactSearch
                 ? {
@@ -916,7 +893,7 @@ export default class SelectComponent extends ListComponent {
         }
         this.addEventListener(input, this.inputInfo.changeEvent, () => {
             this.updateValue(null, {
-                modified: true
+                modified: true,
             });
         });
         this.attachRefreshOnBlur();
@@ -932,10 +909,7 @@ export default class SelectComponent extends ListComponent {
             }
             this.addEventListener(input, 'keydown', (event) => {
                 const { key } = event;
-                if ([
-                    'Backspace',
-                    'Delete',
-                ].includes(key)) {
+                if (['Backspace', 'Delete'].includes(key)) {
                     this.setValue(this.emptyValue);
                 }
             });
@@ -1047,10 +1021,7 @@ export default class SelectComponent extends ListComponent {
                         // If valueProperty is set, replace the submission with the corresponding value
                         let value = this.valueProperty ? _.get(submission, this.valueProperty) : submission;
                         if (this.component.multiple) {
-                            value = [
-                                ...this.dataValue,
-                                value,
-                            ];
+                            value = [...this.dataValue, value];
                         }
                         this.setValue(value);
                         this.triggerUpdate();
@@ -1061,7 +1032,7 @@ export default class SelectComponent extends ListComponent {
         }
         // Force the disabled state with getters and setters.
         this.disabled = this.shouldDisabled;
-        this.triggerUpdate();
+        this.triggerUpdate(null, !_.isEmpty(this.data[this.key]) && this.itemsFromUrl);
         return superAttach;
     }
     setDropdownPosition() {
@@ -1117,9 +1088,7 @@ export default class SelectComponent extends ListComponent {
     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 });
             });
         }
     }
@@ -1164,7 +1133,7 @@ export default class SelectComponent extends ListComponent {
             return false;
         }
         const notFoundValuesToAdd = [];
-        const added = values.reduce((defaultAdded, value) => {
+        const added = values.reduce((defaultAdded, value, i) => {
             if (!value || _.isEmpty(value)) {
                 return defaultAdded;
             }
@@ -1183,6 +1152,10 @@ export default class SelectComponent extends ListComponent {
                         return false;
                     }
                     const itemValue = keyValue ? choice.value : this.itemValue(choice, isSelectOptions);
+                    if (this.component.reference && itemValue._id === value._id) {
+                        _.set(values, i, itemValue);
+                        value = itemValue;
+                    }
                     found |= _.isEqual(itemValue, value);
                     return found ? false : true;
                 });
@@ -1310,7 +1283,7 @@ export default class SelectComponent extends ListComponent {
             return normalize[dataType]().value;
         }
         catch (err) {
-            console.warn('Failed to normalize value', err);
+            console.warn(this.t('failedToNormalize'), err);
             return value;
         }
     }
@@ -1326,8 +1299,7 @@ export default class SelectComponent extends ListComponent {
         return super.normalizeValue(this.normalizeSingleValue(value));
     }
     setMetadata(value, flags = {}) {
-        if (_.isNil(value) ||
-            (this.inDataTable && this.component.dataSrc === 'values')) {
+        if (_.isNil(value)) {
             return;
         }
         const valueIsObject = _.isObject(value);
@@ -1366,8 +1338,7 @@ export default class SelectComponent extends ListComponent {
             }
             _.set(submission.metadata.selectData, this.path, templateData);
         }
-        else if (!this.templateData[templateValue] &&
-            this.isEmpty(value)) {
+        else if (!this.templateData[templateValue] && this.isEmpty(value)) {
             _.unset(this.root.submission, `metadata.selectData.${this.path}`);
         }
         if (flags.resetValue && this.root?.submission && !this.options.readOnly) {
@@ -1466,11 +1437,7 @@ export default class SelectComponent extends ListComponent {
             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);
                 }
@@ -1482,11 +1449,7 @@ export default class SelectComponent extends ListComponent {
         }
         else {
             if (hasValue) {
-                const values = Array.isArray(value)
-                    ? value
-                    : [
-                        value,
-                    ];
+                const values = Array.isArray(value) ? value : [value];
                 if ((!_.isEqual(this.dataValue, this.defaultValue) && this.selectOptions.length < 2) ||
                     (this.selectData && flags.fromSubmission)) {
                     const { value, label } = this.selectValueAndLabel(this.dataValue);
@@ -1531,7 +1494,7 @@ export default class SelectComponent extends ListComponent {
                         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;
                     }
                 };
@@ -1627,11 +1590,14 @@ export default class SelectComponent extends ListComponent {
     asString(value, options = {}) {
         value = 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() && !_.isObject(value.data) ? { data: value } : value;
+            const templateValue = !_.isEmpty(value) && this.isEntireObjectDisplay() && !_.isObject(value.data)
+                ? { data: value }
+                : value;
             const template = this.itemTemplate(templateValue, value, options);
             return template;
         }
@@ -1655,11 +1621,7 @@ export default class SelectComponent extends ListComponent {
             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'),
@@ -1670,10 +1632,7 @@ export default class SelectComponent extends ListComponent {
                     valueProperty: this.valueProperty,
                 };
             const getFromValues = () => {
-                const initialValue = _.find(items, [
-                    valueProperty,
-                    value,
-                ]);
+                const initialValue = _.find(items, [valueProperty, value]);
                 const values = this.defaultSchema.data.values || [];
                 return _.isEqual(initialValue, values[0]) ? '-' : initialValue;
             };
@@ -1728,14 +1687,10 @@ export default class SelectComponent extends ListComponent {
     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);
         }
     }
 }