@danielgindi/selectbox 1.0.132 → 1.0.134

package/lib/DropList.js

@@ -137,9 +137,11 @@ Emits the following events:
 'hide:after': emitted after the hide css transition has ended, or immediately after 'hide'.
 'check' {value, item, checked: boolean, isGroup: boolean, isCheckingGroup: boolean}: item was selected (in multi mode).
 'groupcheck' {value, item, affectedItems}: item was selected (in multi mode).
+'blur' {event}: element lost focus
 'show_subitems {value, item, el, droplist: DropList}': subitems dropdown will show.
 'hide_subitems {value, item, el}': subitems dropdown did hide.
 'subitems:select' {value, item, event?, el}: item was selected (in single mode).
+'subitems:blur' {event}: subitems element lost focus
  */
 
 // noinspection JSUnusedGlobalSymbols
@@ -531,8 +533,9 @@ class DropList {
         const item = p.items[p.focusItemIndex];
         p.focusItemIndex = -1;
 
-        if (!item)
+        if (!item) {
             return;
+        }
 
         if (p.currentSubDropList) {
             this._hideSublist();
@@ -1428,6 +1431,16 @@ class DropList {
             unrenderItem: p.unrenderItem,
         });
 
+        let onBlur = event => {
+            if (this[DestroyedSymbol]) return;
+
+            if (event.relatedTarget && this.elContains(event.relatedTarget, true))
+                return;
+
+            this._delayBlurItemOnBlur();
+            this._trigger('subitems:blur', event);
+        };
+
         droplist
             .on('select', event => {
                 this._trigger('subitems:select', event);
@@ -1435,11 +1448,10 @@ class DropList {
             .on('subitems:select', event => {
                 this._trigger('subitems:select', event);
             })
+            .on('blur', onBlur)
+            .on('subitems:blur', onBlur)
             .on('_back_key_pressed', () => {
                 this._hideSublist();
-
-                if (!this[DestroyedSymbol])
-                    this.el.focus();
             });
 
         droplist.setItems(item._subitems);
@@ -1475,10 +1487,17 @@ class DropList {
             return;
 
         const data = p.currentSubDropList;
+
+        let subHadFocus = !!document.activeElement && data.droplist.elContains(document.activeElement, true);
+
         data.droplist.hide();
         data.droplist.destroy();
         p.currentSubDropList = null;
 
+        if (subHadFocus && !this[DestroyedSymbol]) {
+            this.el.focus();
+        }
+
         this._trigger('hide_subitems', {
             value: data.item.value,
             item: data.item,
@@ -1795,12 +1814,14 @@ class DropList {
 
                 this._focus(event, itemEl, null, false);
             })
-            .add(p.el, 'blur', () => {
+            .add(p.el, 'blur', event => {
                 setTimeout(() => {
                     if (this[DestroyedSymbol]) return;
 
-                    if (!p.el.contains(document.activeElement)) {
+                    if (!document.activeElement ||
+                        !this.elContains(document.activeElement, true)) {
                         this._delayBlurItemOnBlur();
+                        this._trigger('blur', event);
                     }
                 });
             });
@@ -1967,6 +1988,10 @@ class DropList {
     _focus(event, itemEl, itemIndex, openSubitems) {
         const p = this._p;
 
+        if (p._isFocusingItem)
+            return;
+        p._isFocusingItem = true;
+
         if (!itemIndex && itemEl) {
             itemIndex = p.virtualListHelper.getItemIndexFromElement(itemEl);
         }
@@ -1979,11 +2004,13 @@ class DropList {
 
         let focusItemEl = itemEl || p.virtualListHelper.getItemElementAt(itemIndex);
         if (!focusItemEl || focusItemEl[ItemSymbol]._nointeraction) {
+            p._isFocusingItem = false;
             this.blurFocusedItem();
             return;
         }
 
         if (focusItemEl === p.focusItemEl) {
+            p._isFocusingItem = false;
             clearTimeout(p.blurTimer);
             return;
         }
@@ -2002,6 +2029,8 @@ class DropList {
             el: focusItemEl,
         });
 
+        p._isFocusingItem = false;
+
         if (openSubitems)
             this._showSublist(item, focusItemEl);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danielgindi/selectbox",
-  "version": "1.0.132",
+  "version": "1.0.134",
   "description": "A collection of dom utilities. So you can work natively with the dom without dom frameworks.",
   "main": "dist/lib.cjs.min.js",
   "module": "lib/index.js",

package/vue/DropList.vue

@@ -1,5 +1,5 @@
 <template>
-  <span v-show="false" />
+    <span v-show="false" />
 </template>
 
 <script>
@@ -14,8 +14,9 @@ const AllListEvents = [
     'itemfocus', 'itemblur', 'select',
     'show:before', 'show',
     'hide:before', 'hide', 'hide:after',
-    'check', 'groupcheck',
-    'show_subitems', 'hide_subitems', 'subitems:select',
+    'check', 'groupcheck', 'blur',
+    'show_subitems', 'hide_subitems',
+    'subitems:select', 'subitems:blur',
 ];
 
 export default {
@@ -123,12 +124,13 @@ export default {
         'hide',
         'check',
         'groupcheck',
+        'blur',
         'show_subitems',
         'hide_subitems',
         'subitems:select',
+        'subitems:blur',
 
         // Element events
-        'blur',
         'keypress',
         'keydown',
     ],
@@ -136,7 +138,7 @@ export default {
     data() {
         return {
             el: undefined,
-            
+
             nonReactive: Object.seal({
                 instance: undefined,
                 sink: new DomEventsSink(),
@@ -312,9 +314,11 @@ export default {
                 case 'hide':
                 case 'check':
                 case 'groupcheck':
+                case 'blur':
                 case 'show_subitems':
                 case 'hide_subitems':
                 case 'subitems:select':
+                case 'subitems:blur':
                     this.$emit(event, ...(data === undefined ? [] : [data]));
                     break;
             }
@@ -330,12 +334,6 @@ export default {
             this.el = list.el;
             this.nonReactive.instance = list;
 
-            this.nonReactive.sink.add(this.nonReactive.instance.el, 'blur.vue', evt => {
-                if (this.nonReactive.instance.el.contains(evt.relatedTarget))
-                    return;
-                this.$emit('blur', evt);
-            }, true);
-
             this.nonReactive.sink.add(this.nonReactive.instance.el, 'keydown.vue', evt => {
                 this.$emit('keydown', evt);
             }, true);