@signal24/vue-foundation 3.8.1 → 4.0.0

package/src/components/smart-select.vue

@@ -16,7 +16,7 @@
             <template v-else>
                 <div
                     v-for="option in effectiveOptions"
-                    :key="option.key"
+                    :key="String(option.key)"
                     class="option"
                     :class="{
                         highlighted: highlightedOptionKey === option.key
@@ -24,8 +24,8 @@
                     @mousemove="handleOptionHover(option)"
                     @mousedown="selectOption(option)"
                 >
-                    <div class="title" v-html="option.titleHtml" />
-                    <div v-if="option.subtitleHtml" class="subtitle" v-html="option.subtitleHtml" />
+                    <div class="title" v-html="option.title" />
+                    <div v-if="option.subtitle" class="subtitle" v-html="option.subtitle" />
                 </div>
                 <div v-if="!effectiveOptions.length && searchText" class="no-results">
                     {{ effectiveNoResultsText }}
@@ -35,44 +35,66 @@
     </div>
 </template>
 
-<script>
-import debounce from 'lodash/debounce';
-import isEqual from 'lodash/isEqual';
+<script lang="ts">
+import { debounce, isEqual } from 'lodash';
+import type { PropType } from 'vue';
 
-const nullSymbol = Symbol(null);
-const createSymbol = Symbol('create');
+import { escapeHtml } from '../helpers/string';
+
+const NullSymbol = Symbol('null');
+const CreateSymbol = Symbol('create');
 
 const VALID_KEYS = `\`1234567890-=[]\\;',./~!@#$%^&*()_+{}|:"<>?qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM`;
 
