slim-select 2.4.0 → 2.4.1

package/src/slim-select/render.ts

@@ -354,10 +354,7 @@ export default class Render {
     }
   }
 
-  public mainFocus(trigger: boolean, eventType: string | null): void {
-    if (!trigger) {
-      this.settings.triggerFocus = false
-    }
+  public mainFocus(eventType: string | null): void {
     // Trigger focus but dont scroll to it
     // Need for prevent refocus the element if event is not keyboard event.
     // For example if event is mouse click or tachpad click this condition prevent refocus on element
@@ -365,7 +362,6 @@ export default class Render {
     if (eventType !== 'click') {
       this.main.main.focus({ preventScroll: true })
     }
-    this.settings.triggerFocus = true
   }
 
   public placeholder(): HTMLDivElement {
@@ -685,7 +681,6 @@ export default 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':
@@ -712,15 +707,6 @@ export default class Render {
       }
     }
 
-    // If focus is on the search input, open the dropdown
-    input.onfocus = () => {
-      // If we are already open, do nothing
-      if (this.settings.isOpen) {
-        return
-      }
-
-      this.callbacks.open()
-    }
     main.appendChild(input)
 
     // If addable is enabled, add the addable div
@@ -822,12 +808,8 @@ export default class Render {
     return searchReturn
   }
 
-  public searchFocus(trigger: boolean): void {
-    if (!trigger) {
-      this.settings.triggerFocus = false
-    }
+  public searchFocus(): void {
     this.content.search.input.focus()
-    this.settings.triggerFocus = true
   }
 
   public getOptions(notPlaceholder = false, notDisabled = false, notHidden = false): HTMLDivElement[] {

package/src/slim-select/settings.ts

@@ -10,8 +10,7 @@ export default class Settings {
   // Dynamic settings
   public isMultiple: boolean = false
   public isOpen: boolean = false
-  public isWindowFocused: boolean = true
-  public triggerFocus: boolean = true
+  public isFullOpen: boolean = false
   public intervalMove: NodeJS.Timeout | null = null
 
   // Fields set from constructor

package/src/vue/dist/slim-select/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/src/vue/dist/slim-select/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/src/vue/dist/slimselectvue.es.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/src/vue/dist/slimselectvue.global.js

@@ -60,8 +60,7 @@ var SlimSelectVue = (function (vue) {
           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 SlimSelectVue = (function (vue) {
               },
           };
       }
-      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 SlimSelectVue = (function (vue) {
               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 SlimSelectVue = (function (vue) {
                       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 SlimSelectVue = (function (vue) {
           }
           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 SlimSelectVue = (function (vue) {
               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 SlimSelectVue = (function (vue) {
           };
           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 SlimSelectVue = (function (vue) {
           }
           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 SlimSelectVue = (function (vue) {
           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/src/vue/dist/slimselectvue.ssr.js

@@ -61,8 +61,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 = {};
@@ -505,14 +504,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);
@@ -746,7 +741,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':
@@ -769,12 +763,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);
@@ -847,12 +835,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;
@@ -1509,13 +1493,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();
@@ -1530,14 +1514,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) {
@@ -1707,13 +1685,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) {
@@ -1733,12 +1714,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/src/vue/dist/vue/slimselect.vue.d.ts

@@ -35,8 +35,7 @@ declare const _default: import("vue").DefineComponent<{
             class: string[];
             isMultiple: boolean;
             isOpen: boolean;
-            isWindowFocused: boolean;
-            triggerFocus: boolean;
+            isFullOpen: boolean;
             intervalMove: {
                 hasRef: () => boolean;
                 refresh: () => NodeJS.Timeout;
@@ -113,8 +112,7 @@ declare const _default: import("vue").DefineComponent<{
                 class: string[];
                 isMultiple: boolean;
                 isOpen: boolean;
-                isWindowFocused: boolean;
-                triggerFocus: boolean;
+                isFullOpen: boolean;
                 intervalMove: {
                     hasRef: () => boolean;
                     refresh: () => NodeJS.Timeout;
@@ -245,14 +243,14 @@ declare const _default: import("vue").DefineComponent<{
             updateClassStyles: () => void;
             updateAriaAttributes: () => void;
             mainDiv: () => import("../slim-select/render").Main;
-            mainFocus: (trigger: boolean, eventType: string | null) => void;
+            mainFocus: (eventType: string | null) => void;
             placeholder: () => HTMLDivElement;
             renderValues: () => void;
             multipleValue: (option: Option) => HTMLDivElement;
             contentDiv: () => import("../slim-select/render").Content;
             moveContent: () => void;
             searchDiv: () => import("../slim-select/render").Search;
-            searchFocus: (trigger: boolean) => void;
+            searchFocus: () => void;
             getOptions: (notPlaceholder?: boolean, notDisabled?: boolean, notHidden?: boolean) => HTMLDivElement[];
             highlight: (dir: "up" | "down") => void;
             listDiv: () => HTMLDivElement;

package/src/vue/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@slim-select/vue",
   "private": false,
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "Vue integration",
   "repository": {
     "type": "git",