slim-select 2.8.2 → 2.9.0

package/dist/slimselect.es.js

@@ -1,3 +1,51 @@
+class CssClasses {
+    constructor(classes) {
+        if (!classes) {
+            classes = {};
+        }
+        this.main = classes.main || 'ss-main';
+        this.placeholder = classes.placeholder || 'ss-placeholder';
+        this.values = classes.values || 'ss-values';
+        this.single = classes.single || 'ss-single';
+        this.max = classes.max || 'ss-max';
+        this.value = classes.value || 'ss-value';
+        this.valueText = classes.valueText || 'ss-value-text';
+        this.valueDelete = classes.valueDelete || 'ss-value-delete';
+        this.valueOut = classes.valueOut || 'ss-value-out';
+        this.deselect = classes.deselect || 'ss-deselect';
+        this.deselectPath = classes.deselectPath || 'M10,10 L90,90 M10,90 L90,10';
+        this.arrow = classes.arrow || 'ss-arrow';
+        this.arrowClose = classes.arrowClose || 'M10,30 L50,70 L90,30';
+        this.arrowOpen = classes.arrowOpen || 'M10,70 L50,30 L90,70';
+        this.content = classes.content || 'ss-content';
+        this.openAbove = classes.openAbove || 'ss-open-above';
+        this.openBelow = classes.openBelow || 'ss-open-below';
+        this.search = classes.search || 'ss-search';
+        this.searchHighlighter = classes.searchHighlighter || 'ss-search-highlight';
+        this.searching = classes.searching || 'ss-searching';
+        this.addable = classes.addable || 'ss-addable';
+        this.addablePath = classes.addablePath || 'M50,10 L50,90 M10,50 L90,50';
+        this.list = classes.list || 'ss-list';
+        this.optgroup = classes.optgroup || 'ss-optgroup';
+        this.optgroupLabel = classes.optgroupLabel || 'ss-optgroup-label';
+        this.optgroupLabelText = classes.optgroupLabelText || 'ss-optgroup-label-text';
+        this.optgroupActions = classes.optgroupActions || 'ss-optgroup-actions';
+        this.optgroupSelectAll = classes.optgroupSelectAll || 'ss-selectall';
+        this.optgroupSelectAllBox = classes.optgroupSelectAllBox || 'M60,10 L10,10 L10,90 L90,90 L90,50';
+        this.optgroupSelectAllCheck = classes.optgroupSelectAllCheck || 'M30,45 L50,70 L90,10';
+        this.optgroupClosable = classes.optgroupClosable || 'ss-closable';
+        this.option = classes.option || 'ss-option';
+        this.optionDelete = classes.optionDelete || 'M10,10 L90,90 M10,90 L90,10';
+        this.highlighted = classes.highlighted || 'ss-highlighted';
+        this.open = classes.open || 'ss-open';
+        this.close = classes.close || 'ss-close';
+        this.selected = classes.selected || 'ss-selected';
+        this.error = classes.error || 'ss-error';
+        this.disabled = classes.disabled || 'ss-disabled';
+        this.hide = classes.hide || 'ss-hide';
+    }
+}
+
 function generateID() {
     return Math.random().toString(36).substring(2, 10);
 }
