bz-select closes his bros

This commit is contained in:
STEINNI
2025-10-21 10:09:09 +00:00
parent 3b3127b5f2
commit 1635823627
2 changed files with 20 additions and 3 deletions

View File

@@ -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;

View File

@@ -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)
}