@formio/js 5.2.4-rc.0 → 5.2.5

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

@@ -17,13 +17,11 @@ class SelectComponent extends ListComponent_1.default {
             key: 'select',
             idPath: 'id',
             data: {
-                values: [
-                    { label: '', value: '' },
-                ],
+                values: [{ label: '', value: '' }],
                 json: '',
                 url: '',
                 resource: '',
-                custom: '',
+                custom: ''
             },
             clearOnRefresh: false,
             limit: 100,
@@ -44,7 +42,7 @@ class SelectComponent extends ListComponent_1.default {
                 threshold: 0.3,
             },
             indexeddb: {
-                filter: {},
+                filter: {}
             },
             customOptions: {},
             useExactSearch: false,
@@ -57,7 +55,7 @@ class SelectComponent extends ListComponent_1.default {
             icon: 'th-list',
             weight: 70,
             documentation: '/userguide/form-building/form-components#select',
-            schema: SelectComponent.schema(),
+            schema: SelectComponent.schema()
         };
     }
     static get serverConditionSettings() {
@@ -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();
@@ -246,10 +226,17 @@ class SelectComponent extends ListComponent_1.default {
         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() && !lodash_1.default.isObject(data.data) ? { data: data } : data, value),
+            label: this.itemTemplate((this.isEntireObjectDisplay() && !lodash_1.default.isObject(data.data)) ? { data: data } : data, value)
         };
     }
     itemTemplate(data, value) {
@@ -263,13 +250,13 @@ class SelectComponent extends ListComponent_1.default {
         // 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 && lodash_1.default.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 @@ class SelectComponent extends ListComponent_1.default {
                 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 @@ class SelectComponent extends ListComponent_1.default {
         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() && lodash_1.default.isObject(data.data) && !hasNestedFields
-                    ? JSON.stringify(data.data)
-                    : data.data;
+            data.data = this.isEntireObjectDisplay() && lodash_1.default.isObject(data.data) && !hasNestedFields
+                ? JSON.stringify(data.data)
+                : data.data;
         }
         return super.itemTemplate(data, value);
     }
@@ -331,16 +321,15 @@ class SelectComponent extends ListComponent_1.default {
         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 && lodash_1.default.isObject(option.value) && lodash_1.default.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: lodash_1.default.isEqual(this.getOptionValue(this.dataValue), option.value) || isInDataValue,
+                selected: lodash_1.default.isEqual(this.getOptionValue(this.dataValue), option.value),
                 option,
                 attrs,
                 id,
@@ -355,21 +344,14 @@ class SelectComponent extends ListComponent_1.default {
         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) => lodash_1.default.set({}, this.valueProperty, item))
+                ? data.map(item => lodash_1.default.set({}, this.valueProperty, item))
                 : lodash_1.default.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();
@@ -396,13 +378,9 @@ class SelectComponent extends ListComponent_1.default {
         }
         return false;
     }
