0

Всем привет. Не могу понять что происходит. Ниже 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 инпут очищается реально. Где там косяк в скрипте?

1
  • Используй отладку.
    – Qwertiy
    Commented 31 мар. 2022 в 13:26

1 ответ 1

0

В общем, сделал проще, добавил в функцию searchClose() конструкцию для удаления результата поиска при помощи innerHTML = ''

0

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.