Estoy tratando de concentrarme en la entrada cuando se hace clic en el ícono de búsqueda para que el usuario pueda comenzar a escribir sin tener que hacer clic en la entrada manualmente. Idealmente, debería ser algo como esto, pero focus() no funciona en esta entrada por alguna razón.
$('.header__icons a[role="button"]').click(function(){ $('#q').focus(); })Probé varias opciones, pero nada... Veo que esta entrada se vuelve "focus-visible" y "data-focus-visible-added" cuando se hace clic en ella. Intenté agregarlos manualmente, pero tampoco lo enfoca. Tampoco pude localizar ninguna función relacionada con esto en los archivos.
EDITAR: el código funciona bien, solo agregué setTimeout ... y la consola de desarrollo fue la razón por la que no vi ningún cambio aquí :)
use setTimeout para esperar que la animación se complete
$('.header__icons a[role="button"]').click(function() { setTimeout(function() { $('#q').focus(); }, 1000) })En realidad, el código que tienes debería funcionar. Le recomiendo que cierre la consola de desarrollador del navegador y vuelva a probarlo. La razón por la que probablemente no funcione es que focus() no roba el foco de la consola de desarrollo.
Intente usar un setTimeout en la consola de desarrollo y luego haga clic rápidamente en la ventana de su navegador, luego debería ver que se enfoca en el cuadro de búsqueda.
setTimeout(function() { $('input[name="q"]').focus() }, 3000);El problema es que cuando el usuario hace clic en el botón, el campo aún no está visible, por lo que no se puede enfocar. Sin embargo, será visible en el próximo tick (no importa que sea transparente, se trata de si se representa o no), por lo que puede usar setTimeout con un tiempo de espera de cero:
$('.header__icons a[role="button"]').click(function(){ setTimeout(() => $('#q').focus(), 0) })