Tengo estas tres pestañas:
Cuando un usuario usa el mouse y hace clic en una de las pestañas (Notas de cumplimiento en este ejemplo), el elemento adecuado en la página con pestañas se enfoca y se resalta adecuadamente.
Sin embargo, si el usuario usa el teclado y presiona la tecla Tab para resaltar la pestaña que desea y luego presiona la tecla Intro para seleccionar esa pestaña, la página con pestañas recibe el foco. Luego, a través de JavaScript, enfoco el elemento adecuado en esa página con pestañas (usando el método .focus() en ese elemento), y el mismo asp:DropDownList en el ejemplo se comporta como si el usuario no solo seleccionara el elemento, sino que hizo clic en él:
Si luego presiona Enter o Tab, manualmente, la lista desplegable se cierra y el elemento se ve como si el usuario hiciera clic en la pestaña en lugar de usar el teclado:
Entonces, ¿hay una manera "simple", después de usar el método .focus(), para luego simular una pulsación de tecla Enter o Tab para que el elemento tenga el foco pero no se active la lista desplegable? ¿O hay otra forma, usando el método .focus() o algún otro enfoque, para evitar que se active la lista desplegable cuando se usa el teclado para navegar por la página?
El comportamiento que menciona parece estar relacionado con el evento keydown. Aquí hay un ejemplo: cuando escribe en el campo de texto, debe enfocarse en el menú desplegable. Cuando presiona Intro en el campo de texto, observe que el primer ejemplo (usando keydown) se comporta de manera similar a lo que informó. El segundo ejemplo (usando la pulsación de tecla) no lo hace.
document.querySelector('#typeHere').addEventListener("keydown", (e) => { document.querySelector('#focusMe').focus(); }); document.querySelector('#typeHere2').addEventListener("keypress", (e) => { document.querySelector('#focusMe2').focus(); }); <select id='focusMe'> <option>Test 1</option> <option>Test 2</option> <option>Test 3</option> </select> <input id='typeHere' > <br><br> <select id='focusMe2'> <option>Test 1</option> <option>Test 2</option> <option>Test 3</option> </select> <input id='typeHere2'>