Функция Js Script Async удаляет класс раньше, чем он предназначен ⇐ CSS

[Anonymous]

Контекст
Я создавал собственный раскрывающийся список, состоящий из ввода, я знаю, что есть выбор типа ввода, однако мне бы хотелось, чтобы мой список элементов мог открываться внешней кнопкой или полем ввода, содержащим
Раскрывающийся список работает как задумано, я сделал это с помощью этого урока "https://www.youtube.com/ watch?v=cNdJLapVQMo", однако я изменил js, чтобы все это могло существовать для нескольких пользовательских раскрывающихся списков на одной странице. Кроме того, мне еще предстоит добавить функцию, которая показывает содержимое, выбранное в раскрывающемся списке внутри ввода, но это не проблема, которую я хочу сначала исправить.
Проблема
У меня есть два настраиваемых раскрывающихся списка, один из которых находится поверх другого. Когда я нажимаю на поле ввода, он открывает раскрывающийся список выбранного элемента и внутри него добавляется класс «выбранный» (класс, который изменяет z-индекс, чтобы элемент раскрывающегося списка находится поверх всего) к раскрывающемуся элементу (представляет ввод и список элементов), когда я снова нажимаю на то же поле ввода, я хочу, чтобы он сделал это

• Введите функцию closeDropdown (очевидно)
• Удалите «выбранный» класс из моего раскрывающегося элемента
  (это чтобы элемент больше не находился над другими раскрывающимися списками, когда я открываю другой раскрывающийся список)

Это как это обычно выглядит
введите описание изображения здесь
Как бы то ни было...
Ошибка, с которой я столкнулся
Вот мой js-скрипт

Код: Выделить всё

document.addEventListener("DOMContentLoaded",loadDropdowns);

let dropdowns = "";

function loadDropdowns(){
dropdowns = document.querySelectorAll(".dropdown");
console.log(dropdowns);
}

let dropdownChosen = document.querySelector(".dropdown.chosen");
setTimeout(() => {
// I aded this so that the chosen class wasn't removed bed
console.log('espera');
}, 250);
console.log(dropdownChosen);

if(dropdownChosen != null ){
let wasClicked = dropdownChosen.querySelector(".input-box").contains(event.target);
if(!wasClicked){
console.log("hewwo");
closeDropdown(dropdownChosen.querySelector(".input-box"),dropdownChosen.querySelector(".list"));
}
}

dropdowns.forEach((dropdown)=>{

let clickedInside = false;

const inputBox= dropdown.querySelector(".input-box");
const list = dropdown.querySelector(".list");

if(inputBox.contains(event.target) || list.contains(event.target)){
clickedInside = true;
dropdown.classList.add("chosen");

if(inputBox.contains(event.target)){
toggleDropdown(inputBox, list);
}
}
else {
closeDropdown(inputBox,list);
}

if(!clickedInside || inputBox.maxHeight===null){
dropdown.classList.remove("chosen");
}

});

});

async function toggleDropdown(inputBox,list){
const isOpen = inputBox.classList.toggle("open");
if(isOpen){
list.style.maxHeight = list.scrollHeight + "px";
list.style.boxShadow =  "0 1px 2px 0 rgba(0, 0, 0, 0.151), 0 1px 3px 1px rgba(0, 0, 0, 0.1)";
}
else{
closeDropdown(inputBox, list);
}
}

async function closeDropdown(inputBox, list){
inputBox.classList.remove("open");
// quita la clase open

list.style.maxHeight = null;
list.style.boxShadow = null;
}

Вот мой HTML-код

Код: Выделить всё

Option 1

Option 2



Dropdown 2


Option A

Option B

а вот моя таблица стилей

Код: Выделить всё

body{
margin:0;
padding: 0;
width:100%;
height: 100vh;
background-color: white;
}

.center{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.dropdown{
width:300px;
height: fit-content;
box-sizing: border-box;
position: relative;
}

.input-box{
width: 100%;
height: 40px;
box-sizing: border-box;
outline: 0.3mm solid rgba(0, 0, 0, 0.164);
border-radius: 2mm;
padding: 10px 15px;
display: flex;
align-items: center;
justify-content: flex-start;
/* aqui puedes cambiar la fuente */
z-index: 1;
}

.input-box:hover{
outline: 0.3mm solid dodgerblue;
}

.chosen {
z-index: 2;
}

/* puedes poner texto dentro del input si es que no hay */
.input-box:empty::after{
content:"Elige una persona...";
color: rgba(0,0,0,0.5);
}

/* controla los elementos de la lista desplegable */
.list{
position: absolute;
top: 100%;
left: 0;
width: 100%;
background: white;
margin-top: 10px;
border-radius: 2mm;
overflow: hidden;
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: column;
max-height: 0;
transition: 0.25s ease-in-out;
}

/* hace que el label abarque todo el espacio de la lista */
.list label{
display: flex;
width: 100%;
align-items: center;
justify-content: start;
padding: 10px 15px;
box-sizing: border-box;
cursor: pointer;
position: relative;
/* aqui puedes cambiar la fuente */
}

/* oculta el boton input donde se puede seleccionar las opcciones */
.list input{
display: none;
}

.list label:hover{
background: rgba(202, 202, 202, 0.08);
}

input:checked + label{
color: rgb(58, 147, 236);
background: rgb(215, 235, 255) ;
}

input:checked + label::before {
content: "done"; /*Aqui poner icono como flecha que signfica seleccionado o algo asi*/
position: absolute;
top: 50%;
right: 15px;
transform: translate(0,-50%);
font-size: 10px;
}

/* hace que no cambie el hover cuando la propiedad ya fue seleccionada :) */
input:checked + label:hover{
color: rgb(58, 147, 236);
background: rgb(215, 235, 255);
}

.open{
outline: 0.7mm solid dodgerblue;
}

.title{
font-family: poppins;
font-size: small;
font: 500;
margin-bottom: 10px;
color: red;
}

Я использую весь этот код в одном и том же html-файле, я попробовал добавить setTimeout, чтобы сначала показать мне, что находится внутри dropdownChosen, но он переходит прямо к ' hewwo' console.log, в моей машине есть пушистый призрак, пожалуйста, помогите
Он отправляет сначала сообщение hewwo, а затем раскрывающийся журнал консоли

Подробнее здесь: https://stackoverflow.com/questions/792 ... s-intended