Блог

1. В моем проекте есть модальное окно, которое появляется при нажатии кнопки:

         <div class="modal modal-visually-hidden">
            <h3 class="modal__header">Оставить отзыв</h3>
            <button name="Close the window" class="modal__close-button">x</button>
            <div class="modal__form-container">
                <form id="modal__form" action="#">
                    <label for="modal__form--name">Пожалуйста, заполните поле</label>
                    <input id="modal__form--name" type="text" placeholder="Имя" required> <!--this is the field needed to autofocus on modal open event-->
                    <input id="modal__form--qualities" type="text" placeholder="Достоинства">
                    <input id="modal__form--drawbacks" type="text" placeholder="Недостатки">
                    <input id="modal__form--submit" class="global-hover" type="submit" value="оставить отзыв">
                </form>
            </div>
  

2. Вот кнопка для всплывающего модального окна:

                     <div class="feedback__button-container">
                        <button name="Leave a feedback" id="feedback__button" class="feedback__button">оставить отзыв</button> 
                    </div>
  

3. Я использую следующий JS для отображения всплывающего окна:

 const activatePopupButton = document.querySelector('#feedback__button');    
        const commentPopup = document.querySelector('.modal');
        const closePopupButton = document.querySelector('.modal__close-button');
        const nameInputField = document.querySelector('#modal__form--name'); /* I select the field for further autofocus */


        closePopupButton.addEventListener('click', function() {
            commentPopup.classList.add('modal-visually-hidden');
            document.querySelector('body').style.overflow = 'visible';
        });



        activatePopupButton.addEventListener('click', function() {
            commentPopup.classList.remove('modal-visually-hidden');
            nameInputField.autofocus = true;     /*this line should autofocus the field in question*/
            console.log(nameInputField.autofocus);
            document.querySelector('body').style.overflow = 'hidden';
        });
  

Модальный скрыт классом ‘.modal-визуально-hidden’, который оформлен как display: none;
При нажатии кнопки появляется всплывающее окно, и предполагается, что первое поле попадает в фокус со строкой nameInputField.autofocus = true;
Но этого просто не произойдет. Что я делаю не так?

autofocus Атрибут фокусирует ввод при загрузке страницы. Вы не можете установить его после загрузки DOM. Вместо этого попробуйте это:

 nameInputField.focus();