He cargado dinámicamente algunos li dentro de un div mediante una llamada ajax en jQuery. He codificado la función para iterar a través de estos elementos li en la tecla de flecha hacia arriba y hacia abajo.

Pero encontré un extraño comportamiento de enfoque. Cuando estos elementos se enfocan al presionar Tab, tienen un borde alrededor de ellos, pero cuando estos elementos se enfocan con la flecha hacia abajo (función que escribí), no tienen borde.

Aquí está el código de la función.

 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 = "<ul>" for (var i = 0; i < results.length; i++) { let valu = fuzzysort.highlight(results[i]); html += "<li><a href='#' id='resultstagsid." + i + "' name='resultstagsid." + i + "' onclick='selectService(\"" + valu + "\"); ' class='resultsatags'>" + fuzzysort.highlight(results[i]) + "</a></li>" } html += "</ul>" result.html(html)

Nota: estoy usando la plantilla Admin LTE. También verifiqué la clase si se asignó para el elemento enfocado. Pero no pude encontrar. Estoy tratando de diseñar los elementos de manera diferente y eliminar el borde de todos modos, pero tengo curiosidad acerca de este comportamiento, incluso si puedo estar cometiendo algún error, así que si alguien puede explicar esto, por favor.

Aquí está la captura de pantalla para ambos comportamientos.