@formio/js 5.4.1 → 5.4.2

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;
         }
     }
@@ -1338,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) {
@@ -1438,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);
                 }
@@ -1454,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);
@@ -1503,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;
                     }
                 };
@@ -1600,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 = !lodash_1.default.isEmpty(value) && 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;
         }
@@ -1628,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'),
@@ -1643,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;
             };
@@ -1702,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);
         }
     }
 }