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
    31 мар 2022 в 13:26

1 ответ 1

0

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

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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