+    /* eslint-disable max-statements */
     setItems(items, fromSearch) {
         var _a, _b;
-        if (this.visible && this.isHtmlRenderMode() && !lodash_1.default.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') {
@@ -434,9 +412,9 @@ class SelectComponent extends ListComponent_1.default {
         if (this.itemsFromUrl) {
             areItemsEqual = this.isSelectURL ? lodash_1.default.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();
             }
@@ -453,8 +431,7 @@ class SelectComponent extends ListComponent_1.default {
                     ? 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 || [];
@@ -462,11 +439,10 @@ class SelectComponent extends ListComponent_1.default {
             // If there is new select option with same id as already selected, set the new one
             if (!lodash_1.default.isEmpty(this.dataValue) && this.component.idPath) {
                 const selectedOptionId = lodash_1.default.get(this.dataValue, this.component.idPath, null);
-                const newOptionWithSameId = !lodash_1.default.isNil(selectedOptionId) &&
-                    items.find((item) => {
-                        const itemId = lodash_1.default.get(item, this.component.idPath);
-                        return itemId === selectedOptionId;
-                    });
+                const newOptionWithSameId = !lodash_1.default.isNil(selectedOptionId) && items.find(item => {
+                    const itemId = lodash_1.default.get(item, this.component.idPath);
+                    return itemId === selectedOptionId;
+                });
                 if (newOptionWithSameId) {
                     this.setValue(newOptionWithSameId);
                 }
@@ -482,10 +458,7 @@ class SelectComponent extends ListComponent_1.default {
         // Iterate through each of the items.
         lodash_1.default.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, {}, lodash_1.default.get(item, this.component.idPath, String(index)));
@@ -505,7 +478,7 @@ class SelectComponent extends ListComponent_1.default {
             // 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) {
@@ -532,17 +505,17 @@ class SelectComponent extends ListComponent_1.default {
             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;
@@ -561,7 +534,9 @@ class SelectComponent extends ListComponent_1.default {
         }
         // 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([]);
         }
@@ -572,19 +547,17 @@ class SelectComponent extends ListComponent_1.default {
         }
         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_1.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) {
@@ -607,9 +580,7 @@ class SelectComponent extends ListComponent_1.default {
         }
         if (!lodash_1.default.isEmpty(query)) {
             // Add the query string.
-            url +=
-                (!url.includes('?') ? '?' : '&') +
-                    Formio_1.Formio.serialize(query, (item) => this.interpolate(item));
+            url += (!url.includes('?') ? '?' : '&') + Formio_1.Formio.serialize(query, (item) => this.interpolate(item));
         }
         // Add filter capability
         if (this.component.filter) {
@@ -670,7 +641,7 @@ class SelectComponent extends ListComponent_1.default {
     }
     getCustomItems() {
         const customItems = this.evaluate(this.component.data.custom, {
-            values: [],
+            values: []
         }, 'values');
         this.asyncValues = (0, utils_1.isPromise)(customItems);
         return customItems;
@@ -689,11 +660,11 @@ class SelectComponent extends ListComponent_1.default {
             }
             this.loading = true;
             this.getCustomItems()
-                .then((items) => {
+                .then(items => {
                 this.loading = false;
                 this.setItems(items || []);
             })
-                .catch((err) => {
+                .catch(err => {
                 this.handleLoadingError(err);
             });
         }
@@ -705,13 +676,13 @@ class SelectComponent extends ListComponent_1.default {
         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 lodash_1.default.isNil(this.serverCount) || this.serverCount > this.downloadedResources.length;
+        return lodash_1.default.isNil(this.serverCount) || (this.serverCount > this.downloadedResources.length);
     }
     get serverCount() {
         if (this.isFromSearch) {
@@ -763,22 +734,18 @@ class SelectComponent extends ListComponent_1.default {
     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') {
@@ -800,15 +767,13 @@ class SelectComponent extends ListComponent_1.default {
     }
     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') {
@@ -824,27 +789,20 @@ class SelectComponent extends ListComponent_1.default {
             maxPatternLength: 1000,
             distance: 1000,
         };
-        return Object.assign({ removeItemButton: this.component.disabled
-                ? false
-                : lodash_1.default.get(this.component, 'removeItemButton', true), itemSelectText: '', classNames: {
-                containerOuter: [
-                    'choices',
-                    'form-group',
-                    'formio-choices',
-                ],
+        return Object.assign({ removeItemButton: this.component.disabled ? false : lodash_1.default.get(this.component, 'removeItemButton', true), itemSelectText: '', classNames: {
+                containerOuter: ['choices', 'form-group', 'formio-choices'],
                 containerInner: this.transform('class', 'form-control ui fluid selection dropdown').split(' '),
-            }, addItemText: false, allowHTML: true, placeholder: !!this.component.placeholder, 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: !!this.component.placeholder, 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
                 ? 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);
     }
+    /* eslint-disable max-statements */
     attach(element) {
         var _a, _b, _c;
         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;
@@ -857,18 +815,9 @@ class SelectComponent extends ListComponent_1.default {
         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);
@@ -882,10 +831,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);
                 }
             });
@@ -952,10 +898,8 @@ class SelectComponent extends ListComponent_1.default {
                 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);
@@ -982,9 +926,8 @@ class SelectComponent extends ListComponent_1.default {
             });
         }
         // 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();
@@ -992,15 +935,13 @@ class SelectComponent extends ListComponent_1.default {
                 const dialog = this.createModal(formioForm);
                 const projectUrl = lodash_1.default.get(this.root, 'formio.projectUrl', Formio_1.Formio.getProjectUrl());
                 const formUrl = `${projectUrl}/form/${this.component.data.resource}`;
-                new Form_1.default(formioForm, formUrl, {}).ready.then((form) => {
+                new Form_1.default(formioForm, formUrl, {}).ready
+                    .then((form) => {
                     form.on('submit', (submission) => {
                         // 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();
@@ -1046,9 +987,7 @@ class SelectComponent extends ListComponent_1.default {
     }
     positionDropdown(scroll) {
         var _a;
-        if (!this.shouldPositionDropdown ||
-            !this.choices ||
-            (!((_a = this.choices.dropdown) === null || _a === void 0 ? void 0 : _a.isActive) && scroll)) {
+        if (!this.shouldPositionDropdown || !this.choices || (!((_a = this.choices.dropdown) === null || _a === void 0 ? void 0 : _a.isActive) && scroll)) {
             return;
         }
         this.setDropdownPosition();
@@ -1069,12 +1008,11 @@ 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 });
             });
         }
     }
+    /* eslint-enable max-statements */
     update() {
         if (this.component.dataSrc === 'custom') {
             this.updateCustomItems();
@@ -1103,7 +1041,7 @@ class SelectComponent extends ListComponent_1.default {
     }
     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;
@@ -1130,7 +1068,7 @@ class SelectComponent extends ListComponent_1.default {
             const isSelectOptions = items === this.selectOptions;
             if (items && items.length) {
                 lodash_1.default.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;
                     }
@@ -1150,23 +1088,22 @@ class SelectComponent extends ListComponent_1.default {
             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;
@@ -1175,7 +1112,7 @@ class SelectComponent extends ListComponent_1.default {
             // 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;
             }
         }
@@ -1185,7 +1122,8 @@ class SelectComponent extends ListComponent_1.default {
                 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 && lodash_1.default.isObject(option.value)) {
                     value = option.value;
                 }
@@ -1220,18 +1158,16 @@ class SelectComponent extends ListComponent_1.default {
             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 (lodash_1.default.isString(this.value) &&
-                    (this.value.toLowerCase() === 'true' || this.value.toLowerCase() === 'false')) {
-                    this.value = this.value.toLowerCase() === 'true';
+                if (lodash_1.default.isString(this.value)
+                    && (this.value.toLowerCase() === 'true'
+                        || this.value.toLowerCase() === 'false')) {
+                    this.value = (this.value.toLowerCase() === 'true');
                 }
                 return this;
             },
@@ -1250,7 +1186,7 @@ class SelectComponent extends ListComponent_1.default {
                     this.value = this.string().number().boolean().value;
                 }
                 return this;
-            },
+            }
         };
         try {
             return normalize[dataType]().value;
@@ -1284,11 +1220,7 @@ class SelectComponent extends ListComponent_1.default {
         // Check to see if we need to save off the template data into our metadata.
         const templateValue = this.component.reference && (value === null || value === void 0 ? void 0 : value._id) ? value._id.toString() : value;
         const shouldSaveData = (!valueIsObject || this.component.reference) && !this.inDataTable;
-        if (!lodash_1.default.isNil(templateValue) &&
-            shouldSaveData &&
-            this.templateData &&
-            this.templateData[templateValue] &&
-            ((_a = this.root) === null || _a === void 0 ? void 0 : _a.submission)) {
+        if (!lodash_1.default.isNil(templateValue) && shouldSaveData && this.templateData && this.templateData[templateValue] && ((_a = this.root) === null || _a === void 0 ? void 0 : _a.submission)) {
             const submission = this.root.submission;
             if (!submission.metadata) {
                 submission.metadata = {};
@@ -1302,9 +1234,7 @@ class SelectComponent extends ListComponent_1.default {
                 const dataValue = this.dataValue;
                 if (dataValue && lodash_1.default.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];
                     });
                 }
@@ -1324,7 +1254,7 @@ class SelectComponent extends ListComponent_1.default {
         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);
@@ -1335,7 +1265,7 @@ class SelectComponent extends ListComponent_1.default {
     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();
                 }
@@ -1352,9 +1282,7 @@ class SelectComponent extends ListComponent_1.default {
     setValue(value, flags = {}) {
         const previousValue = this.dataValue;
         const changed = this.updateValue(value, flags);
-        if (this.component.widget === 'html5' &&
-            (lodash_1.default.isEqual(value, previousValue) || (lodash_1.default.isEqual(previousValue, {}) && lodash_1.default.isEqual(flags, {}))) &&
-            !flags.fromSubmission) {
+        if (this.component.widget === 'html5' && (lodash_1.default.isEqual(value, previousValue) || lodash_1.default.isEqual(previousValue, {}) && lodash_1.default.isEqual(flags, {})) && !flags.fromSubmission) {
             return false;
         }
         value = this.dataValue;
@@ -1378,9 +1306,6 @@ class SelectComponent extends ListComponent_1.default {
             this.lazyLoadInit = true;
             const searchProperty = this.component.searchField || this.component.valueProperty;
             this.triggerUpdate(lodash_1.default.get(value.data || value, searchProperty, value), true);
-            this.itemsLoaded.then(() => {
-                this.setChoicesValue(value, hasPreviousValue, flags);
-            });
             return changed;
         }
         // Add the value options.
@@ -1391,28 +1316,23 @@ class SelectComponent extends ListComponent_1.default {
         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);
                 }
@@ -1424,13 +1344,9 @@ class SelectComponent extends ListComponent_1.default {
         }
         else {
             if (hasValue) {
-                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 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);
                     this.addOption(value, label);
                 }
@@ -1470,7 +1386,7 @@ class SelectComponent extends ListComponent_1.default {
                         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);
@@ -1479,7 +1395,7 @@ class SelectComponent extends ListComponent_1.default {
                 };
                 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;
     }
@@ -1538,7 +1454,7 @@ class SelectComponent extends ListComponent_1.default {
      */
     deleteValue() {
         this.setValue('', {
-            noUpdateEvent: true,
+            noUpdateEvent: true
         });
         this.unset();
     }
@@ -1561,10 +1477,7 @@ class SelectComponent extends ListComponent_1.default {
         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 = {}) {
         var _a;
@@ -1573,7 +1486,7 @@ class SelectComponent extends ListComponent_1.default {
             if (this.inDataTable) {
                 value = this.undoValueTyping(value);
             }
-            const templateValue = this.isEntireObjectDisplay() && !lodash_1.default.isObject(value.data) ? { data: value } : value;
+            const templateValue = (this.isEntireObjectDisplay() && !lodash_1.default.isObject(value.data)) ? { data: value } : value;
             const template = this.itemTemplate(templateValue, value, options);
             return template;
         }
@@ -1581,7 +1494,7 @@ class SelectComponent extends ListComponent_1.default {
         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 (lodash_1.default.isObject(data)) {
                     data[valueProperty] = data[valueProperty].toString();
@@ -1591,18 +1504,14 @@ class SelectComponent extends ListComponent_1.default {
             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',
@@ -1612,30 +1521,28 @@ 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;
             };
-            value =
-                this.component.multiple && Array.isArray(value)
-                    ? lodash_1.default.filter(items, (item) => value.includes(item.value))
-                    : valueProperty && items
-                        ? ((_a = getFromValues()) !== null && _a !== void 0 ? _a : { value, label: value })
-                        : value;
+            value = (this.component.multiple && Array.isArray(value))
+                ? lodash_1.default.filter(items, (item) => value.includes(item.value))
+                : (valueProperty && items)
+                    ? (_a = getFromValues()) !== null && _a !== void 0 ? _a : { value, label: value }
+                    : value;
         }
         if (lodash_1.default.isString(value)) {
             return value;
         }
         const getTemplateValue = (v) => {
             const itemTemplate = this.itemTemplate(v);
-            return options.csv && itemTemplate ? (0, utils_1.removeHTML)(itemTemplate) : itemTemplate;
+            return options.csv && itemTemplate
+                ? (0, utils_1.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(', ');
             }
@@ -1649,7 +1556,9 @@ class SelectComponent extends ListComponent_1.default {
         if (this.isEntireObjectDisplay() && lodash_1.default.isObject(value)) {
             return JSON.stringify(value);
         }
-        return !lodash_1.default.isNil(value) ? getTemplateValue(value) : '-';
+        return !lodash_1.default.isNil(value)
+            ? getTemplateValue(value)
+            : '-';
     }
     detach() {
         var _a, _b;
@@ -1671,14 +1580,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);
         }
     }
 }