@formio/js 5.2.4-rc.0 → 5.2.5

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

@@ -2,7 +2,7 @@ import _ from 'lodash';
 import { Formio } from '../../Formio';
 import ListComponent from '../_classes/list/ListComponent';
 import Form from '../../Form';
-import { getRandomComponentId, boolValue, isPromise, componentValueTypes, getComponentSavedTypes, isSelectResourceWithObjectValue, removeHTML, } from '../../utils';
+import { getRandomComponentId, boolValue, isPromise, componentValueTypes, getComponentSavedTypes, isSelectResourceWithObjectValue, removeHTML } from '../../utils';
 import Choices from '../../utils/ChoicesWrapper';
 export default class SelectComponent extends ListComponent {
     static schema(...extend) {
@@ -12,13 +12,11 @@ export default class SelectComponent extends ListComponent {
             key: 'select',
             idPath: 'id',
             data: {
-                values: [
-                    { label: '', value: '' },
-                ],
+                values: [{ label: '', value: '' }],
                 json: '',
                 url: '',
                 resource: '',
-                custom: '',
+                custom: ''
             },
             clearOnRefresh: false,
             limit: 100,
@@ -39,7 +37,7 @@ export default class SelectComponent extends ListComponent {
                 threshold: 0.3,
             },
             indexeddb: {
-                filter: {},
+                filter: {}
             },
             customOptions: {},
             useExactSearch: false,
@@ -52,7 +50,7 @@ export default class SelectComponent extends ListComponent {
             icon: 'th-list',
             weight: 70,
             documentation: '/userguide/form-building/form-components#select',
-            schema: SelectComponent.schema(),
+            schema: SelectComponent.schema()
         };
     }
     static get serverConditionSettings() {
@@ -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();
@@ -246,10 +226,17 @@ export default class SelectComponent extends ListComponent {
         return this.component.dataSrc === 'resource' && this.valueProperty === 'data';
     }
     selectValueAndLabel(data) {
-        const value = this.getOptionValue(this.isEntireObjectDisplay() && !this.itemValue(data) ? data : this.itemValue(data));
+        let value;
+        // If the select is a resource reference, use the actual object value
+        if (this.component.reference && this.isSelectResource) {
+            value = this.getOptionValue(data);
+        }
+        else {
+            value = this.getOptionValue(this.isEntireObjectDisplay() && !this.itemValue(data) ? data : this.itemValue(data));
+        }
         return {
             value,
-            label: this.itemTemplate(this.isEntireObjectDisplay() && !_.isObject(data.data) ? { data: data } : data, value),
+            label: this.itemTemplate((this.isEntireObjectDisplay() && !_.isObject(data.data)) ? { data: data } : data, value)
         };
     }
     itemTemplate(data, value) {
@@ -263,13 +250,13 @@ export default class SelectComponent extends ListComponent {
         // Perform a fast interpretation if we should not use the template.
         if (data && !this.component.template) {
             const itemLabel = data.label || data;
-            const value = typeof itemLabel === 'string' ? this.t(itemLabel, { _userInput: true }) : itemLabel;
+            const value = (typeof itemLabel === 'string') ? this.t(itemLabel, { _userInput: true }) : itemLabel;
             return this.sanitize(value, this.shouldSanitizeValue);
         }
         // 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.dataValue === this.normalizeSingleValue(value))) || this.inDataTable;
         if (shouldUseSelectData) {
             const selectData = this.selectData;
             if (selectData) {
@@ -285,6 +272,10 @@ export default class SelectComponent extends ListComponent {
                 else {
                     data = selectData;
                 }
+                // use template data for reference fields to make sure the data is updated
+                if (this.component.reference && this.templateData[templateValue]) {
+                    data = this.templateData[templateValue];
+                }
             }
         }
         if (typeof data === 'string' || typeof data === 'number') {
@@ -301,10 +292,9 @@ export default class SelectComponent extends ListComponent {
         if (data.data) {
             // checking additional fields in the template for the selected Entire Object option
             const hasNestedFields = /item\.data\.\w*/g.test(this.component.template);
-            data.data =
-                this.isEntireObjectDisplay() && _.isObject(data.data) && !hasNestedFields
-                    ? JSON.stringify(data.data)
-                    : data.data;
+            data.data = this.isEntireObjectDisplay() && _.isObject(data.data) && !hasNestedFields
+                ? JSON.stringify(data.data)
+                : data.data;
         }
         return super.itemTemplate(data, value);
     }
@@ -324,7 +314,7 @@ export default class SelectComponent extends ListComponent {
         const option = {
             value: this.getOptionValue(value),
             label,
-            ...idPath,
+            ...idPath
         };
         const skipOption = this.component.uniqueOptions
             ? !!this.selectOptions.find((selectOption) => _.isEqual(selectOption.value, option.value))
@@ -335,16 +325,15 @@ export default class SelectComponent extends ListComponent {
         if (value) {
             this.selectOptions.push(option);
         }
-        if (this.refs.selectContainer && this.component.widget === 'html5') {
+        if (this.refs.selectContainer && (this.component.widget === 'html5')) {
             // Replace an empty Object value to an empty String.
             if (option.value && _.isObject(option.value) && _.isEmpty(option.value)) {
                 option.value = '';
             }
             // Add element to option so we can reference it later.
             const div = document.createElement('div');
-            const isInDataValue = this.component.multiple && Array.isArray(this.dataValue) && this.dataValue.includes(value);
             div.innerHTML = this.sanitize(this.renderTemplate('selectOption', {
-                selected: _.isEqual(this.getOptionValue(this.dataValue), option.value) || isInDataValue,
+                selected: _.isEqual(this.getOptionValue(this.dataValue), option.value),
                 option,
                 attrs,
                 id,
@@ -359,21 +348,14 @@ export default class SelectComponent extends ListComponent {
         let added = false;
         let data = this.dataValue;
         // preset submission value with value property before request.
-        if (this.options.pdf &&
-            !items.length &&
-            this.component.dataSrc === 'url' &&
-            this.valueProperty) {
+        if (this.options.pdf && !items.length && this.component.dataSrc === 'url' && this.valueProperty) {
             data = Array.isArray(data)
-                ? data.map((item) => _.set({}, this.valueProperty, item))
+                ? data.map(item => _.set({}, this.valueProperty, item))
                 : _.set({}, this.valueProperty, data);
         }
         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();
@@ -400,12 +382,8 @@ export default class SelectComponent extends ListComponent {
         }
         return false;
     }
+    /* eslint-disable max-statements */
     setItems(items, fromSearch) {
-        if (this.visible && this.isHtmlRenderMode() && !_.isEqual(items, this.selectItems)) {
-            this.itemsLoaded.then(() => {
-                this.redraw();
-            });
-        }
         this.selectItems = items;
         // If the items is a string, then parse as JSON.
         if (typeof items == 'string') {
@@ -437,9 +415,9 @@ export default class SelectComponent extends ListComponent {
         if (this.itemsFromUrl) {
             areItemsEqual = this.isSelectURL ? _.isEqual(items, this.downloadedResources) : false;
             const areItemsEnded = this.component.limit > items.length;
-            const areItemsDownloaded = areItemsEqual &&
-                this.downloadedResources &&
-                this.downloadedResources.length === items.length;
+            const areItemsDownloaded = areItemsEqual
+                && this.downloadedResources
+                && this.downloadedResources.length === items.length;
             if (areItemsEnded) {
                 this.disableInfiniteScroll();
             }
@@ -456,8 +434,7 @@ export default class SelectComponent extends ListComponent {
                     ? this.downloadedResources.concat(items)
                     : items;
             }
-            this.downloadedResources.serverCount =
-                items.serverCount || this.downloadedResources.serverCount;
+            this.downloadedResources.serverCount = items.serverCount || this.downloadedResources.serverCount;
         }
         else {
             this.downloadedResources = items || [];
@@ -465,11 +442,10 @@ export default class SelectComponent extends ListComponent {
             // If there is new select option with same id as already selected, set the new one
             if (!_.isEmpty(this.dataValue) && this.component.idPath) {
                 const selectedOptionId = _.get(this.dataValue, this.component.idPath, null);
-                const newOptionWithSameId = !_.isNil(selectedOptionId) &&
-                    items.find((item) => {
-                        const itemId = _.get(item, this.component.idPath);
-                        return itemId === selectedOptionId;
-                    });
+                const newOptionWithSameId = !_.isNil(selectedOptionId) && items.find(item => {
+                    const itemId = _.get(item, this.component.idPath);
+                    return itemId === selectedOptionId;
+                });
                 if (newOptionWithSameId) {
                     this.setValue(newOptionWithSameId);
                 }
@@ -485,10 +461,7 @@ export default class SelectComponent extends ListComponent {
         // Iterate through each of the items.
         _.each(items, (item, index) => {
             // preventing references of the components inside the form to the parent form when building forms
-            if (this.root &&
-                this.root.options.editForm &&
-                this.root.options.editForm._id &&
-                this.root.options.editForm._id === item._id)
+            if (this.root && this.root.options.editForm && this.root.options.editForm._id && this.root.options.editForm._id === item._id)
                 return;
             const itemValueAndLabel = this.selectValueAndLabel(item);
             this.addOption(itemValueAndLabel.value, itemValueAndLabel.label, {}, _.get(item, this.component.idPath, String(index)));
@@ -508,7 +481,7 @@ export default class SelectComponent extends ListComponent {
             // If a value is provided, then select it.
             if (!this.isEmpty() || this.isRemoveButtonPressed) {
                 this.setValue(this.dataValue, {
-                    noUpdateEvent: true,
+                    noUpdateEvent: true
                 });
             }
             else if (this.shouldAddDefaultValue && !this.options.readOnly) {
@@ -534,17 +507,17 @@ export default class SelectComponent extends ListComponent {
             return super.itemValueForHTMLMode(value);
         }
         if (Array.isArray(value)) {
-            const values = value.map((item) => Array.isArray(item)
+            const values = value.map(item => Array.isArray(item)
                 ? this.itemValueForHTMLMode(item)
                 : this.getSingleItemValueForHTMLMode(item));
             return values.join(', ');
         }
         return this.getSingleItemValueForHTMLMode(value);
     }
+    /* eslint-enable max-statements */
     get defaultValue() {
         let defaultValue = super.defaultValue;
-        if (!defaultValue &&
-            (this.component.defaultValue === false || this.component.defaultValue === 0)) {
+        if (!defaultValue && (this.component.defaultValue === false || this.component.defaultValue === 0)) {
             defaultValue = this.component.defaultValue;
         }
         return defaultValue;
@@ -563,7 +536,9 @@ export default class SelectComponent extends ListComponent {
         }
         // See if they have not met the minimum search requirements.
         const minSearch = parseInt(this.component.minSearch, 10);
-        if (this.component.searchField && minSearch > 0 && (!search || search.length < minSearch)) {
+        if (this.component.searchField &&
+            (minSearch > 0) &&
+            (!search || (search.length < minSearch))) {
             // Set empty items.
             return this.setItems([]);
         }
@@ -574,19 +549,17 @@ export default class SelectComponent extends ListComponent {
         }
         const limit = this.component.limit || 100;
         const skip = this.isScrollLoading ? this.selectOptions.length : 0;
-        const query = this.component.disableLimit
-            ? {}
-            : {
-                limit,
-                skip,
-            };
+        const query = this.component.disableLimit ? {} : {
+            limit,
+            skip,
+        };
         // Allow for url interpolation.
         url = this.sanitize(this.interpolate(url, {
             formioBase: Formio.getBaseUrl(),
             search,
             limit,
             skip,
-            page: Math.abs(Math.floor(skip / limit)),
+            page: Math.abs(Math.floor(skip / limit))
         }), this.shouldSanitizeValue);
         // Add search capability.
         if (this.component.searchField && search) {
@@ -609,9 +582,7 @@ export default class SelectComponent extends ListComponent {
         }
         if (!_.isEmpty(query)) {
             // Add the query string.
-            url +=
-                (!url.includes('?') ? '?' : '&') +
-                    Formio.serialize(query, (item) => this.interpolate(item));
+            url += (!url.includes('?') ? '?' : '&') + Formio.serialize(query, (item) => this.interpolate(item));
         }
         // Add filter capability
         if (this.component.filter) {
@@ -672,7 +643,7 @@ export default class SelectComponent extends ListComponent {
     }
     getCustomItems() {
         const customItems = this.evaluate(this.component.data.custom, {
-            values: [],
+            values: []
         }, 'values');
         this.asyncValues = isPromise(customItems);
         return customItems;
@@ -691,11 +662,11 @@ export default class SelectComponent extends ListComponent {
             }
             this.loading = true;
             this.getCustomItems()
-                .then((items) => {
+                .then(items => {
                 this.loading = false;
                 this.setItems(items || []);
             })
-                .catch((err) => {
+                .catch(err => {
                 this.handleLoadingError(err);
             });
         }
@@ -707,13 +678,13 @@ export default class SelectComponent extends ListComponent {
         return super.isEmpty(value) || value === undefined;
     }
     refresh(value, { instance }) {
-        if (this.component.clearOnRefresh && instance && !instance.pristine) {
+        if (this.component.clearOnRefresh && (instance && !instance.pristine)) {
             this.setValue(this.emptyValue);
         }
         this.updateItems(null, true);
     }
     get additionalResourcesAvailable() {
-        return _.isNil(this.serverCount) || this.serverCount > this.downloadedResources.length;
+        return _.isNil(this.serverCount) || (this.serverCount > this.downloadedResources.length);
     }
     get serverCount() {
         if (this.isFromSearch) {
@@ -765,22 +736,18 @@ export default class SelectComponent extends ListComponent {
     setLoadingItem(addToCurrentList = false) {
         if (this.choices) {
             if (addToCurrentList) {
-                this.choices.setChoices([
-                    {
+                this.choices.setChoices([{
                         value: `${this.id}-loading`,
                         label: 'Loading...',
                         disabled: true,
-                    },
-                ], 'value', 'label');
+                    }], 'value', 'label');
             }
             else {
-                this.choices.setChoices([
-                    {
+                this.choices.setChoices([{
                         value: '',
                         label: `<i class="${this.iconClass('refresh')}" style="font-size:1.3em;"></i>`,
                         disabled: true,
-                    },
-                ], 'value', 'label', true);
+                    }], 'value', 'label', true);
             }
         }
         else if (this.component.dataSrc === 'url' || this.component.dataSrc === 'resource') {
@@ -802,15 +769,13 @@ export default class SelectComponent extends ListComponent {
     }
     wrapElement(element) {
         return this.component.addResource && !this.options.readOnly
-            ? this.renderTemplate('resourceAdd', {
-                element,
-            })
+            ? (this.renderTemplate('resourceAdd', {
+                element
+            }))
             : element;
     }
     choicesOptions() {
-        const useSearch = this.component.hasOwnProperty('searchEnabled')
-            ? this.component.searchEnabled
-            : true;
+        const useSearch = this.component.hasOwnProperty('searchEnabled') ? this.component.searchEnabled : true;
         const placeholderValue = this.t(this.component.placeholder, { _userInput: true });
         let customOptions = this.component.customOptions || {};
         if (typeof customOptions == 'string') {
@@ -827,16 +792,10 @@ export default class SelectComponent extends ListComponent {
             distance: 1000,
         };
         return {
-            removeItemButton: this.component.disabled
-                ? false
-                : _.get(this.component, 'removeItemButton', true),
+            removeItemButton: this.component.disabled ? false : _.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,
@@ -847,23 +806,21 @@ export default class SelectComponent extends ListComponent {
             noChoicesText: this.t('No choices to choose from'),
             searchPlaceholderValue: this.t('Type to search'),
             shouldSort: false,
-            position: this.component.dropdown || 'auto',
+            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
                 ? {
                     tokenize: true,
                     matchAllTokens: true,
-                    ...commonFuseOptions,
+                    ...commonFuseOptions
                 }
                 : Object.assign({}, _.get(this, 'component.fuseOptions', {}), {
                     include: 'score',
                     threshold: _.get(this, 'component.selectThreshold', 0.3),
-                    ...commonFuseOptions,
+                    ...commonFuseOptions
                 }),
             valueComparer: _.isEqual,
             resetScrollPosition: false,
@@ -871,12 +828,13 @@ export default class SelectComponent extends ListComponent {
             ...customOptions,
         };
     }
+    /* eslint-disable max-statements */
     attach(element) {
         const superAttach = super.attach(element);
         this.loadRefs(element, {
             selectContainer: 'single',
             addResource: 'single',
-            autocompleteInput: 'single',
+            autocompleteInput: 'single'
         });
         //enable autocomplete for select
         const autocompleteInput = this.refs.autocompleteInput;
@@ -889,18 +847,9 @@ export default class SelectComponent extends ListComponent {
         if (!input) {
             return;
         }
-        this.addEventListener(input, this.inputInfo.changeEvent, (event) => {
-            let value = null;
-            if (this.component.widget === "html5") {
-                value = event.target.value;
-                if (this.component.multiple) {
-                    value = Array.from(event.target.selectedOptions).map(opt => opt.value);
-                }
-            }
-            this.updateValue(value, {
-                modified: true
-            });
-        });
+        this.addEventListener(input, this.inputInfo.changeEvent, () => this.updateValue(null, {
+            modified: true
+        }));
         this.attachRefreshOnBlur();
         if (this.component.widget === 'html5') {
             this.addFocusBlurEvents(input);
@@ -914,10 +863,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);
                 }
             });
@@ -984,10 +930,8 @@ export default class SelectComponent extends ListComponent {
                 this.isFromSearch = false;
             });
             // avoid spamming the resource/url endpoint when we have server side filtering enabled.
-            const debounceTimeout = this.component.searchField && (this.isSelectResource || this.isSelectURL)
-                ? (this.component.searchDebounce === 0
-                    ? 0
-                    : this.component.searchDebounce || this.defaultSchema.searchDebounce) * 1000
+            const debounceTimeout = this.component.searchField && (this.isSelectResource || this.isSelectURL) ?
+                (this.component.searchDebounce === 0 ? 0 : this.component.searchDebounce || this.defaultSchema.searchDebounce) * 1000
                 : 0;
             const updateComponent = (evt) => {
                 this.triggerUpdate(evt.detail.value);
@@ -1014,9 +958,8 @@ export default class SelectComponent extends ListComponent {
             });
         }
         // Add value options.
-        const value = this.undoValueTyping(this.dataValue);
         this.addValueOptions();
-        this.setChoicesValue(value);
+        this.setChoicesValue(this.dataValue);
         if (this.isSelectResource && this.refs.addResource) {
             this.addEventListener(this.refs.addResource, 'click', (event) => {
                 event.preventDefault();
@@ -1024,15 +967,13 @@ export default class SelectComponent extends ListComponent {
                 const dialog = this.createModal(formioForm);
                 const projectUrl = _.get(this.root, 'formio.projectUrl', Formio.getProjectUrl());
                 const formUrl = `${projectUrl}/form/${this.component.data.resource}`;
-                new Form(formioForm, formUrl, {}).ready.then((form) => {
+                new Form(formioForm, formUrl, {}).ready
+                    .then((form) => {
                     form.on('submit', (submission) => {
                         // 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();
@@ -1076,9 +1017,7 @@ export default class SelectComponent extends ListComponent {
         }
     }
     positionDropdown(scroll) {
-        if (!this.shouldPositionDropdown ||
-            !this.choices ||
-            (!this.choices.dropdown?.isActive && scroll)) {
+        if (!this.shouldPositionDropdown || !this.choices || (!this.choices.dropdown?.isActive && scroll)) {
             return;
         }
         this.setDropdownPosition();
@@ -1099,12 +1038,11 @@ 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 });
             });
         }
     }
+    /* eslint-enable max-statements */
     update() {
         if (this.component.dataSrc === 'custom') {
             this.updateCustomItems();
@@ -1133,7 +1071,7 @@ export default class SelectComponent extends ListComponent {
     }
     set visible(value) {
         // If we go from hidden to visible, trigger a refresh.
-        if (value && !this._visible !== !value) {
+        if (value && (!this._visible !== !value)) {
             this.triggerUpdate();
         }
         super.visible = value;
@@ -1160,7 +1098,7 @@ export default class SelectComponent extends ListComponent {
             const isSelectOptions = items === this.selectOptions;
             if (items && items.length) {
                 _.each(items, (choice) => {
-                    if (choice._id && value._id && choice._id === value._id) {
+                    if (choice._id && value._id && (choice._id === value._id)) {
                         found = true;
                         return false;
                     }
@@ -1180,23 +1118,22 @@ export default class SelectComponent extends ListComponent {
             if (this.choices) {
                 this.choices.setChoices(notFoundValuesToAdd, 'value', 'label');
             }
-            notFoundValuesToAdd.map((notFoundValue) => {
+            notFoundValuesToAdd.map(notFoundValue => {
                 this.addOption(notFoundValue.value, notFoundValue.label);
             });
         }
         return added;
     }
     getValueAsString(data, options) {
-        return this.component.multiple && Array.isArray(data)
+        return (this.component.multiple && Array.isArray(data))
             ? data.map((v) => this.asString(v, options)).join(', ')
             : this.asString(data, options);
     }
     getValue() {
         // If the widget isn't active.
-        if (this.viewOnly ||
-            this.loading ||
-            (!this.component.lazyLoad && !this.selectOptions.length) ||
-            !this.element) {
+        if (this.viewOnly || this.loading
+            || (!this.component.lazyLoad && !this.selectOptions.length)
+            || !this.element) {
             return this.dataValue;
         }
         let value = this.emptyValue;
@@ -1205,7 +1142,7 @@ export default class SelectComponent extends ListComponent {
             // Make sure we don't get the placeholder
             if (!this.component.multiple &&
                 this.component.placeholder &&
-                value === this.t(this.component.placeholder, { _userInput: true })) {
+                (value === this.t(this.component.placeholder, { _userInput: true }))) {
                 value = this.emptyValue;
             }
         }
@@ -1215,7 +1152,8 @@ export default class SelectComponent extends ListComponent {
                 if (value === '') {
                     return {};
                 }
-                const option = this.selectOptions[value] || this.selectOptions.find((option) => option.id === value);
+                const option = this.selectOptions[value] ||
+                    this.selectOptions.find(option => option.id === value);
                 if (option && _.isObject(option.value)) {
                     value = option.value;
                 }
@@ -1250,18 +1188,16 @@ export default class SelectComponent extends ListComponent {
             number() {
                 const numberValue = Number(this.value);
                 const isEquivalent = value.toString() === numberValue.toString();
-                if (!Number.isNaN(numberValue) &&
-                    Number.isFinite(numberValue) &&
-                    value !== '' &&
-                    isEquivalent) {
+                if (!Number.isNaN(numberValue) && Number.isFinite(numberValue) && value !== '' && isEquivalent) {
                     this.value = numberValue;
                 }
                 return this;
             },
             boolean() {
-                if (_.isString(this.value) &&
-                    (this.value.toLowerCase() === 'true' || this.value.toLowerCase() === 'false')) {
-                    this.value = this.value.toLowerCase() === 'true';
+                if (_.isString(this.value)
+                    && (this.value.toLowerCase() === 'true'
+                        || this.value.toLowerCase() === 'false')) {
+                    this.value = (this.value.toLowerCase() === 'true');
                 }
                 return this;
             },
@@ -1280,7 +1216,7 @@ export default class SelectComponent extends ListComponent {
                     this.value = this.string().number().boolean().value;
                 }
                 return this;
-            },
+            }
         };
         try {
             return normalize[dataType]().value;
@@ -1313,11 +1249,7 @@ export default class SelectComponent extends ListComponent {
         // Check to see if we need to save off the template data into our metadata.
         const templateValue = this.component.reference && value?._id ? value._id.toString() : value;
         const shouldSaveData = (!valueIsObject || this.component.reference) && !this.inDataTable;
-        if (!_.isNil(templateValue) &&
-            shouldSaveData &&
-            this.templateData &&
-            this.templateData[templateValue] &&
-            this.root?.submission) {
+        if (!_.isNil(templateValue) && shouldSaveData && this.templateData && this.templateData[templateValue] && this.root?.submission) {
             const submission = this.root.submission;
             if (!submission.metadata) {
                 submission.metadata = {};
@@ -1331,9 +1263,7 @@ export default class SelectComponent extends ListComponent {
                 const dataValue = this.dataValue;
                 if (dataValue && _.isArray(dataValue) && dataValue.length) {
                     dataValue.forEach((dataValueItem) => {
-                        const dataValueItemValue = this.component.reference
-                            ? dataValueItem._id.toString()
-                            : dataValueItem;
+                        const dataValueItemValue = this.component.reference ? dataValueItem._id.toString() : dataValueItem;
                         templateData[dataValueItemValue] = this.templateData[dataValueItemValue];
                     });
                 }
@@ -1353,7 +1283,7 @@ export default class SelectComponent extends ListComponent {
         const changed = super.updateValue(value, flags);
         if (changed || !this.selectMetadata || flags.resetValue) {
             if (this.component.multiple && Array.isArray(this.dataValue)) {
-                this.dataValue.forEach((singleValue) => this.setMetadata(singleValue, flags));
+                this.dataValue.forEach(singleValue => this.setMetadata(singleValue, flags));
             }
             else {
                 this.setMetadata(this.dataValue, flags);
@@ -1364,7 +1294,7 @@ export default class SelectComponent extends ListComponent {
     undoValueTyping(value) {
         let untypedValue = value;
         if (this.component.multiple && Array.isArray(value)) {
-            untypedValue = value.map((v) => {
+            untypedValue = value.map(v => {
                 if (typeof v === 'boolean' || typeof v === 'number') {
                     return v.toString();
                 }
@@ -1381,9 +1311,7 @@ export default class SelectComponent extends ListComponent {
     setValue(value, flags = {}) {
         const previousValue = this.dataValue;
         const changed = this.updateValue(value, flags);
-        if (this.component.widget === 'html5' &&
-            (_.isEqual(value, previousValue) || (_.isEqual(previousValue, {}) && _.isEqual(flags, {}))) &&
-            !flags.fromSubmission) {
+        if (this.component.widget === 'html5' && (_.isEqual(value, previousValue) || _.isEqual(previousValue, {}) && _.isEqual(flags, {})) && !flags.fromSubmission) {
             return false;
         }
         value = this.dataValue;
@@ -1407,9 +1335,6 @@ export default class SelectComponent extends ListComponent {
             this.lazyLoadInit = true;
             const searchProperty = this.component.searchField || this.component.valueProperty;
             this.triggerUpdate(_.get(value.data || value, searchProperty, value), true);
-            this.itemsLoaded.then(() => {
-                this.setChoicesValue(value, hasPreviousValue, flags);
-            });
             return changed;
         }
         // Add the value options.
@@ -1420,28 +1345,23 @@ export default class SelectComponent extends ListComponent {
         return changed;
     }
     isInitApiCallNeeded(hasValue) {
-        return (this.component.lazyLoad &&
+        return this.component.lazyLoad &&
             !this.lazyLoadInit &&
             !this.active &&
             !this.selectOptions.length &&
             hasValue &&
             this.shouldInitialLoad &&
-            this.visible &&
-            (this.component.searchField || this.component.valueProperty));
+            this.visible && (this.component.searchField || this.component.valueProperty);
     }
     setChoicesValue(value, hasPreviousValue, flags = {}) {
         const hasValue = !this.isEmpty(value) || flags.fromSubmission;
-        hasPreviousValue = hasPreviousValue === undefined ? true : hasPreviousValue;
+        hasPreviousValue = (hasPreviousValue === undefined) ? true : hasPreviousValue;
         if (this.choices) {
             // Now set the value.
             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);
                 }
@@ -1453,13 +1373,9 @@ export default class SelectComponent extends ListComponent {
         }
         else {
             if (hasValue) {
-                const values = Array.isArray(value)
-                    ? value
-                    : [
-                        value,
-                    ];
-                if ((!_.isEqual(this.dataValue, this.defaultValue) && this.selectOptions.length < 2) ||
-                    (this.selectData && flags.fromSubmission)) {
+                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);
                     this.addOption(value, label);
                 }
@@ -1499,7 +1415,7 @@ export default class SelectComponent extends ListComponent {
                         return false;
                     }
                     try {
-                        return JSON.stringify(normalizedOptionValue) === JSON.stringify(value);
+                        return (JSON.stringify(normalizedOptionValue) === JSON.stringify(value));
                     }
                     catch (err) {
                         console.warn.error('Error while comparing items', err);
@@ -1508,7 +1424,7 @@ export default class SelectComponent extends ListComponent {
                 };
                 return values.findIndex((optionValue) => compareComplexValues(optionValue)) !== -1;
             }
-            return (values.findIndex((optionValue) => this.normalizeSingleValue(optionValue) === value) !== -1);
+            return values.findIndex((optionValue) => this.normalizeSingleValue(optionValue) === value) !== -1;
         }
         return false;
     }
@@ -1567,7 +1483,7 @@ export default class SelectComponent extends ListComponent {
      */
     deleteValue() {
         this.setValue('', {
-            noUpdateEvent: true,
+            noUpdateEvent: true
         });
         this.unset();
     }
@@ -1590,10 +1506,7 @@ export default class SelectComponent extends ListComponent {
         if (!this.component || !this.component.data || !this.component.data.values) {
             return;
         }
-        return this.component.data.values.map((value) => ({
-            label: value.label,
-            value: String(this.normalizeSingleValue(value.value)),
-        }));
+        return this.component.data.values.map(value => ({ label: value.label, value: String(this.normalizeSingleValue(value.value)) }));
     }
     asString(value, options = {}) {
         value = value ?? this.getValue();
@@ -1601,7 +1514,7 @@ export default class SelectComponent extends ListComponent {
             if (this.inDataTable) {
                 value = this.undoValueTyping(value);
             }
-            const templateValue = this.isEntireObjectDisplay() && !_.isObject(value.data) ? { data: value } : value;
+            const templateValue = (this.isEntireObjectDisplay() && !_.isObject(value.data)) ? { data: value } : value;
             const template = this.itemTemplate(templateValue, value, options);
             return template;
         }
@@ -1609,7 +1522,7 @@ export default class SelectComponent extends ListComponent {
         const convertToString = (data, valueProperty) => {
             if (valueProperty) {
                 if (Array.isArray(data)) {
-                    data.forEach((item) => (item[valueProperty] = item[valueProperty].toString()));
+                    data.forEach((item) => item[valueProperty] = item[valueProperty].toString());
                 }
                 else if (_.isObject(data)) {
                     data[valueProperty] = data[valueProperty].toString();
@@ -1619,18 +1532,14 @@ export default class SelectComponent extends ListComponent {
             if (this.isBooleanOrNumber(data)) {
                 data = data.toString();
             }
-            if (Array.isArray(data) && data.some((item) => this.isBooleanOrNumber(item))) {
-                data = data.map((item) => (this.isBooleanOrNumber(item) ? item.toString() : item));
+            if (Array.isArray(data) && data.some(item => this.isBooleanOrNumber(item))) {
+                data = data.map(item => this.isBooleanOrNumber(item) ? item.toString() : item);
             }
             return data;
         };
         value = convertToString(value);
-        if ([
-            'values',
-            'custom',
-        ].includes(this.component.dataSrc) &&
-            !this.asyncCustomValues()) {
-            const { items, valueProperty } = this.component.dataSrc === 'values'
+        if (['values', 'custom'].includes(this.component.dataSrc) && !this.asyncCustomValues()) {
+            const { items, valueProperty, } = this.component.dataSrc === 'values'
                 ? {
                     items: convertToString(this.getNormalizedValues(), 'value'),
                     valueProperty: 'value',
@@ -1640,30 +1549,28 @@ 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;
             };
-            value =
-                this.component.multiple && Array.isArray(value)
-                    ? _.filter(items, (item) => value.includes(item.value))
-                    : valueProperty && items
-                        ? (getFromValues() ?? { value, label: value })
-                        : value;
+            value = (this.component.multiple && Array.isArray(value))
+                ? _.filter(items, (item) => value.includes(item.value))
+                : (valueProperty && items)
+                    ? getFromValues() ?? { value, label: value }
+                    : value;
         }
         if (_.isString(value)) {
             return value;
         }
         const getTemplateValue = (v) => {
             const itemTemplate = this.itemTemplate(v);
-            return options.csv && itemTemplate ? removeHTML(itemTemplate) : itemTemplate;
+            return options.csv && itemTemplate
+                ? removeHTML(itemTemplate)
+                : itemTemplate;
         };
         if (Array.isArray(value)) {
             const items = [];
-            value.forEach((item) => items.push(getTemplateValue(item)));
+            value.forEach(item => items.push(getTemplateValue(item)));
             if (this.component.dataSrc === 'resource' && items.length > 0) {
                 return items.join(', ');
             }
@@ -1677,7 +1584,9 @@ export default class SelectComponent extends ListComponent {
         if (this.isEntireObjectDisplay() && _.isObject(value)) {
             return JSON.stringify(value);
         }
-        return !_.isNil(value) ? getTemplateValue(value) : '-';
+        return !_.isNil(value)
+            ? getTemplateValue(value)
+            : '-';
     }
     detach() {
         this.off('blur');
@@ -1698,14 +1607,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);
         }
     }
 }