slim-select 2.8.2 → 2.9.1

package/dist/slimselect.global.js

@@ -1,6 +1,54 @@
 var SlimSelect = (function () {
     'use strict';
 
+    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);
     }
@@ -88,6 +136,7 @@ var SlimSelect = (function () {
         constructor(type, data) {
             this.selectType = 'single';
             this.data = [];
+            this.selectedOrder = [];
             this.selectType = type;
             this.setData(data);
         }
@@ -102,12 +151,18 @@ var SlimSelect = (function () {
                     }
                     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');
@@ -144,7 +199,7 @@ var SlimSelect = (function () {
         setData(data) {
             this.data = this.partialToFullData(data);
             if (this.selectType === 'single') {
-                this.setSelectedBy('value', this.getSelected());
+                this.setSelectedBy('id', this.getSelected());
             }
         }
         getData() {
@@ -153,12 +208,19 @@ var SlimSelect = (function () {
         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) {
@@ -166,8 +228,11 @@ var SlimSelect = (function () {
                             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;
+                            }
                         }
                     }
                 }
@@ -176,36 +241,35 @@ var SlimSelect = (function () {
                         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) {
@@ -276,54 +340,35 @@ var SlimSelect = (function () {
             });
             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();
@@ -419,7 +464,7 @@ var SlimSelect = (function () {
                         this.callbacks.close();
                         return false;
                 }
-                return false;
+                return true;
             };
             main.onclick = (e) => {
                 if (this.settings.disabled) {
@@ -457,8 +502,8 @@ var SlimSelect = (function () {
                     }
                     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();
@@ -491,12 +536,12 @@ var SlimSelect = (function () {
                 deselect: {
                     main: deselect,
                     svg: deselectSvg,
-                    path: deselectPath,
+                    path: deselectPath
                 },
                 arrow: {
                     main: arrow,
-                    path: arrowPath,
-                },
+                    path: arrowPath
+                }
             };
         }
         mainFocus(eventType) {
@@ -582,6 +627,9 @@ var SlimSelect = (function () {
                     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];
@@ -635,7 +683,7 @@ var SlimSelect = (function () {
             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');
@@ -658,18 +706,18 @@ var SlimSelect = (function () {
                         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();
                         }
@@ -699,7 +747,7 @@ var SlimSelect = (function () {
             return {
                 main: main,
                 search: search,
-                list: list,
+                list: list
             };
         }
         moveContent() {
@@ -729,7 +777,7 @@ var SlimSelect = (function () {
             main.classList.add(this.classes.search);
             const searchReturn = {
                 main,
-                input,
+                input
             };
             if (!this.settings.showSearch) {
                 main.classList.add(this.classes.hide);
@@ -757,9 +805,15 @@ var SlimSelect = (function () {
                     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;
                         }
@@ -798,12 +852,12 @@ var SlimSelect = (function () {
                         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) {
@@ -821,9 +875,12 @@ var SlimSelect = (function () {
                             if (typeof value === 'string') {
                                 runFinish({
                                     text: value,
-                                    value: value,
+                                    value: value
                                 });
                             }
+                            else if (addableValue instanceof Error) {
+                                this.renderError(addableValue.message);
+                            }
                             else {
                                 runFinish(value);
                             }
@@ -832,9 +889,12 @@ var SlimSelect = (function () {
                     else if (typeof addableValue === 'string') {
                         runFinish({
                             text: addableValue,
-                            value: addableValue,
+                            value: addableValue
                         });
                     }
+                    else if (addableValue instanceof Error) {
+                        this.renderError(addableValue.message);
+                    }
                     else {
                         runFinish(addableValue);
                     }
@@ -844,7 +904,7 @@ var SlimSelect = (function () {
                 searchReturn.addable = {
                     main: addable,
                     svg: plus,
-                    path: plusPath,
+                    path: plusPath
                 };
             }
             return searchReturn;
@@ -941,10 +1001,26 @@ var SlimSelect = (function () {
             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');
@@ -991,7 +1067,7 @@ var SlimSelect = (function () {
                             if (allSelected) {
                                 const newSelected = currentSelected.filter((s) => {
                                     for (const o of d.options) {
-                                        if (s === o.value) {
+                                        if (s === o.id) {
                                             return false;
                                         }
                                     }
@@ -1001,7 +1077,7 @@ var SlimSelect = (function () {
                                 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);
@@ -1158,7 +1234,7 @@ var SlimSelect = (function () {
                     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();
                     }
@@ -1175,7 +1251,7 @@ var SlimSelect = (function () {
         }
         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;
             }
@@ -1264,7 +1340,7 @@ var SlimSelect = (function () {
             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);
@@ -1292,7 +1368,7 @@ var SlimSelect = (function () {
                     this.observer.observe(this.select, {
                         subtree: true,
                         childList: true,
-                        attributes: true,
+                        attributes: true
                     });
                 }
             }
@@ -1304,7 +1380,7 @@ var SlimSelect = (function () {
         }
         valueChange(ev) {
             if (this.listen && this.onValueChange) {
-                this.onValueChange(this.getSelectedValues());
+                this.onValueChange(this.getSelectedOptions());
             }
             return true;
         }
@@ -1323,6 +1399,15 @@ var SlimSelect = (function () {
                     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;
@@ -1362,7 +1447,7 @@ var SlimSelect = (function () {
                 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) {
@@ -1379,26 +1464,26 @@ var SlimSelect = (function () {
                 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));
                             }
                         }
                     }
@@ -1406,13 +1491,16 @@ var SlimSelect = (function () {
                 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) {
@@ -1422,13 +1510,34 @@ var SlimSelect = (function () {
                     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);
@@ -1462,7 +1571,7 @@ var SlimSelect = (function () {
                     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) {
@@ -1496,7 +1605,7 @@ var SlimSelect = (function () {
             if (info.disabled) {
                 optionEl.disabled = true;
             }
-            if (info.display === false) {
+            if (!info.display) {
                 optionEl.style.display = 'none';
             }
             if (info.placeholder) {
@@ -1547,6 +1656,7 @@ var SlimSelect = (function () {
             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';
@@ -1566,6 +1676,7 @@ var SlimSelect = (function () {
             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}';
         }
     }
 
@@ -1583,7 +1694,7 @@ var SlimSelect = (function () {
                 beforeOpen: undefined,
                 afterOpen: undefined,
                 beforeClose: undefined,
-                afterClose: undefined,
+                afterClose: undefined
             };
             this.windowResize = debounce(() => {
                 if (!this.settings.isOpen && !this.settings.isFullOpen) {
@@ -1627,6 +1738,7 @@ var SlimSelect = (function () {
                 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)) {
@@ -1646,8 +1758,8 @@ var SlimSelect = (function () {
             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;
@@ -1676,9 +1788,9 @@ var SlimSelect = (function () {
                 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');
@@ -1737,11 +1849,27 @@ var SlimSelect = (function () {
             }
         }
         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();
@@ -1776,7 +1904,7 @@ var SlimSelect = (function () {
                 this.events.beforeOpen();
             }
             this.render.open();
-            if (this.settings.showSearch) {
+            if (this.settings.showSearch && this.settings.focusSearch) {
                 this.render.searchFocus();
             }
             this.settings.isOpen = true;