@formio/js 5.2.3 → 5.2.4-rc.0

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,11 +12,13 @@ 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,
@@ -37,7 +39,7 @@ export default class SelectComponent extends ListComponent {
                 threshold: 0.3,
             },
             indexeddb: {
-                filter: {}
+                filter: {},
             },
             customOptions: {},
             useExactSearch: false,
@@ -50,7 +52,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() {
@@ -76,7 +78,12 @@ export default class SelectComponent extends ListComponent {
                 return valueComp;
             },
             dataTypeOperators: {
-                number: ['lessThan', 'greaterThan', 'lessThanOrEqual', 'greaterThanOrEqual'],
+                number: [
+                    'lessThan',
+                    'greaterThan',
+                    'lessThanOrEqual',
+                    'greaterThanOrEqual',
+                ],
             },
             dataTypeValueComponents: {
                 number: {
@@ -96,15 +103,28 @@ 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();
@@ -226,10 +246,10 @@ 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));
+        const 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) {
@@ -243,13 +263,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) {
@@ -281,9 +301,10 @@ 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);
     }
@@ -303,7 +324,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))
@@ -314,15 +335,16 @@ 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),
+                selected: _.isEqual(this.getOptionValue(this.dataValue), option.value) || isInDataValue,
                 option,
                 attrs,
                 id,
@@ -337,14 +359,21 @@ 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();
@@ -371,8 +400,12 @@ 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') {
@@ -404,9 +437,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();
             }
@@ -423,7 +456,8 @@ 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 || [];
@@ -431,10 +465,11 @@ 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);
                 }
@@ -450,7 +485,10 @@ 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)));
@@ -470,7 +508,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) {
@@ -496,17 +534,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;
@@ -525,9 +563,7 @@ 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([]);
         }
@@ -538,17 +574,19 @@ 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) {
@@ -571,7 +609,9 @@ 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) {
@@ -632,7 +672,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;
@@ -651,11 +691,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);
             });
         }
@@ -667,13 +707,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) {
@@ -725,18 +765,22 @@ 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') {
@@ -758,13 +802,15 @@ 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') {
@@ -781,10 +827,16 @@ 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,
@@ -795,21 +847,23 @@ 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,
@@ -817,13 +871,12 @@ 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;
@@ -836,9 +889,18 @@ export default class SelectComponent extends ListComponent {
         if (!input) {
             return;
         }
-        this.addEventListener(input, this.inputInfo.changeEvent, () => this.updateValue(null, {
-            modified: true
-        }));
+        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.attachRefreshOnBlur();
         if (this.component.widget === 'html5') {
             this.addFocusBlurEvents(input);
@@ -852,7 +914,10 @@ 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);
                 }
             });
@@ -919,8 +984,10 @@ 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);
@@ -947,8 +1014,9 @@ export default class SelectComponent extends ListComponent {
             });
         }
         // Add value options.
+        const value = this.undoValueTyping(this.dataValue);
         this.addValueOptions();
-        this.setChoicesValue(this.dataValue);
+        this.setChoicesValue(value);
         if (this.isSelectResource && this.refs.addResource) {
             this.addEventListener(this.refs.addResource, 'click', (event) => {
                 event.preventDefault();
@@ -956,13 +1024,15 @@ 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();
@@ -1006,7 +1076,9 @@ 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();
@@ -1027,11 +1099,12 @@ 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();
@@ -1060,7 +1133,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;
@@ -1087,7 +1160,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;
                     }
@@ -1107,22 +1180,23 @@ 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;
@@ -1131,7 +1205,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;
             }
         }
@@ -1141,8 +1215,7 @@ 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;
                 }
@@ -1177,16 +1250,18 @@ 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;
             },
@@ -1205,7 +1280,7 @@ export default class SelectComponent extends ListComponent {
                     this.value = this.string().number().boolean().value;
                 }
                 return this;
-            }
+            },
         };
         try {
             return normalize[dataType]().value;
@@ -1238,7 +1313,11 @@ 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 = {};
@@ -1252,7 +1331,9 @@ 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];
                     });
                 }
@@ -1272,7 +1353,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);
@@ -1283,7 +1364,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();
                 }
@@ -1300,7 +1381,9 @@ 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;
@@ -1324,6 +1407,9 @@ 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.
@@ -1334,23 +1420,28 @@ 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);
                 }
@@ -1362,9 +1453,13 @@ 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);
                 }
@@ -1404,7 +1499,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);
@@ -1413,7 +1508,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;
     }
@@ -1472,7 +1567,7 @@ export default class SelectComponent extends ListComponent {
      */
     deleteValue() {
         this.setValue('', {
-            noUpdateEvent: true
+            noUpdateEvent: true,
         });
         this.unset();
     }
@@ -1495,7 +1590,10 @@ 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();
@@ -1503,7 +1601,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;
         }
@@ -1511,7 +1609,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();
@@ -1521,14 +1619,18 @@ 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',
@@ -1538,28 +1640,30 @@ 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(', ');
             }
@@ -1573,9 +1677,7 @@ 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');
@@ -1596,10 +1698,14 @@ 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);
         }
     }
 }