Привет. Я написал селектор/выпадающее меню. Тут всё работает. Есть кнопка которая показывает выбранный элемент, и при клике всплывает лист с элементами и исчезает при повторном клике или после клика на любой из элементов в листе. Но когда добавляю код который скрывает лист если нажать за пределами листа. То же работает, но если я кликну по элементу в листе, он выберится и основная кнопка больше не работает, лист не всплывает.
document.querySelectorAll('#select-list').forEach(function(selectWrapper) {
const toggleButton = selectWrapper.querySelector('#select-toggle-button');
const listBlock = selectWrapper.querySelector('#select-list-block');
const itemButton = selectWrapper.querySelectorAll('#select-item-button');
toggleButton.addEventListener('click', function() {
listBlock.classList.toggle('active');
});
toggleButton.innerHTML = itemButton[0].innerHTML;
addArrow();
itemButton.forEach(function (listItem) {
listItem.addEventListener('click', function (event) {
event.stopPropagation();
toggleButton.innerHTML = this.innerHTML;
toggleButton.focus();
closeList();
addArrow();
});
});
document.addEventListener('click', function (item) {
if (item.target !== toggleButton) {
closeList();
}
});
document.addEventListener('keydown', function (event) {
if (event.key === 'Tab' || event.key === 'Escape') {
closeList();
}
});
function closeList() {
listBlock.classList.remove('active');
}
function addArrow() {
toggleButton.insertAdjacentHTML('beforeend', `
<i class="fas fa-chevron-down"></i>
`);
}
