Используй MutationObserver для того, чтобы отследить появление элемента на странице.
Пример:
Развернуть пример// Ожидание элемента:
function waitElements(selector, regexp, where) {
return new Promise(function(returnResult) {
var search_result = false;
var local_reactive_function = function() {
var wait_elements = searchElements(selector, regexp, where);
if (wait_elements.length > 0) {
if (search_result === false) {
search_result = true;
observer.disconnect();
returnResult(wait_elements);
}
}
}
var observer = new MutationObserver(local_reactive_function);
observer.observe(document.body, {
characterData: true,
attributes: true,
childList: true,
subtree: true
});
local_reactive_function();
});
}
// Поиск элемента:
function searchElements(selector, regexp, where) {
var search_elements = [];
if (typeof where !== 'undefined') {
var all_elements = where.querySelectorAll(selector);
}
else {
var all_elements = document.querySelectorAll(selector);
}
for (var n = 0; n < all_elements.length; n++) {
if (typeof regexp == 'object') {
if (typeof regexp.test == 'function') {
if (regexp.test(all_elements[n].innerText.trim())) {
search_elements.push(all_elements[n]);
}
}
}
else {
search_elements.push(all_elements[n]);
}
}
return search_elements;
}
Функция searchElements просто ищет элементы по селектору и регулярному выражению (если надо). Функция waitElements использует MutationObsrever и функцию searchElements, чтобы дождаться появления элемента / элементов, а затем возвращаем массив состоящих из них.
Пример использования:
var els = await waitElements('input#id');
console.log('Элементы найдены:', els);
Ну или на вашем кривом примере, как-то так:
btn.addEventListener('click', async (e) => {
field = e.currentTarget.parentNode.querySelector('[data-inline-search-field]');
field.classList.add('active');
(await waitElements('input', null, field))[0].focus();
closeBtn = field.querySelector('[data-inline-search-close]');
});
