Пропадает фокус с элемента на html

Question

Сразу скажу, что задача сложная и не понятная.

Есть 2 кнопки по типу

<td width="200px" align="right">
    <div class="parent-item" id="ParentButtonOneId">
        <div class="item">
            <div class="a-button item-button">
                <button style="width: 200px" type="button" id="buttonIdOne"
                        onclick="setTimeout(onClickButtonOne, 100);">Первая кнопка
                </button>
            </div>
        </div>
    </div>
</td>

<td width="200px" align="right">
    <div class="parent-item" id="ParentButtonTwoId">
        <div class="item">
            <div class="a-button item-button">
                <button style="width: 200px" type="button" id="buttonIdTwo"
                        onclick="setTimeout(onClickButtonTwo, 100);">Вторая кнопка
                </button>
            </div>
        </div>
    </div>
</td>

Внутри методы onClickButtonOne и onClickButtonTwo почти идентичны, самое главное, что внутри происходит вызов другого метода, который устанавливает фокус на основании классов и нажатой кнопки.

Самое главное, что внутри метода есть вызов окошка для выбора пользователем чего-то из списка, например

/-----------------------------/
/ Выберете элемент -----------/
/ 1. Первый-------------------/
/ 2. Второй-------------------/
/ 3. Третий-------------------/
/-----------------------------/
/ --/ОК/-------/Отмена/-------/
/-----------------------------/

Когда пользователь делает выбор, то фокус как бы попадает на следующую кнопку. То есть нажали первую кнопку, попадаем потом на вторую кнопку. Кнопка подсвечивается зеленым цветом и если вызывать в консоле document.activeElement то фокус вроде бы на второй кнопке. Но я не могу нажать Enter/Space или клавиши стрелок, чтобы фокус ушел на другой элемент html.

Если убрать вызов окна с выбором элементов, то фокусировка нормально попадает на нужную кнопку. Да, еще, если нажать на Tab, то фокус начинает ходить по браузеру, то есть на Вкладку -> Адресная строка -> Панель избранных -> Избранное -> и потом попадает на страницу на следующий элемент после второй кнопки.

Еще 1 из проблем, это проблема плавающая. Первый раз открыл страницу и нажал на первую кнопку, дефект воспроизведется. Перезагрузил страницу - дефект не воспроизведется. Нажал на кнопку мышью или на Enter когда фокус на первой кнопке дефект тоже может то быть, то не быть.

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

$('#nextButtonId').focus();

после всех уже действий, то document.activeElement вернет как раз таки этот элемент с id == nextButtonId.

Также, добавил на странице, там же где у меня все функции и записаны метод

document.onkeydown = function(){
  console.log(event);
}

Так вот, во время дефекта он тоже не отрабатывает если я жму на Enter или что-то другое, но если я просто мышкой нажму на страницу, то он выводит сообщение.

Так вот, мой вопрос. Как можно еще понять, куда уходит фокус. Ладно с тем, что не понятно как это вылечить. Как найти, где он действительно сейчас, что при нажатии на Tab он уходит в браузер.

БЛОГ НА HUSL

Пропадает фокус с элемента на html

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