JS способ, который будет брать в Focus input во всплывающем окне

Question

Помогите, пожалуйста, с темой focus();

Есть input, который появляется в следствии нажатия на элемент. Как сделать, чтобы после нажатия на элемент, выпадающий input выбирался в focus?

Ниже приведу пример кода.

Есть пример кода на JQuery, нужен аналог на JS Native.

Вот это код на JQuery, он активирует выпадающее окно и берёт в focus.

$('.search').click(function() {
 $('.search-field').slideToggle();
 $('.search-field input[type=text]').focus();
});

Это мой код, который делает то же самое, но не знаю, как добавить, чтобы брал в focus.

let search = document.querySelector('.search');
let sF = document.querySelector('.search-field');



search.addEventListener('click', () => {
    if (sF.style.visibility === 'hidden') {
        sF.style.visibility = 'visible';
        sF.style.opacity = '100%';
        myInput.focus();
    } else {
        sF.style.visibility = 'hidden';
        sF.style.opacity = '0%';
    }
});

Answer 1

Есть метод focus, который можно применить на элементе, чтобы навести фокус

Answer 2

В общем, я нашёл ответ на свой вопрос.

Недостаточно было прописать только focus() по той причине, что focus() не срабатывал из-за transition-duration 300ms.

Логично предположить, что если накидаем задачи, они выполнятся по очереди и сразу, и никто не будет ждать, когда окно выплывет.

Т.е. focus() пытается примениться для ещё неоткрытого окна.

Далее, можно решить вопрос асинхронным подходом.
Вешаем setTimeout(), ждём, когда выплывет окно, и только потом вешается focus().

const search = document.querySelector('.search');
const sF = document.querySelector('.search-field');
const input = sF.querySelector('.inputM');




search.addEventListener('click', () => {
  if (sF.style.visibility === 'hidden') {
    sF.style.visibility = 'visible';
    sF.style.opacity = '100%';
    setTimeout(() => {
      return input.focus();
    }, 100);
  } else {
    sF.style.visibility = 'hidden';
    sF.style.opacity = '0%';
  }
});

БЛОГ НА HUSL

JS способ, который будет брать в Focus input во всплывающем окне

Ответы (2 шт):