slim-select 2.4.0 → 2.4.1

package/dist/render.d.ts

@@ -93,7 +93,7 @@ export default class Render {
     updateClassStyles(): void;
     updateAriaAttributes(): void;
     mainDiv(): Main;
-    mainFocus(trigger: boolean, eventType: string | null): void;
+    mainFocus(eventType: string | null): void;
     placeholder(): HTMLDivElement;
     renderValues(): void;
     private renderSingleValue;
@@ -102,7 +102,7 @@ export default class Render {
     contentDiv(): Content;
     moveContent(): void;
     searchDiv(): Search;
-    searchFocus(trigger: boolean): void;
+    searchFocus(): void;
     getOptions(notPlaceholder?: boolean, notDisabled?: boolean, notHidden?: boolean): HTMLDivElement[];
     highlight(dir: 'up' | 'down'): void;
     listDiv(): HTMLDivElement;

package/dist/settings.d.ts

@@ -6,8 +6,7 @@ export default class Settings {
     class: string[];
     isMultiple: boolean;
     isOpen: boolean;
-    isWindowFocused: boolean;
-    triggerFocus: boolean;
+    isFullOpen: boolean;
     intervalMove: NodeJS.Timeout | null;
     disabled: boolean;
     alwaysOpen: boolean;

package/dist/slimselect.cjs.js

@@ -59,8 +59,7 @@ class Settings {
         this.class = [];
         this.isMultiple = false;
         this.isOpen = false;
-        this.isWindowFocused = true;
-        this.triggerFocus = true;
+        this.isFullOpen = false;
         this.intervalMove = null;
         if (!settings) {
             settings = {};
@@ -503,14 +502,10 @@ class Render {
             },
         };
     }
-    mainFocus(trigger, eventType) {
-        if (!trigger) {
-            this.settings.triggerFocus = false;
-        }
+    mainFocus(eventType) {
         if (eventType !== 'click') {
             this.main.main.focus({ preventScroll: true });
         }
-        this.settings.triggerFocus = true;
     }
     placeholder() {
         const placeholderOption = this.store.filter((o) => o.placeholder, false);
@@ -744,7 +739,6 @@ class Render {
             switch (e.key) {
                 case 'ArrowUp':
                 case 'ArrowDown':
-                    this.callbacks.open();
                     e.key === 'ArrowDown' ? this.highlight('down') : this.highlight('up');
                     return false;
                 case 'Tab':
@@ -767,12 +761,6 @@ class Render {
                     return false;
             }
         };
-        input.onfocus = () => {
-            if (this.settings.isOpen) {
-                return;
-            }
-            this.callbacks.open();
-        };
         main.appendChild(input);
         if (this.callbacks.addable) {
             addable.classList.add(this.classes.addable);
@@ -845,12 +833,8 @@ class Render {
         }
         return searchReturn;
     }
-    searchFocus(trigger) {
-        if (!trigger) {
-            this.settings.triggerFocus = false;
-        }
+    searchFocus() {
         this.content.search.input.focus();
-        this.settings.triggerFocus = true;
     }
     getOptions(notPlaceholder = false, notDisabled = false, notHidden = false) {
         let query = '.' + this.classes.option;
@@ -1507,13 +1491,13 @@ class SlimSelect {
             afterClose: undefined,
         };
         this.windowResize = debounce(() => {
-            if (!this.settings.isOpen) {
+            if (!this.settings.isOpen && !this.settings.isFullOpen) {
                 return;
             }
             this.render.moveContent();
         });
         this.windowScroll = debounce(() => {
-            if (!this.settings.isOpen) {
+            if (!this.settings.isOpen && !this.settings.isFullOpen) {
                 return;
             }
             this.render.moveContent();
@@ -1528,14 +1512,8 @@ class SlimSelect {
         };
         this.windowVisibilityChange = () => {
             if (document.hidden) {
-                this.settings.isWindowFocused = false;
                 this.close();
             }
-            else {
-                setTimeout(() => {
-                    this.settings.isWindowFocused = true;
-                }, 20);
-            }
         };
         this.selectEl = (typeof config.select === 'string' ? document.querySelector(config.select) : config.select);
         if (!this.selectEl) {
@@ -1705,13 +1683,16 @@ class SlimSelect {
         }
         this.render.open();
         if (this.settings.showSearch) {
-            this.render.searchFocus(false);
+            this.render.searchFocus();
         }
+        this.settings.isOpen = true;
         setTimeout(() => {
             if (this.events.afterOpen) {
                 this.events.afterOpen();
             }
-            this.settings.isOpen = true;
+            if (this.settings.isOpen) {
+                this.settings.isFullOpen = true;
+            }
         }, this.settings.timeoutDelay);
         if (this.settings.contentPosition === 'absolute') {
             if (this.settings.intervalMove) {
@@ -1731,12 +1712,13 @@ class SlimSelect {
         if (this.render.content.search.input.value !== '') {
             this.search('');
         }
-        this.render.mainFocus(false, eventType);
+        this.render.mainFocus(eventType);
+        this.settings.isOpen = false;
+        this.settings.isFullOpen = false;
         setTimeout(() => {
             if (this.events.afterClose) {
                 this.events.afterClose();
             }
-            this.settings.isOpen = false;
         }, this.settings.timeoutDelay);
         if (this.settings.intervalMove) {
             clearInterval(this.settings.intervalMove);

package/dist/slimselect.es.js

@@ -57,8 +57,7 @@ class Settings {
         this.class = [];
         this.isMultiple = false;
         this.isOpen = false;
-        this.isWindowFocused = true;
-        this.triggerFocus = true;
+        this.isFullOpen = false;
         this.intervalMove = null;
         if (!settings) {
             settings = {};
@@ -501,14 +500,10 @@ class Render {
             },
         };
     }
-    mainFocus(trigger, eventType) {
-        if (!trigger) {
-            this.settings.triggerFocus = false;
-        }
+    mainFocus(eventType) {
         if (eventType !== 'click') {
             this.main.main.focus({ preventScroll: true });
         }
-        this.settings.triggerFocus = true;
     }
     placeholder() {
         const placeholderOption = this.store.filter((o) => o.placeholder, false);
@@ -742,7 +737,6 @@ class Render {
             switch (e.key) {
                 case 'ArrowUp':
                 case 'ArrowDown':
-                    this.callbacks.open();
                     e.key === 'ArrowDown' ? this.highlight('down') : this.highlight('up');
                     return false;
                 case 'Tab':
@@ -765,12 +759,6 @@ class Render {
                     return false;
             }
         };
-        input.onfocus = () => {
-            if (this.settings.isOpen) {
-                return;
-            }
-            this.callbacks.open();
-        };
         main.appendChild(input);
         if (this.callbacks.addable) {
             addable.classList.add(this.classes.addable);
@@ -843,12 +831,8 @@ class Render {
         }
         return searchReturn;
     }
-    searchFocus(trigger) {
-        if (!trigger) {
-            this.settings.triggerFocus = false;
-        }
+    searchFocus() {
         this.content.search.input.focus();
-        this.settings.triggerFocus = true;
     }
     getOptions(notPlaceholder = false, notDisabled = false, notHidden = false) {
         let query = '.' + this.classes.option;
@@ -1505,13 +1489,13 @@ class SlimSelect {
             afterClose: undefined,
         };
         this.windowResize = debounce(() => {
-            if (!this.settings.isOpen) {
+            if (!this.settings.isOpen && !this.settings.isFullOpen) {
                 return;
             }
             this.render.moveContent();
         });
         this.windowScroll = debounce(() => {
-            if (!this.settings.isOpen) {
+            if (!this.settings.isOpen && !this.settings.isFullOpen) {
                 return;
             }
             this.render.moveContent();
@@ -1526,14 +1510,8 @@ class SlimSelect {
         };
         this.windowVisibilityChange = () => {
             if (document.hidden) {
-                this.settings.isWindowFocused = false;
                 this.close();
             }
-            else {
-                setTimeout(() => {
-                    this.settings.isWindowFocused = true;
-                }, 20);
-            }
         };
         this.selectEl = (typeof config.select === 'string' ? document.querySelector(config.select) : config.select);
         if (!this.selectEl) {
@@ -1703,13 +1681,16 @@ class SlimSelect {
         }
         this.render.open();
         if (this.settings.showSearch) {
-            this.render.searchFocus(false);
+            this.render.searchFocus();
         }
+        this.settings.isOpen = true;
         setTimeout(() => {
             if (this.events.afterOpen) {
                 this.events.afterOpen();
             }
-            this.settings.isOpen = true;
+            if (this.settings.isOpen) {
+                this.settings.isFullOpen = true;
+            }
         }, this.settings.timeoutDelay);
         if (this.settings.contentPosition === 'absolute') {
             if (this.settings.intervalMove) {
@@ -1729,12 +1710,13 @@ class SlimSelect {
         if (this.render.content.search.input.value !== '') {
             this.search('');
         }
-        this.render.mainFocus(false, eventType);
+        this.render.mainFocus(eventType);
+        this.settings.isOpen = false;
+        this.settings.isFullOpen = false;
         setTimeout(() => {
             if (this.events.afterClose) {
                 this.events.afterClose();
             }
-            this.settings.isOpen = false;
         }, this.settings.timeoutDelay);
         if (this.settings.intervalMove) {
             clearInterval(this.settings.intervalMove);

package/dist/slimselect.global.js

@@ -60,8 +60,7 @@ var SlimSelect = (function () {
             this.class = [];
             this.isMultiple = false;
             this.isOpen = false;
-            this.isWindowFocused = true;
-            this.triggerFocus = true;
+            this.isFullOpen = false;
             this.intervalMove = null;
             if (!settings) {
                 settings = {};
@@ -504,14 +503,10 @@ var SlimSelect = (function () {
                 },
             };
         }
-        mainFocus(trigger, eventType) {
-            if (!trigger) {
-                this.settings.triggerFocus = false;
-            }
+        mainFocus(eventType) {
             if (eventType !== 'click') {
                 this.main.main.focus({ preventScroll: true });
             }
-            this.settings.triggerFocus = true;
         }
         placeholder() {
             const placeholderOption = this.store.filter((o) => o.placeholder, false);
@@ -745,7 +740,6 @@ var SlimSelect = (function () {
                 switch (e.key) {
                     case 'ArrowUp':
                     case 'ArrowDown':
-                        this.callbacks.open();
                         e.key === 'ArrowDown' ? this.highlight('down') : this.highlight('up');
                         return false;
                     case 'Tab':
@@ -768,12 +762,6 @@ var SlimSelect = (function () {
                         return false;
                 }
             };
-            input.onfocus = () => {
-                if (this.settings.isOpen) {
-                    return;
-                }
-                this.callbacks.open();
-            };
             main.appendChild(input);
             if (this.callbacks.addable) {
                 addable.classList.add(this.classes.addable);
@@ -846,12 +834,8 @@ var SlimSelect = (function () {
             }
             return searchReturn;
         }
-        searchFocus(trigger) {
-            if (!trigger) {
-                this.settings.triggerFocus = false;
-            }
+        searchFocus() {
             this.content.search.input.focus();
-            this.settings.triggerFocus = true;
         }
         getOptions(notPlaceholder = false, notDisabled = false, notHidden = false) {
             let query = '.' + this.classes.option;
@@ -1508,13 +1492,13 @@ var SlimSelect = (function () {
                 afterClose: undefined,
             };
             this.windowResize = debounce(() => {
-                if (!this.settings.isOpen) {
+                if (!this.settings.isOpen && !this.settings.isFullOpen) {
                     return;
                 }
                 this.render.moveContent();
             });
             this.windowScroll = debounce(() => {
-                if (!this.settings.isOpen) {
+                if (!this.settings.isOpen && !this.settings.isFullOpen) {
                     return;
                 }
                 this.render.moveContent();
@@ -1529,14 +1513,8 @@ var SlimSelect = (function () {
             };
             this.windowVisibilityChange = () => {
                 if (document.hidden) {
-                    this.settings.isWindowFocused = false;
                     this.close();
                 }
-                else {
-                    setTimeout(() => {
-                        this.settings.isWindowFocused = true;
-                    }, 20);
-                }
             };
             this.selectEl = (typeof config.select === 'string' ? document.querySelector(config.select) : config.select);
             if (!this.selectEl) {
@@ -1706,13 +1684,16 @@ var SlimSelect = (function () {
             }
             this.render.open();
             if (this.settings.showSearch) {
-                this.render.searchFocus(false);
+                this.render.searchFocus();
             }
+            this.settings.isOpen = true;
             setTimeout(() => {
                 if (this.events.afterOpen) {
                     this.events.afterOpen();
                 }
-                this.settings.isOpen = true;
+                if (this.settings.isOpen) {
+                    this.settings.isFullOpen = true;
+                }
             }, this.settings.timeoutDelay);
             if (this.settings.contentPosition === 'absolute') {
                 if (this.settings.intervalMove) {
@@ -1732,12 +1713,13 @@ var SlimSelect = (function () {
             if (this.render.content.search.input.value !== '') {
                 this.search('');
             }
-            this.render.mainFocus(false, eventType);
+            this.render.mainFocus(eventType);
+            this.settings.isOpen = false;
+            this.settings.isFullOpen = false;
             setTimeout(() => {
                 if (this.events.afterClose) {
                     this.events.afterClose();
                 }
-                this.settings.isOpen = false;
             }, this.settings.timeoutDelay);
             if (this.settings.intervalMove) {
                 clearInterval(this.settings.intervalMove);

package/dist/slimselect.js

@@ -63,8 +63,7 @@
             this.class = [];
             this.isMultiple = false;
             this.isOpen = false;
-            this.isWindowFocused = true;
-            this.triggerFocus = true;
+            this.isFullOpen = false;
             this.intervalMove = null;
             if (!settings) {
                 settings = {};
@@ -507,14 +506,10 @@
                 },
             };
         }
-        mainFocus(trigger, eventType) {
-            if (!trigger) {
-                this.settings.triggerFocus = false;
-            }
+        mainFocus(eventType) {
             if (eventType !== 'click') {
                 this.main.main.focus({ preventScroll: true });
             }
-            this.settings.triggerFocus = true;
         }
         placeholder() {
             const placeholderOption = this.store.filter((o) => o.placeholder, false);
@@ -748,7 +743,6 @@
                 switch (e.key) {
                     case 'ArrowUp':
                     case 'ArrowDown':
-                        this.callbacks.open();
                         e.key === 'ArrowDown' ? this.highlight('down') : this.highlight('up');
                         return false;
                     case 'Tab':
@@ -771,12 +765,6 @@
                         return false;
                 }
             };
-            input.onfocus = () => {
-                if (this.settings.isOpen) {
-                    return;
-                }
-                this.callbacks.open();
-            };
             main.appendChild(input);
             if (this.callbacks.addable) {
                 addable.classList.add(this.classes.addable);
@@ -849,12 +837,8 @@
             }
             return searchReturn;
         }
-        searchFocus(trigger) {
-            if (!trigger) {
-                this.settings.triggerFocus = false;
-            }
+        searchFocus() {
             this.content.search.input.focus();
-            this.settings.triggerFocus = true;
         }
         getOptions(notPlaceholder = false, notDisabled = false, notHidden = false) {
             let query = '.' + this.classes.option;
@@ -1511,13 +1495,13 @@
                 afterClose: undefined,
             };
             this.windowResize = debounce(() => {
-                if (!this.settings.isOpen) {
+                if (!this.settings.isOpen && !this.settings.isFullOpen) {
                     return;
                 }
                 this.render.moveContent();
             });
             this.windowScroll = debounce(() => {
-                if (!this.settings.isOpen) {
+                if (!this.settings.isOpen && !this.settings.isFullOpen) {
                     return;
                 }
                 this.render.moveContent();
@@ -1532,14 +1516,8 @@
             };
             this.windowVisibilityChange = () => {
                 if (document.hidden) {
-                    this.settings.isWindowFocused = false;
                     this.close();
                 }
-                else {
-                    setTimeout(() => {
-                        this.settings.isWindowFocused = true;
-                    }, 20);
-                }
             };
             this.selectEl = (typeof config.select === 'string' ? document.querySelector(config.select) : config.select);
             if (!this.selectEl) {
@@ -1709,13 +1687,16 @@
             }
             this.render.open();
             if (this.settings.showSearch) {
-                this.render.searchFocus(false);
+                this.render.searchFocus();
             }
+            this.settings.isOpen = true;
             setTimeout(() => {
                 if (this.events.afterOpen) {
                     this.events.afterOpen();
                 }
-                this.settings.isOpen = true;
+                if (this.settings.isOpen) {
+                    this.settings.isFullOpen = true;
+                }
             }, this.settings.timeoutDelay);
             if (this.settings.contentPosition === 'absolute') {
                 if (this.settings.intervalMove) {
@@ -1735,12 +1716,13 @@
             if (this.render.content.search.input.value !== '') {
                 this.search('');
             }
-            this.render.mainFocus(false, eventType);
+            this.render.mainFocus(eventType);
+            this.settings.isOpen = false;
+            this.settings.isFullOpen = false;
             setTimeout(() => {
                 if (this.events.afterClose) {
                     this.events.afterClose();
                 }
-                this.settings.isOpen = false;
             }, this.settings.timeoutDelay);
             if (this.settings.intervalMove) {
                 clearInterval(this.settings.intervalMove);