@@ -85,6 +133,7 @@ class Store {
     constructor(type, data) {
         this.selectType = 'single';
         this.data = [];
+        this.selectedOrder = [];
         this.selectType = type;
         this.setData(data);
     }
@@ -99,12 +148,18 @@ class Store {
                 }
                 if ('options' in dataObj && dataObj.options) {
                     for (let option of dataObj.options) {
-                        return this.validateOption(option);
+                        const validationError = this.validateOption(option);
+                        if (validationError) {
+                            return validationError;
+                        }
                     }
                 }
             }
             else if (dataObj instanceof Option || 'text' in dataObj) {
-                return this.validateOption(dataObj);
+                const validationError = this.validateOption(dataObj);
+                if (validationError) {
+                    return validationError;
+                }
             }
             else {
                 return new Error('Data object must be a valid optgroup or option');
@@ -141,7 +196,7 @@ class Store {
     setData(data) {
         this.data = this.partialToFullData(data);
         if (this.selectType === 'single') {
-            this.setSelectedBy('value', this.getSelected());
+            this.setSelectedBy('id', this.getSelected());
         }
     }
     getData() {
@@ -150,12 +205,19 @@ class Store {
     getDataOptions() {
         return this.filter(null, false);
     }
-    addOption(option) {
-        this.setData(this.getData().concat(new Option(option)));
+    addOption(option, addToStart = false) {
+        if (addToStart) {
+            let data = [new Option(option)];
+            this.setData(data.concat(this.getData()));
+        }
+        else {
+            this.setData(this.getData().concat(new Option(option)));
+        }
     }
     setSelectedBy(selectedType, selectedValues) {
         let firstOption = null;
         let hasSelected = false;
+        const selectedObjects = [];
         for (let dataObj of this.data) {
             if (dataObj instanceof Optgroup) {
                 for (let option of dataObj.options) {
@@ -163,8 +225,11 @@ class Store {
                         firstOption = option;
                     }
                     option.selected = hasSelected ? false : selectedValues.includes(option[selectedType]);
-                    if (option.selected && this.selectType === 'single') {
-                        hasSelected = true;
+                    if (option.selected) {
+                        selectedObjects.push(option);
+                        if (this.selectType === 'single') {
+                            hasSelected = true;
+                        }
                     }
                 }
             }
@@ -173,36 +238,35 @@ class Store {
                     firstOption = dataObj;
                 }
                 dataObj.selected = hasSelected ? false : selectedValues.includes(dataObj[selectedType]);
-                if (dataObj.selected && this.selectType === 'single') {
-                    hasSelected = true;
+                if (dataObj.selected) {
+                    selectedObjects.push(dataObj);
+                    if (this.selectType === 'single') {
+                        hasSelected = true;
+                    }
                 }
             }
         }
         if (this.selectType === 'single' && firstOption && !hasSelected) {
             firstOption.selected = true;
+            selectedObjects.push(firstOption);
         }
+        const selectedIds = selectedValues.map((value) => {
+            var _a;
+            return ((_a = selectedObjects.find((option) => option[selectedType] === value)) === null || _a === void 0 ? void 0 : _a.id) || '';
+        });
+        this.selectedOrder = selectedIds;
     }
     getSelected() {
-        let selectedOptions = this.getSelectedOptions();
-        let selectedValues = [];
-        selectedOptions.forEach((option) => {
-            selectedValues.push(option.value);
-        });
-        return selectedValues;
+        return this.getSelectedOptions().map((option) => option.id);
+    }
+    getSelectedValues() {
+        return this.getSelectedOptions().map((option) => option.value);
     }
     getSelectedOptions() {
         return this.filter((opt) => {
             return opt.selected;
         }, false);
     }
-    getSelectedIDs() {
-        let selectedOptions = this.getSelectedOptions();
-        let selectedIDs = [];
-        selectedOptions.forEach((op) => {
-            selectedIDs.push(op.id);
-        });
-        return selectedIDs;
-    }
     getOptgroupByID(id) {
         for (let dataObj of this.data) {
             if (dataObj instanceof Optgroup && dataObj.id === id) {
@@ -273,54 +337,35 @@ class Store {
         });
         return dataSearch;
     }
+    selectedOrderOptions(options) {
+        const newOrder = [];
+        this.selectedOrder.forEach((id) => {
+            const option = options.find((opt) => opt.id === id);
+            if (option) {
+                newOrder.push(option);
+            }
+        });
+        options.forEach((option) => {
+            let isIn = false;
+            newOrder.forEach((selectedOption) => {
+                if (option.id === selectedOption.id) {
+                    isIn = true;
+                    return;
+                }
+            });
+            if (!isIn) {
+                newOrder.push(option);
+            }
+        });
+        return newOrder;
+    }
 }
 
 class Render {
-    constructor(settings, store, callbacks) {
-        this.classes = {
-            main: 'ss-main',
-            placeholder: 'ss-placeholder',
-            values: 'ss-values',
-            single: 'ss-single',
-            max: 'ss-max',
-            value: 'ss-value',
-            valueText: 'ss-value-text',
-            valueDelete: 'ss-value-delete',
-            valueOut: 'ss-value-out',
-            deselect: 'ss-deselect',
-            deselectPath: 'M10,10 L90,90 M10,90 L90,10',
-            arrow: 'ss-arrow',
-            arrowClose: 'M10,30 L50,70 L90,30',
-            arrowOpen: 'M10,70 L50,30 L90,70',
-            content: 'ss-content',
-            openAbove: 'ss-open-above',
-            openBelow: 'ss-open-below',
-            search: 'ss-search',
-            searchHighlighter: 'ss-search-highlight',
-            searching: 'ss-searching',
-            addable: 'ss-addable',
-            addablePath: 'M50,10 L50,90 M10,50 L90,50',
-            list: 'ss-list',
-            optgroup: 'ss-optgroup',
-            optgroupLabel: 'ss-optgroup-label',
-            optgroupLabelText: 'ss-optgroup-label-text',
-            optgroupActions: 'ss-optgroup-actions',
-            optgroupSelectAll: 'ss-selectall',
-            optgroupSelectAllBox: 'M60,10 L10,10 L10,90 L90,90 L90,50',
-            optgroupSelectAllCheck: 'M30,45 L50,70 L90,10',
-            optgroupClosable: 'ss-closable',
-            option: 'ss-option',
-            optionDelete: 'M10,10 L90,90 M10,90 L90,10',
-            highlighted: 'ss-highlighted',
-            open: 'ss-open',
-            close: 'ss-close',
-            selected: 'ss-selected',
-            error: 'ss-error',
-            disabled: 'ss-disabled',
-            hide: 'ss-hide',
-        };
+    constructor(settings, classes, store, callbacks) {
         this.store = store;
         this.settings = settings;
+        this.classes = classes;
         this.callbacks = callbacks;
         this.main = this.mainDiv();
         this.content = this.contentDiv();
@@ -416,7 +461,7 @@ class Render {
                     this.callbacks.close();
                     return false;
             }
-            return false;
+            return true;
         };
         main.onclick = (e) => {
             if (this.settings.disabled) {
@@ -454,8 +499,8 @@ class Render {
                 }
                 else {
                     const firstOption = this.store.getFirstOption();
-                    const value = firstOption ? firstOption.value : '';
-                    this.callbacks.setSelected(value, false);
+                    const id = firstOption ? firstOption.id : '';
+                    this.callbacks.setSelected(id, false);
                 }
                 if (this.settings.closeOnSelect) {
                     this.callbacks.close();
@@ -488,12 +533,12 @@ class Render {
             deselect: {
                 main: deselect,
                 svg: deselectSvg,
-                path: deselectPath,
+                path: deselectPath
             },
             arrow: {
                 main: arrow,
-                path: arrowPath,
-            },
+                path: arrowPath
+            }
         };
     }
     mainFocus(eventType) {
@@ -579,6 +624,9 @@ class Render {
                 maxValuesMessage.remove();
             }
         }
+        if (this.settings.keepOrder) {
+            selectedOptions = this.store.selectedOrderOptions(selectedOptions);
+        }
         let removeNodes = [];
         for (let i = 0; i < currentNodes.length; i++) {
             const node = currentNodes[i];
@@ -632,7 +680,7 @@ class Render {
         value.dataset.id = option.id;
         const text = document.createElement('div');
         text.classList.add(this.classes.valueText);
-        text.innerText = option.text;
+        text.textContent = option.text;
         value.appendChild(text);
         if (!option.mandatory) {
             const deleteDiv = document.createElement('div');
@@ -655,18 +703,18 @@ class Render {
                     shouldDelete = this.callbacks.beforeChange(after, before) === true;
                 }
                 if (shouldDelete) {
-                    let selectedValues = [];
+                    let selectedIds = [];
                     for (const o of after) {
                         if (o instanceof Optgroup) {
                             for (const c of o.options) {
-                                selectedValues.push(c.value);
+                                selectedIds.push(c.id);
                             }
                         }
                         if (o instanceof Option) {
-                            selectedValues.push(o.value);
+                            selectedIds.push(o.id);
                         }
                     }
-                    this.callbacks.setSelected(selectedValues, false);
+                    this.callbacks.setSelected(selectedIds, false);
                     if (this.settings.closeOnSelect) {
                         this.callbacks.close();
                     }
@@ -696,7 +744,7 @@ class Render {
         return {
             main: main,
             search: search,
-            list: list,
+            list: list
         };
     }
     moveContent() {
@@ -726,7 +774,7 @@ class Render {
         main.classList.add(this.classes.search);
         const searchReturn = {
             main,
-            input,
+            input
         };
         if (!this.settings.showSearch) {
             main.classList.add(this.classes.hide);
@@ -754,9 +802,15 @@ class Render {
                 case 'Escape':
                     this.callbacks.close();
                     return false;
-                case 'Enter':
                 case ' ':
-                    if (this.callbacks.addable && e.ctrlKey) {
+                    const highlighted = this.content.list.querySelector('.' + this.classes.highlighted);
+                    if (highlighted) {
+                        highlighted.click();
+                        return false;
+                    }
+                    return true;
+                case 'Enter':
+                    if (this.callbacks.addable) {
                         addable.click();
                         return false;
                     }
@@ -795,12 +849,12 @@ class Render {
                     let newOption = new Option(oo);
                     this.callbacks.addOption(newOption);
                     if (this.settings.isMultiple) {
-                        let values = this.store.getSelected();
-                        values.push(newOption.value);
-                        this.callbacks.setSelected(values, true);
+                        let ids = this.store.getSelected();
+                        ids.push(newOption.id);
+                        this.callbacks.setSelected(ids, true);
                     }
                     else {
-                        this.callbacks.setSelected([newOption.value], true);
+                        this.callbacks.setSelected([newOption.id], true);
                     }
                     this.callbacks.search('');
                     if (this.settings.closeOnSelect) {
@@ -818,9 +872,12 @@ class Render {
                         if (typeof value === 'string') {
                             runFinish({
                                 text: value,
-                                value: value,
+                                value: value
                             });
                         }
+                        else if (addableValue instanceof Error) {
+                            this.renderError(addableValue.message);
+                        }
                         else {
                             runFinish(value);
                         }
@@ -829,9 +886,12 @@ class Render {
                 else if (typeof addableValue === 'string') {
                     runFinish({
                         text: addableValue,
-                        value: addableValue,
+                        value: addableValue
                     });
                 }
+                else if (addableValue instanceof Error) {
+                    this.renderError(addableValue.message);
+                }
                 else {
                     runFinish(addableValue);
                 }
@@ -841,7 +901,7 @@ class Render {
             searchReturn.addable = {
                 main: addable,
                 svg: plus,
-                path: plusPath,
+                path: plusPath
             };
         }
         return searchReturn;
@@ -938,10 +998,26 @@ class Render {
         if (data.length === 0) {
             const noResults = document.createElement('div');
             noResults.classList.add(this.classes.search);
-            noResults.innerHTML = this.settings.searchText;
+            if (this.callbacks.addable) {
+                noResults.innerHTML = this.settings.addableText.replace('{value}', this.content.search.input.value);
+            }
+            else {
+                noResults.innerHTML = this.settings.searchText;
+            }
             this.content.list.appendChild(noResults);
             return;
         }
+        if (this.settings.allowDeselect && !this.settings.isMultiple) {
+            const placeholderOption = this.store.filter((o) => o.placeholder, false);
+            if (!placeholderOption.length) {
+                this.store.addOption(new Option({
+                    text: '',
+                    value: '',
+                    selected: false,
+                    placeholder: true
+                }), true);
+            }
+        }
         for (const d of data) {
             if (d instanceof Optgroup) {
                 const optgroupEl = document.createElement('div');
@@ -988,7 +1064,7 @@ class Render {
                         if (allSelected) {
                             const newSelected = currentSelected.filter((s) => {
                                 for (const o of d.options) {
-                                    if (s === o.value) {
+                                    if (s === o.id) {
                                         return false;
                                     }
                                 }
@@ -998,7 +1074,7 @@ class Render {
                             return;
                         }
                         else {
-                            const newSelected = currentSelected.concat(d.options.map((o) => o.value));
+                            const newSelected = currentSelected.concat(d.options.map((o) => o.id));
                             for (const o of d.options) {
                                 if (!this.store.getOptionByID(o.id)) {
                                     this.callbacks.addOption(o);
@@ -1155,7 +1231,7 @@ class Render {
                 if (!this.store.getOptionByID(elementID)) {
                     this.callbacks.addOption(option);
                 }
-                this.callbacks.setSelected(after.map((o) => o.value), false);
+                this.callbacks.setSelected(after.map((o) => o.id), false);
                 if (this.settings.closeOnSelect) {
                     this.callbacks.close();
                 }
@@ -1172,7 +1248,7 @@ class Render {
     }
     highlightText(str, search, className) {
         let completedString = str;
-        const regex = new RegExp('(' + search.trim() + ')(?![^<]*>[^<>]*</)', 'i');
+        const regex = new RegExp('(?![^<]*>)(' + search.trim() + ')(?![^<]*>[^<>]*</)', 'i');
         if (!str.match(regex)) {
             return str;
         }
@@ -1261,7 +1337,7 @@ class Select {
         this.select = select;
         this.valueChange = this.valueChange.bind(this);
         this.select.addEventListener('change', this.valueChange, {
-            passive: true,
+            passive: true
         });
         this.observer = new MutationObserver(this.observeCall.bind(this));
         this.changeListen(true);
@@ -1289,7 +1365,7 @@ class Select {
                 this.observer.observe(this.select, {
                     subtree: true,
                     childList: true,
-                    attributes: true,
+                    attributes: true
                 });
             }
         }
@@ -1301,7 +1377,7 @@ class Select {
     }
     valueChange(ev) {
         if (this.listen && this.onValueChange) {
-            this.onValueChange(this.getSelectedValues());
+            this.onValueChange(this.getSelectedOptions());
         }
         return true;
     }
@@ -1320,6 +1396,15 @@ class Select {
                 if (m.attributeName === 'class') {
                     classChanged = true;
                 }
+                if (m.type === 'childList') {
+                    for (const n of m.addedNodes) {
+                        if (n.nodeName === 'OPTION' && n.value === this.select.value) {
+                            this.select.dispatchEvent(new Event('change'));
+                            break;
+                        }
+                    }
+                    optgroupOptionChanged = true;
+                }
             }
             if (m.target.nodeName === 'OPTGROUP' || m.target.nodeName === 'OPTION') {
                 optgroupOptionChanged = true;
@@ -1359,7 +1444,7 @@ class Select {
             selectAll: optgroup.dataset ? optgroup.dataset.selectall === 'true' : false,
             selectAllText: optgroup.dataset ? optgroup.dataset.selectalltext : 'Select all',
             closable: optgroup.dataset ? optgroup.dataset.closable : 'off',
-            options: [],
+            options: []
         };
         const options = optgroup.childNodes;
         for (const o of options) {
@@ -1376,26 +1461,26 @@ class Select {
             text: option.text,
             html: option.dataset && option.dataset.html ? option.dataset.html : '',
             selected: option.selected,
-            display: option.style.display === 'none' ? false : true,
+            display: option.style.display !== 'none',
             disabled: option.disabled,
             mandatory: option.dataset ? option.dataset.mandatory === 'true' : false,
             placeholder: option.dataset.placeholder === 'true',
             class: option.className,
             style: option.style.cssText,
-            data: option.dataset,
+            data: option.dataset
         };
     }
-    getSelectedValues() {
-        let values = [];
-        const options = this.select.childNodes;
-        for (const o of options) {
+    getSelectedOptions() {
+        let options = [];
+        const opts = this.select.childNodes;
+        for (const o of opts) {
             if (o.nodeName === 'OPTGROUP') {
                 const optgroupOptions = o.childNodes;
                 for (const oo of optgroupOptions) {
                     if (oo.nodeName === 'OPTION') {
                         const option = oo;
                         if (option.selected) {
-                            values.push(option.value);
+                            options.push(this.getDataFromOption(option));
                         }
                     }
                 }
@@ -1403,13 +1488,16 @@ class Select {
             if (o.nodeName === 'OPTION') {
                 const option = o;
                 if (option.selected) {
-                    values.push(option.value);
+                    options.push(this.getDataFromOption(option));
                 }
             }
         }
-        return values;
+        return options;
     }
-    setSelected(value) {
+    getSelectedValues() {
+        return this.getSelectedOptions().map((option) => option.value);
+    }
+    setSelected(ids) {
         this.changeListen(false);
         const options = this.select.childNodes;
         for (const o of options) {
@@ -1419,13 +1507,34 @@ class Select {
                 for (const oo of optgroupOptions) {
                     if (oo.nodeName === 'OPTION') {
                         const option = oo;
-                        option.selected = value.includes(option.value);
+                        option.selected = ids.includes(option.id);
                     }
                 }
             }
             if (o.nodeName === 'OPTION') {
                 const option = o;
-                option.selected = value.includes(option.value);
+                option.selected = ids.includes(option.id);
+            }
+        }
+        this.changeListen(true);
+    }
+    setSelectedByValue(values) {
+        this.changeListen(false);
+        const options = this.select.childNodes;
+        for (const o of options) {
+            if (o.nodeName === 'OPTGROUP') {
+                const optgroup = o;
+                const optgroupOptions = optgroup.childNodes;
+                for (const oo of optgroupOptions) {
+                    if (oo.nodeName === 'OPTION') {
+                        const option = oo;
+                        option.selected = values.includes(option.value);
+                    }
+                }
+            }
+            if (o.nodeName === 'OPTION') {
+                const option = o;
+                option.selected = values.includes(option.value);
             }
         }
         this.changeListen(true);
@@ -1459,7 +1568,7 @@ class Select {
                 this.select.appendChild(this.createOption(d));
             }
         }
-        this.select.dispatchEvent(new Event('change'));
+        this.select.dispatchEvent(new Event('change', { bubbles: true }));
         this.changeListen(true);
     }
     createOptgroup(optgroup) {
@@ -1493,7 +1602,7 @@ class Select {
         if (info.disabled) {
             optionEl.disabled = true;
         }
-        if (info.display === false) {
+        if (!info.display) {
             optionEl.style.display = 'none';
         }
         if (info.placeholder) {
@@ -1544,6 +1653,7 @@ class Settings {
         this.disabled = settings.disabled !== undefined ? settings.disabled : false;
         this.alwaysOpen = settings.alwaysOpen !== undefined ? settings.alwaysOpen : false;
         this.showSearch = settings.showSearch !== undefined ? settings.showSearch : true;
+        this.focusSearch = settings.focusSearch !== undefined ? settings.focusSearch : true;
         this.ariaLabel = settings.ariaLabel || 'Combobox';
         this.searchPlaceholder = settings.searchPlaceholder || 'Search';
         this.searchText = settings.searchText || 'No Results';
@@ -1563,6 +1673,7 @@ class Settings {
         this.timeoutDelay = settings.timeoutDelay || 200;
         this.maxValuesShown = settings.maxValuesShown || 20;
         this.maxValuesMessage = settings.maxValuesMessage || '{number} selected';
+        this.addableText = settings.addableText || 'Press "Enter" to add {value}';
     }
 }
 
@@ -1580,7 +1691,7 @@ class SlimSelect {
             beforeOpen: undefined,
             afterOpen: undefined,
             beforeClose: undefined,
-            afterClose: undefined,
+            afterClose: undefined
         };
         this.windowResize = debounce(() => {
             if (!this.settings.isOpen && !this.settings.isFullOpen) {
@@ -1624,6 +1735,7 @@ class SlimSelect {
             this.destroy();
         }
         this.settings = new Settings(config.settings);
+        this.cssClasses = new CssClasses(config.cssClasses);
         const debounceEvents = ['afterChange', 'beforeOpen', 'afterOpen', 'beforeClose', 'afterClose'];
         for (const key in config.events) {
             if (!config.events.hasOwnProperty(key)) {
@@ -1643,8 +1755,8 @@ class SlimSelect {
         this.select = new Select(this.selectEl);
         this.select.updateSelect(this.settings.id, this.settings.style, this.settings.class);
         this.select.hideUI();
-        this.select.onValueChange = (values) => {
-            this.setSelected(values);
+        this.select.onValueChange = (options) => {
+            this.setSelected(options.map((option) => option.id));
         };
         this.select.onClassChange = (classes) => {
             this.settings.class = classes;
@@ -1673,9 +1785,9 @@ class SlimSelect {
             addOption: this.addOption.bind(this),
             search: this.search.bind(this),
             beforeChange: this.events.beforeChange,
-            afterChange: this.events.afterChange,
+            afterChange: this.events.afterChange
         };
-        this.render = new Render(this.settings, this.store, renderCallbacks);
+        this.render = new Render(this.settings, this.cssClasses, this.store, renderCallbacks);
         this.render.renderValues();
         this.render.renderOptions(this.store.getData());
         const selectAriaLabel = this.selectEl.getAttribute('aria-label');
@@ -1734,11 +1846,27 @@ class SlimSelect {
         }
     }
     getSelected() {
-        return this.store.getSelected();
+        let options = this.store.getSelectedOptions();
+        if (this.settings.keepOrder) {
+            options = this.store.selectedOrderOptions(options);
+        }
+        return options.map((option) => option.value);
     }
-    setSelected(value, runAfterChange = true) {
+    setSelected(values, runAfterChange = true) {
         const selected = this.store.getSelected();
-        this.store.setSelectedBy('value', Array.isArray(value) ? value : [value]);
+        const options = this.store.getDataOptions();
+        values = Array.isArray(values) ? values : [values];
+        const ids = [];
+        for (const value of values) {
+            if (options.find((option) => option.id == value)) {
+                ids.push(value);
+                continue;
+            }
+            for (const option of options.filter((option) => option.value == value)) {
+                ids.push(option.id);
+            }
+        }
+        this.store.setSelectedBy('id', ids);
         const data = this.store.getData();
         this.select.updateOptions(data);
         this.render.renderValues();
@@ -1773,7 +1901,7 @@ class SlimSelect {
             this.events.beforeOpen();
         }
         this.render.open();
-        if (this.settings.showSearch) {
+        if (this.settings.showSearch && this.settings.focusSearch) {
             this.render.searchFocus();
         }
         this.settings.isOpen = true;