@formio/js 5.4.1 → 5.4.2

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;
         }
     }
@@ -1365,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) {
@@ -1465,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);
                 }
@@ -1481,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);
@@ -1530,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;
                     }
                 };
@@ -1626,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 = !_.isEmpty(value) && 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;
         }
@@ -1654,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'),
@@ -1669,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;
             };
@@ -1727,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);
         }
     }
 }