bz-select closes his bros

app/assets/styles/app.css

@@ -370,7 +370,7 @@ bz-select option{
 bz-select option i{ margin-right:0.3em; }
 bz-select option i.icon-atom1{ color:#FF4; }
 bz-select option i.icon-bug{ color:#4DF; }
-
+bz-select > div.options-container.open { max-height: 20em; }
 bz-toggler div.toggle-switch span.toggle-bar { background-color: #473; }
 bz-toggler div.toggle-switch span.toggle-thumb { background-color:#9D8; }
 

app/controllers/editors/EditorsController.js

@@ -18,7 +18,7 @@ class EditorsController extends WindozController {
         this.loadWindow(
             'editors/KeyframeView', 
             {
-                title: '<i class="icon-edit"></i> Keyframe edito 3D view', 
+                title: '<i class="icon-edit"></i> Keyframe editor', 
                 static: true,
                 expanded: false,
                 withSettings: true,

app/thirdparty/buildoz/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;

app/thirdparty/buildoz/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) 
     }

app/views/editors/KeyframeView.html

@@ -11,7 +11,7 @@
     .kf-editor > article, .kf-editor > article header{ border-color: #473; }
     .kf-editor article.agent-preview header { padding:0; }
     .kf-editor article.agent-preview canvas{ width:100%; aspect-ratio: 1 / 1;} 
-    .kf-editor article.agent-preview section{
+    .kf-editor article.agent-preview section, .kf-editor article.agent-properties section{
         display: grid;
         grid-template-rows: auto 2em;
         height: 100%;
@@ -33,17 +33,8 @@
         <section>
             <div>
                 <bz-select label="Agent type..." data-output="agentsSelector"></bz-select>
-                <div>Something in the way</div>
-                <bz-select label="TEST...">
-                    <option value="a">AA</option>
-                    <option value="b">BB</option>
-                    <option value="c">CC</option>
-                </bz-select>
-            </div>
-            <div class="actions cols-2">
-                <button eicbutton rounded data-output="btnAddAgent" data-trigger="onAddAgent">Add</button>
-                <button eicbutton rounded data-output="btnRemoveAgent" data-trigger="onRemoveAgent" >Remove</button>
             </div>
+            <div></div>
         </section>
     </article>
     <article eiccard>
@@ -51,9 +42,15 @@
             Arena 
         </section>
     </article>
-    <article eiccard="">
+    <article eiccard class="agent-properties">
         <header><h1>Agent properties</h1></header>
-        <section data-output="agentProperties"></section>
+        <section>
+            <div data-output="agentProperties"></div>
+            <div class="actions cols-2">
+                <button eicbutton rounded data-output="btnAddAgent" data-trigger="onAddAgent">Add</button>
+                <button eicbutton rounded data-output="btnRemoveAgent" data-trigger="onRemoveAgent" >Remove</button>
+            </div>
+        </section>
     </article>
 
 </div>