From 1635823627f4147f1f90043b5a21554bcaa4e0eb Mon Sep 17 00:00:00 2001
From: STEINNI <nicolas.stein@ext.ec.europa.eu>
Date: Tue, 21 Oct 2025 10:09:09 +0000
Subject: [PATCH] bz-select closes his bros

---
 buildoz.css |  7 ++++++-
 buildoz.js  | 16 ++++++++++++++--
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/buildoz.css b/buildoz.css
index 8c7d205..9297fe6 100644
--- a/buildoz.css
+++ b/buildoz.css
@@ -30,12 +30,17 @@ bz-select > button::after {
     color: #444;
 }    
 bz-select >  div.options-container{
+    pointer-events: none;
     position: absolute;
-    top: 100%;
+    top: 2em;
     left: 0;
     width: 100%;
     z-index: 99;
+    max-height: 0;
+    overflow: auto; 
+    transition: max-height 0.4s ease;
 }
+bz-select >  div.options-container.open{ pointer-events: auto; max-height: 10em;}
 bz-select option{
     background-color: #DDD;
     border: 1px solid black;
diff --git a/buildoz.js b/buildoz.js
index 279806e..378eafc 100644
--- a/buildoz.js
+++ b/buildoz.js
@@ -47,6 +47,7 @@ class BZselect extends Buildoz {
         this.value = null
         this.open = false
         this.value = null
+        this.generalClickEvent = null
         this.defaultAttrs = {
             label: 'Select...',
         }
@@ -64,11 +65,13 @@ class BZselect extends Buildoz {
         this.options = this.querySelectorAll('option')
         if(this.#fillFromMarkup){ //can only do it once and only if fillOptions was not already called !!
             for(const opt of this.options){ 
+                this.optionscontainer.append(opt) // Will move is to the right parent
                 opt.addEventListener('click', this.onClick.bind(this))
                 if(opt.getAttribute('selected') !== null) this.onOption(opt.value, true)
             }
             this.#fillFromMarkup = false
         }
+
     }
     
     // static get observedAttributes(){ // Only if you want actions on attr change
@@ -97,13 +100,22 @@ class BZselect extends Buildoz {
 
     toggle(){ 
         for(const opt of this.options){
-            if(this.open) opt.classList.remove('open')
-            else opt.classList.add('open')
+            if(this.open) {
+                opt.classList.remove('open')
+                this.optionscontainer.classList.remove('open')
+            } else {
+                document.querySelectorAll('bz-select').forEach((sel) => {
+                    if((sel!==this) && sel.open) sel.toggle()
+                })
+                opt.classList.add('open')
+                this.optionscontainer.classList.add('open')
+            }
         }
         this.open = !this.open
     }
 
     onClick(evt){ 
+        evt.stopPropagation()
         const opt = evt.target.closest('option')
         if(opt && opt.value) this.onOption(opt.value) 
     }