+// todo: make type safe when Vue alpha is released
+
+export type GenericObject = { [key: string]: any };
+export interface OptionDescriptor {
+    key: string | Symbol;
+    title: string;
+    subtitle?: string | null;
+    searchContent?: string;
+    ref?: GenericObject;
+}
+
 export default {
-    emits: ['optionsLoaded', 'createItem', 'update:modelValue'],
-
-    props: [
-        'modelValue',
-        'options',
-        'prependOptions',
-        'appendOptions',
-        'preload',
-        'url',
-        'urlParams',
-        'remoteSearch',
-        'searchFields',
-        'placeholder',
-        'valueKey',
-        'idKey',
-        'titleKey',
-        'titleFormatter',
-        'subtitleKey',
-        'subtitleFormatter',
-        'nullTitle',
-        'noResultsText',
-        'disabled',
-        'optionsListId',
-        'debug'
-    ],
+    props: {
+        modelValue: {
+            type: null as unknown as PropType<any>,
+            default: null
+        },
+        loadOptions: Function as PropType<(searchText: string | null) => Promise<GenericObject[]>>,
+        options: Object as PropType<GenericObject[]>,
+        prependOptions: Object as PropType<GenericObject[]>,
+        appendOptions: Object as PropType<GenericObject[]>,
+        onCreateItem: Function as PropType<(searchText: string) => void>,
+        preload: Boolean as PropType<boolean>,
+        remoteSearch: Boolean as PropType<boolean>,
+        searchFields: Object as PropType<string[]>,
+        placeholder: String as PropType<string>,
+        keyExtractor: Function as PropType<(option: any) => string | symbol>,
+        valueExtractor: Function as PropType<(option: any) => any>,
+        formatter: {
+            type: Function as PropType<(option: any) => string>,
+            required: true
+        },
+        subtitleFormatter: Function as PropType<(option: any) => string>,
+        nullTitle: String as PropType<string>,
+        noResultsText: String as PropType<string>,
+        disabled: Boolean as PropType<boolean>,
+        optionsListId: String as PropType<string>,
+        debug: Boolean as PropType<boolean>
+    },
+
+    emits: {
+        optionsLoaded: Object as (options: any[]) => void,
+        createItem: Object as (searchText: string) => void,
+        'update:modelValue': Object as (value: any) => void
+    },
 
     data() {
         return {
+            isLoading: false,
             isLoaded: false,
             loadedOptions: [],
             isSearching: false,
@@ -82,6 +104,17 @@ export default {
             shouldDisplayOptions: false,
             highlightedOptionKey: null,
             shouldShowCreateOption: false
+        } as {
+            isLoading: boolean;
+            isLoaded: boolean;
+            loadedOptions: GenericObject[];
+            isSearching: boolean;
+            searchText: string;
+            selectedOption: GenericObject | null;
+            selectedOptionTitle: string | null;
+            shouldDisplayOptions: boolean;
+            highlightedOptionKey: string | Symbol | null;
+            shouldShowCreateOption: boolean;
         };
     },
 
@@ -89,66 +122,48 @@ export default {
         /**
          * EFFECTIVE PROPS
          */
-        effectiveDisabled() {
-            return this.disabled || !this.loadedOptions;
+        effectivePrependOptions() {
+            return this.prependOptions ?? [];
         },
 
-        effectivePlaceholder() {
-            if (!this.isLoaded && this.$isPropTruthy(this.preload)) return 'Loading...';
-            if (this.nullTitle) return this.nullTitle;
-            return this.placeholder || '';
-        },
-
-        effectiveIdKey() {
-            return this.idKey || 'id';
+        effectiveAppendOptions() {
+            return this.appendOptions ?? [];
         },
 
-        effectiveTitleKey() {
-            return this.titleKey || 'name';
+        effectiveDisabled() {
+            return !!this.disabled; // there was another condition here but it didn't make sense
         },
 
-        effectiveValueKey() {
-            if (this.valueKey) return this.valueKey;
-            if (this.options && !Array.isArray(this.options)) return this.effectiveIdKey;
-            return undefined;
+        effectivePlaceholder() {
+            if (!this.isLoaded && this.preload) return 'Loading...';
+            if (this.nullTitle) return this.nullTitle;
+            return this.placeholder || '';
         },
 
         effectiveNoResultsText() {
             return this.noResultsText || 'No options match your search.';
         },
 
-        effectiveRemoteSearch() {
-            return this.$isPropTruthy(this.remoteSearch);
+        effectiveKeyExtractor() {
+            return this.keyExtractor ?? this.valueExtractor;
         },
 
         /**
          * OPTIONS GENERATION
          */
 
-        loadedOptionsArray() {
-            return this.arrayifyOptions(this.loadedOptions);
-        },
-
-        prependOptionsArray() {
-            return this.prependOptions ? this.arrayifyOptions(this.prependOptions) : [];
-        },
-
-        appendOptionsArray() {
-            return this.appendOptions ? this.arrayifyOptions(this.appendOptions) : [];
-        },
-
-        fullOptionsArray() {
-            return [...this.prependOptionsArray, ...this.loadedOptionsArray, ...this.appendOptionsArray];
+        allOptions() {
+            return [...this.effectivePrependOptions, ...this.loadedOptions, ...this.effectiveAppendOptions];
         },
 
         optionsDescriptors() {
-            return this.fullOptionsArray.map((option, index) => {
-                const title = this.getOptionTitle(option);
-                const subtitle = this.getOptionSubtitle(option);
-                const strippedTitle = title ? title.text.trim().toLowerCase() : '';
-                const strippedSubtitle = subtitle ? subtitle.text.trim().toLowerCase() : '';
+            return this.allOptions.map((option, index) => {
+                const title = this.formatter!(option);
+                const subtitle = this.subtitleFormatter?.(option);
+                const strippedTitle = title ? title.trim().toLowerCase() : '';
+                const strippedSubtitle = subtitle ? subtitle.trim().toLowerCase() : '';
 
-                let searchContent = [];
+                const searchContent = [];
                 if (this.searchFields) {
                     this.searchFields.forEach(field => {
                         option[field] && searchContent.push(String(option[field]).toLowerCase());
@@ -159,12 +174,13 @@ export default {
                 }
 
                 return {
-                    key: typeof option == 'object' ? option[this.effectiveIdKey] || index : option,
-                    titleHtml: title.html,
-                    subtitleHtml: subtitle?.html,
+                    // eslint-disable-next-line vue/no-use-computed-property-like-method
+                    key: this.effectiveKeyExtractor?.(option) ?? String(index),
+                    title,
+                    subtitle,
                     searchContent: searchContent.join(''),
                     ref: option
-                };
+                } as OptionDescriptor;
             });
         },
 
@@ -175,34 +191,31 @@ export default {
                 const strippedSearchText = this.searchText.trim().toLowerCase();
 
                 if (strippedSearchText.length) {
-                    options = options.filter(option => option.searchContent.includes(strippedSearchText));
+                    options = options.filter(option => option.searchContent!.includes(strippedSearchText));
 
-                    const escapedSearchText = this.searchText.escapeHtml().replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&');
+                    const escapedSearchText = escapeHtml(this.searchText).replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&');
                     const searchRe = new RegExp(`(${escapedSearchText})`, 'ig');
 
-                    options = options.map(option => {
-                        option = { ...option };
-                        option.titleHtml = option.titleHtml.replace(searchRe, '<mark>$1</mark>');
-                        if (option.subtitleHtml)
-                            option.subtitleHtml = option.subtitleHtml.replace(searchRe, '<mark>$1</mark>');
-                        return option;
-                    });
+                    options = options.map(option => ({
+                        ...option,
+                        title: option.title.replace(searchRe, '<mark>$1</mark>'),
+                        subtitle: option.subtitle?.replace(searchRe, '<mark>$1</mark>')
+                    }));
 
                     if (this.shouldShowCreateOption) {
-                        const hasExactMatch =
-                            options.find(option => option.searchContent === strippedSearchText) !== undefined;
+                        const hasExactMatch = options.find(option => option.searchContent === strippedSearchText) !== undefined;
                         if (!hasExactMatch) {
                             options.push({
-                                key: createSymbol,
-                                titleHtml: 'Create <strong>' + this.searchText.trim() + '</strong>...'
+                                key: CreateSymbol,
+                                title: 'Create <strong>' + this.searchText.trim() + '</strong>...'
                             });
                         }
                     }
                 }
             } else if (this.nullTitle) {
                 options.unshift({
-                    key: nullSymbol,
-                    titleHtml: this.nullTitle
+                    key: NullSymbol,
+                    title: this.nullTitle
                 });
             }
 
@@ -218,22 +231,7 @@ export default {
         },
 
         options() {
-            this.loadedOptions = this.options;
-        },
-
-        url() {
-            console.log('url changed');
-            this.handleSourceUpdate();
-        },
-
-        // we should probably solve this more consistently across the board,
-        // but for now: urlParams may be a hardcoded object in the parent, so
-        // on re-render, a new object literal may be created, which is *technically*
-        // a change that will fire this
-        urlParams(newValue, oldValue) {
-            if (!isEqual(oldValue, newValue)) {
-                this.handleSourceUpdate();
-            }
+            this.loadedOptions = this.options ?? [];
         },
 
         // data
@@ -246,7 +244,7 @@ export default {
 
         searchText() {
             // don't disable searching here if it's remote search, as that will need to be done after the fetch
-            if (this.isSearching && !this.effectiveRemoteSearch && !this.searchText.trim().length) {
+            if (this.isSearching && !this.remoteSearch && !this.searchText.trim().length) {
                 this.isSearching = false;
             }
         },
@@ -257,15 +255,20 @@ export default {
             } else {
                 this.isSearching = false;
                 this.searchText = this.selectedOptionTitle || '';
+
+                if (this.$refs.optionsContainer) {
+                    (this.$refs.optionsContainer as HTMLElement).style.visibility = 'hidden';
+                }
             }
         },
 
         effectiveOptions() {
-            if (
-                !this.highlightedOptionKey ||
-                !this.effectiveOptions.find(option => option.key == this.highlightedOptionKey)
-            ) {
-                this.highlightedOptionKey = this.effectiveOptions.length ? this.effectiveOptions[0].key : null;
+            if (this.modelValue && !this.selectedOption) {
+                this.handleValueChanged();
+            }
+
+            if (this.highlightedOptionKey && !this.effectiveOptions.find(option => option.key == this.highlightedOptionKey)) {
+                this.highlightedOptionKey = this.effectiveOptions[0]?.key ?? NullSymbol;
             }
         }
     },
@@ -276,23 +279,22 @@ export default {
         if (this.options) {
             this.loadedOptions = this.options;
             this.isLoaded = true;
-        } else if (this.$isPropTruthy(this.preload)) {
+        } else if (this.preload) {
             await this.loadRemoteOptions();
         }
 
         this.handleValueChanged();
 
         this.$watch('selectedOption', () => {
-            const newValue =
-                this.selectedOption && this.effectiveValueKey
-                    ? this.selectedOption[this.effectiveValueKey]
-                    : this.selectedOption;
-            if (newValue !== this.modelValue) {
-                this.$emit('update:modelValue', newValue);
+            if (this.selectedOption !== this.modelValue) {
+                this.$emit(
+                    'update:modelValue',
+                    this.selectedOption && this.valueExtractor ? this.valueExtractor(this.selectedOption) : this.selectedOption
+                );
             }
         });
 
-        if (this.effectiveRemoteSearch) {
+        if (this.remoteSearch) {
             this.$watch('searchText', debounce(this.reloadOptionsIfSearching, 250));
         }
     },
@@ -300,11 +302,10 @@ export default {
     methods: {
         async loadRemoteOptions() {
             await this.reloadOptions();
-            this.$emit('optionsLoaded', this.loadedOptions);
+            this.loadedOptions && this.$emit('optionsLoaded', this.loadedOptions);
         },
 
         handleSourceUpdate() {
-            console.log('source updated');
             if (this.preload) return this.reloadOptions();
             if (!this.isLoaded) return;
             this.isLoaded = false;
@@ -312,15 +313,10 @@ export default {
         },
 
         async reloadOptions() {
-            let params = {};
-            this.urlParams && Object.assign(params, this.urlParams);
-
-            if (this.effectiveRemoteSearch && this.isSearching && this.searchText) {
-                params.q = this.searchText;
-            }
-
-            const result = await this.$http.get(this.url, { params: params });
-            this.loadedOptions = result.data;
+            const searchText = this.remoteSearch && this.isSearching && this.searchText ? this.searchText : null;
+            this.isLoading = true;
+            this.loadedOptions = (await this.loadOptions?.(searchText)) ?? [];
+            this.isLoading = false;
             this.isLoaded = true;
         },
 
@@ -331,10 +327,10 @@ export default {
             }
         },
 
-        handleKeyDown(e) {
+        handleKeyDown(e: KeyboardEvent) {
             if (e.key == 'Escape') {
                 e.stopPropagation();
-                e.target.blur();
+                (e.target as any).blur();
                 return;
             }
 
@@ -358,9 +354,7 @@ export default {
 
             if (e.key == 'Home' || e.key == 'End') {
                 e.preventDefault();
-                return this.incrementHighlightedOption(
-                    e.key == 'Home' ? -Number.MAX_SAFE_INTEGER : Number.MAX_SAFE_INTEGER
-                );
+                return this.incrementHighlightedOption(e.key == 'Home' ? -Number.MAX_SAFE_INTEGER : Number.MAX_SAFE_INTEGER);
             }
 
             if (e.key == 'Enter') {
@@ -382,18 +376,49 @@ export default {
         },
 
         handleInputFocused() {
-            if (this.selectedOption)
-                this.highlightedOptionKey =
-                    typeof this.selectedOption == 'object' && this.selectedOption !== null
-                        ? this.selectedOption[this.effectiveIdKey]
-                        : this.selectedOption;
-            else if (this.nullTitle) this.highlightedOptionKey = nullSymbol;
-
+            this.setHighlightedOptionKey();
             this.shouldDisplayOptions = true;
         },
 
+        setHighlightedOptionKey(useFirstItemAsFallback?: boolean) {
+            if (this.selectedOption) {
+                this.highlightedOptionKey = this.getOptionKey(this.selectedOption);
+            } else if (useFirstItemAsFallback) {
+                this.highlightedOptionKey = this.effectiveOptions?.[0].key ?? NullSymbol;
+            } else if (this.nullTitle) {
+                this.highlightedOptionKey = NullSymbol;
+            }
+        },
+
+        getOptionKey(option: GenericObject): string | Symbol {
+            if (this.effectiveKeyExtractor) {
+                // eslint-disable-next-line vue/no-use-computed-property-like-method
+                return this.effectiveKeyExtractor(this.selectedOption)!;
+            }
+
+            return this.getOptionDescriptor(option)?.key ?? '';
+        },
+
+        getOptionDescriptor(option: GenericObject) {
+            const matchedRef = this.effectiveOptions.find(o => o.ref === option);
+            if (matchedRef) {
+                return matchedRef;
+            }
+
+            // for reasons I've yet to determine, the prepend options, although they are wrapped by proxies and have identical content,
+            // are not the same proxy object as selectedOption once assigned -- even though the loaded data *is* the same. I've tried
+            // setting them as reactive using the same method (via data props rather than computed) and it didn't change anything.
+            // therefore, falling back to an isEqual check here when there's no equal object
+            const matchedObj = this.effectiveOptions.find(o => isEqual(o.ref, option));
+            if (matchedObj) {
+                return matchedObj;
+            }
+
+            return null;
+        },
+
         handleInputBlurred() {
-            if (this.$isPropTruthy(this.debug)) return;
+            if (this.debug) return;
 
             if (!this.searchText.length && this.nullTitle) {
                 this.selectedOption = null;
@@ -405,8 +430,8 @@ export default {
 
         handleOptionsDisplayed() {
             this.isLoaded || this.loadRemoteOptions();
+            this.optionsListId && (this.$refs.optionsContainer as HTMLElement).setAttribute('id', this.optionsListId);
             this.teleportOptionsContainer();
-            this.optionsListId && this.$refs.optionsContainer.setAttribute('id', this.optionsListId);
         },
 
         teleportOptionsContainer() {
@@ -414,7 +439,7 @@ export default {
             const targetTop = elRect.y + elRect.height + 2;
             const targetLeft = elRect.x;
 
-            const optionsEl = this.$refs.optionsContainer;
+            const optionsEl = this.$refs.optionsContainer as HTMLElement;
             const styles = window.getComputedStyle(this.$el);
 
             for (let key in styles) {
@@ -431,6 +456,8 @@ export default {
                 optionsEl.style.maxHeight = maxHeight + 'px';
             }
 
+            optionsEl.style.visibility = 'visible';
+
             document.body.appendChild(optionsEl);
 
             setTimeout(this.highlightInitialOption, 0);
@@ -439,83 +466,65 @@ export default {
         highlightInitialOption() {
             if (!this.isLoaded) return;
             if (!this.highlightedOptionKey) return;
-            const highlightedOptionIdx = this.effectiveOptions.findIndex(
-                option => option.key == this.highlightedOptionKey
-            );
-            const containerEl = this.$refs.optionsContainer;
-            const highlightedOptionEl = containerEl.querySelectorAll('.option')[highlightedOptionIdx];
+            const highlightedOptionIdx = this.effectiveOptions.findIndex(option => option.key == this.highlightedOptionKey);
+            const containerEl = this.$refs.optionsContainer as HTMLElement;
+            const highlightedOptionEl = containerEl.querySelectorAll('.option')[highlightedOptionIdx] as HTMLElement;
             containerEl.scrollTop = highlightedOptionEl.offsetTop;
         },
 
-        handleOptionHover(option) {
+        handleOptionHover(option: OptionDescriptor) {
             this.highlightedOptionKey = option ? option.key : null;
         },
 
-        incrementHighlightedOption(increment) {
-            const highlightedOptionIdx = this.effectiveOptions.findIndex(
-                option => option.key == this.highlightedOptionKey
-            );
+        incrementHighlightedOption(increment: number) {
+            const highlightedOptionIdx = this.effectiveOptions.findIndex(option => option.key == this.highlightedOptionKey);
             let targetOptionIdx = highlightedOptionIdx + increment;
 
             if (targetOptionIdx < 0) targetOptionIdx = 0;
-            else if (targetOptionIdx >= this.effectiveOptions.length)
-                targetOptionIdx = this.effectiveOptions.length - 1;
+            else if (targetOptionIdx >= this.effectiveOptions.length) targetOptionIdx = this.effectiveOptions.length - 1;
 
             if (highlightedOptionIdx == targetOptionIdx) return;
 
             this.highlightedOptionKey = this.effectiveOptions[targetOptionIdx].key;
 
-            const containerEl = this.$refs.optionsContainer;
-            const targetOptionEl = containerEl.querySelectorAll('.option')[targetOptionIdx];
+            const containerEl = this.$refs.optionsContainer as HTMLElement;
+            const targetOptionEl = containerEl.querySelectorAll('.option')[targetOptionIdx] as HTMLElement;
 
             if (targetOptionEl.offsetTop < containerEl.scrollTop) {
                 containerEl.scrollTop = targetOptionEl.offsetTop;
-            } else if (
-                targetOptionEl.offsetTop + targetOptionEl.offsetHeight >
-                containerEl.scrollTop + containerEl.clientHeight
-            ) {
-                containerEl.scrollTop =
-                    targetOptionEl.offsetTop + targetOptionEl.offsetHeight - containerEl.clientHeight;
+            } else if (targetOptionEl.offsetTop + targetOptionEl.offsetHeight > containerEl.scrollTop + containerEl.clientHeight) {
+                containerEl.scrollTop = targetOptionEl.offsetTop + targetOptionEl.offsetHeight - containerEl.clientHeight;
             }
         },
 
-        selectOption(option) {
+        selectOption(option: OptionDescriptor) {
             this.isSearching = false;
 
-            if (option.key == nullSymbol) {
+            if (option.key == NullSymbol) {
                 this.searchText = '';
                 this.selectedOption = null;
                 this.selectedOptionTitle = null;
-            } else if (option.key === createSymbol) {
+            } else if (option.key === CreateSymbol) {
                 const createText = this.searchText.trim();
                 this.searchText = '';
                 this.selectedOption = null;
                 this.selectedOptionTitle = null;
                 this.$emit('createItem', createText);
             } else {
-                const selectedDecoratedOption = this.optionsDescriptors.find(
-                    decoratedOption => decoratedOption.key == option.key
-                );
-                const realOption = selectedDecoratedOption.ref;
-                this.selectedOption = realOption;
-                this.selectedOptionTitle = this.getOptionTitle(this.selectedOption).text;
+                const selectedDecoratedOption = this.optionsDescriptors.find(decoratedOption => decoratedOption.key == option.key);
+                const realOption = selectedDecoratedOption!.ref;
+                this.selectedOption = realOption!;
+                this.selectedOptionTitle = this.formatter!(realOption!);
                 this.searchText = this.selectedOptionTitle || '';
             }
 
-            this.$refs.searchField.blur();
+            (this.$refs.searchField as HTMLElement).blur();
         },
 
         handleValueChanged() {
             if (this.modelValue) {
-                if (this.effectiveValueKey) {
-                    this.selectedOption = this.fullOptionsArray.find(
-                        option => option[this.effectiveValueKey] === this.modelValue
-                    );
-                } else {
-                    this.selectedOption = this.modelValue;
-                }
-
-                this.selectedOptionTitle = this.getOptionTitle(this.selectedOption).text;
+                this.selectedOption = this.valueExtractor ? this.allOptions.find(o => this.modelValue === this.valueExtractor!(o)) : this.modelValue;
+                this.selectedOptionTitle = this.selectedOption ? this.formatter!(this.selectedOption) : null;
                 this.searchText = this.selectedOptionTitle || '';
             } else {
                 this.selectedOption = null;
@@ -524,65 +533,8 @@ export default {
             }
         },
 
-        getOptionTitle(option) {
-            if (option === null) return null;
-
-            if (this.titleFormatter) {
-                const result = this.titleFormatter(option);
-                if (typeof result == 'object') {
-                    return {
-                        text: result.text || result.html.replace(/<[^>]+>/g, ''),
-                        html: result.html
-                    };
-                } else {
-                    return {
-                        text: result,
-                        html: result.escapeHtml()
-                    };
-                }
-            }
-
-            const text = String(typeof option != 'object' ? option : option[this.effectiveTitleKey]);
-            return { text, html: text.escapeHtml() };
-        },
-
-        getOptionSubtitle(option) {
-            if (option === null) return null;
-
-            if (this.subtitleFormatter) {
-                const result = this.subtitleFormatter(option);
-                if (!result) return null;
-                if (typeof result == 'object') {
-                    return {
-                        text: result.text || result.html.replace(/<[^>]+>/g, ''),
-                        html: result.html
-                    };
-                } else {
-                    return {
-                        text: result,
-                        html: result.escapeHtml()
-                    };
-                }
-            }
-
-            let text = typeof option != 'object' ? null : option[this.subtitleKey];
-            if (!text) return null;
-
-            text = String(text);
-            return { text, html: text.escapeHtml() };
-        },
-
-        addRemoteOption(option) {
+        addRemoteOption(option: GenericObject) {
             this.loadedOptions.push(option);
-        },
-
-        arrayifyOptions(options) {
-            return Array.isArray(options)
-                ? options
-                : Object.entries(options).map(entry => ({
-                      [this.effectiveIdKey]: entry[0],
-                      [this.effectiveTitleKey]: entry[1]
-                  }));
         }
     }
 };
@@ -634,6 +586,7 @@ export default {
 }
 
 .vf-smart-select-options {
+    visibility: hidden;
     position: absolute;
     min-height: 20px;
     border: 1px solid #e8e8e8;