Vanilla JS/HTML/CSS - I open a modal popup - an input field should receive an autofocus

Question

1. I have a modal in my project that popsup on button click:

        <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. Here is the button to pop the modal up:

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

3. I use the following JS to show the popup:

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 is hidden with a class '.modal-visually-hidden' that is styled as display:none; When the button is pressed the popup shows up and the first field suppose to get in focus with the line nameInputField.autofocus = true; But it just won't. What am I doing wrong?

Answer 1

The autofocus attribute focuses the input on page load. You cannot set it after the DOM has loaded. Instead, try this:

nameInputField.focus();