Всем привет. Не могу понять что происходит. Ниже JS код, который отвечает за закрытие и открытие окна поиска, работающего на JS плагине. Закрытие происходит по нажатию кнопки с крестиком, клавиши Esc и в любом месте этого окна
//Search Screen
const btn = document.querySelector('.head__search-icon'),
body = document.body,
search = document.querySelector('.search'),
searchInner = document.querySelector('.search__inner'),
searchOverlay = document.querySelector('.search__overlay'),
searchInput = document.querySelector('#search__input'),
btnClose = document.querySelector('.search__closed-button');
body.classList.add('no-search'),
search.style.display = 'none';
function searchOpen() {
btn.addEventListener('click', () => {
body.classList.remove('no-search');
body.classList.add('is-search');
search.style.display = 'block';
setTimeout(() => searchInput.focus(), 100);
if (body.classList.contains('is-head-open')) {
body.classList.remove('is-head-open');
}
});
}
searchOpen();
function searchClose() {
body.classList.add('no-search');
body.classList.remove('is-search');
searchInput.value = '';
searchInput.blur();
}
function searchRemove(e) {
if(e.code === "Escape" && body.classList.contains('is-search') || e.target === searchOverlay || e.target === searchInner) {
searchClose();
}
}
document.addEventListener('keydown', searchRemove);
search.addEventListener('click', searchRemove);
btnClose.addEventListener('click', searchClose);
Дело в том, что если есть результат поиска, и нажать Esc, то все работает, фокус с инпута пропадает, и сам инпут очищается. Но если нажать мышью в любом месте окна ( e.target === searchOverlay || e.target === searchInner ) то само окно закрывается, инпут очищается, как мне и нужно, кроме того что при визуально чистом инпуте результаты поиска остаются. То есть открываешь окно снова и видишь те же результаты поиска, хотя инпут пустой. При работе с Esc инпут очищается реально. Где там косяк в скрипте?