@kupola/kupola 1.6.2 → 1.6.3

package/js/dropdown.js

@@ -170,7 +170,10 @@ class Dropdown {
 
     // Document click to close
     this._documentClickHandler = (e) => {
-      if (!this.element.contains(e.target) && !this.menu.contains(e.target)) {
+      if (!this.isOpen) return;
+      const isInElement = this.element.contains(e.target);
+      const isInMenu = this.menu && this.menu.contains(e.target);
+      if (!isInElement && !isInMenu) {
         this.hideMenu();
       }
     };
@@ -183,8 +186,8 @@ class Dropdown {
 
   _bindMenuItems() {
     this.menu.querySelectorAll('.ds-dropdown__item').forEach(item => {
-      item.addEventListener('click', (e) => this._itemClickHandler(e));
       item._dropdownItemClickHandler = (e) => this._itemClickHandler(e);
+      item.addEventListener('click', item._dropdownItemClickHandler);
     });
   }
 
@@ -383,11 +386,13 @@ class Dropdown {
         if (item.value !== undefined) {el.setAttribute('data-value', item.value);}
         if (item.icon) {el.innerHTML = item.icon + el.innerHTML;}
         if (item.disabled) {el.classList.add('is-disabled');}
+        
+        el._dropdownItemClickHandler = (e) => this._itemClickHandler(e);
+        el.addEventListener('click', el._dropdownItemClickHandler);
+        
         this.menu.appendChild(el);
       }
     });
-
-    this._bindMenuItems();
   }
 
   destroy() {

package/js/select.js

@@ -133,7 +133,10 @@ class Select {
 
     // Document click to close
     this._documentClickHandler = (e) => {
-      if (!this.element.contains(e.target) && !this.optionsEl.contains(e.target)) {
+      if (!this.isOpen) return;
+      const isInElement = this.element.contains(e.target);
+      const isInOptions = this.optionsEl && this.optionsEl.contains(e.target);
+      if (!isInElement && !isInOptions) {
         this.hideOptions();
       }
     };
@@ -246,8 +249,8 @@ class Select {
       if (opt.disabled) el.classList.add('is-disabled');
       if (this.selectedValues.has(opt.value)) el.classList.add('is-selected');
       
-      el.addEventListener('click', (e) => this._optionClickHandler(e));
       el._selectOptionClickHandler = (e) => this._optionClickHandler(e);
+      el.addEventListener('click', el._selectOptionClickHandler);
       
       this.optionsEl.appendChild(el);
     });
@@ -408,8 +411,8 @@ class Select {
 
   _bindOptionClicks() {
     this.optionsEl.querySelectorAll('.ds-select__option, .ds-select__item').forEach(option => {
-      option.addEventListener('click', (e) => this._optionClickHandler(e));
       option._selectOptionClickHandler = (e) => this._optionClickHandler(e);
+      option.addEventListener('click', option._selectOptionClickHandler);
     });
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kupola/kupola",
-  "version": "1.6.2",
+  "version": "1.6.3",
   "description": "A lightweight UI toolkit for any web project. No heavy frontend frameworks required.",
   "main": "dist/kupola.cjs.js",
   "module": "dist/kupola.esm.js",