При нажатии Tab выделенный элемент имеет рамку, но при фокусировке элемента вручную границы у него нет. ⇐ Jquery

[Anonymous]

Я динамически загрузил некоторые элементы li внутри div с помощью вызова ajax в jQuery. Я написал функцию для перебора этих элементов li с помощью клавиш со стрелками вверх и вниз.
Но я обнаружил странное поведение фокуса. Когда эти элементы сфокусированы на нажатии клавиши Tab, вокруг них есть рамка, но когда эти элементы сфокусированы с помощью стрелки вниз (функция, которую я написал), границы нет.
Вот код функции

Код: Выделить всё

    if (e.keyCode === 40 && elemID.includes("resultstagsid.")) {
e.preventDefault();
//$('#results a').eq(liIndex).removeClass("bg-gray")
liIndex++
// $('#results a').eq(liIndex).focus().addClass("bg-gray")
$('#results a').eq(liIndex).focus()

let scrollTo = $('#results a').eq(liIndex);
let position = scrollTo.offset().top
- container.offset().top
+ container.scrollTop();

container.animate({
scrollTop: position
});
}

//Here is the code where li elements are being generated.

const result = $('#results');
var html = "[list]"
for (var i = 0; i < results.length; i++) {
let valu = fuzzysort.highlight(results[i]);
html += "[*][url=#]" + fuzzysort.highlight(results[i]) + "[/url]"
}
html += "[/list]"
result.html(html)

Примечание. Я использую шаблон Admin LTE. Я также проверил класс, если он назначен для сфокусированного элемента. Но не смог найти. Я все равно пытаюсь оформить элементы по-другому и удалить рамку, но мне интересно это поведение, даже если я, возможно, делаю какую-то ошибку, поэтому, пожалуйста, если кто-нибудь может это объяснить.
Вот скриншот для обоих вариантов поведения



Подробнее здесь: https://stackoverflow.com/questions/718 ... t-manually