Esto tiene que ser muy simple, pero simplemente no encontré ninguna respuesta. Tengo un menú simple para ingresar caracteres especiales en un cuadro de texto de búsqueda. Está haciendo su trabajo, pero si hago clic en un carácter, el menú se volverá (borroso) y el foco no volverá al campo. Mientras el cursor esté en el campo y/o haga clic en el menú de caracteres, quiero que el menú permanezca visible. En el listado de eventos para los botones de menú, funcionan la primera y la última línea. El texto se adjunta al cuadro de búsqueda y hola mundo se registra en la consola. Pero el menú no se muestra y el cuadro de texto no recupera el foco. ¿Que esta mal aquí?
demostración del problema aquí
let searchInput = document.querySelector('#search-input'); let charsMenu = document.querySelector('.charsmenu'); // add event listeners to textbox searchInput.addEventListener('focus', function() { toggleDisplay(charsMenu, true); }); searchInput.addEventListener('blur', function() { toggleDisplay(charsMenu, false); }); function toggleDisplay(element, show) { if (show) element.style.display = 'block'; else element.style.display = 'none'; } let listItems = document.querySelectorAll('.charsmenu li'); listItems.forEach((item, index) => { item.addEventListener('mousedown', (event) => { searchInput.value += `${event.currentTarget.innerHTML}`; toggleDisplay(charsMenu, true); searchInput.focus(); console.log("Hello world!"); }); });Lo más probable es que, después de disparar el mousedown, el elemento <li> robará el foco del elemento de entrada. Por lo tanto, querrá diferir el enfoque de configuración en el elemento de entrada al final de la pila de llamadas, es decir:
window.setTimeout(() => searchInput.focus(), 0);Vea la prueba de concepto a continuación:
let searchInput = document.querySelector('#search-input'); let charsMenu = document.querySelector('.charsmenu'); // add event listeners to textbox searchInput.addEventListener('focus', function() { toggleDisplay(charsMenu, true); }); searchInput.addEventListener('blur', function() { toggleDisplay(charsMenu, false); }); function toggleDisplay(element, show) { if (show) element.style.display = 'block'; else element.style.display = 'none'; } let listItems = document.querySelectorAll('.charsmenu li'); listItems.forEach((item, index) => { item.addEventListener('mousedown', (event) => { searchInput.value += `${event.currentTarget.innerHTML}`; toggleDisplay(charsMenu, true); window.setTimeout(() => searchInput.focus(), 0); }); }); .wrapper { display: flex; } .charsmenu { display: none; list-style: none; } .charsmenu li { float: left; border: 1px solid black; padding: 16px; } <div class="wrapper"> <ul class="charsmenu"> <li>a</li> <li>b</li> <li>c</li> </ul> <input type="text" id="search-input" /> </div>Como dijo Terry, el enfoque está siendo robado de todos modos.
Mi solución es simplemente agregar preventDefault() antes de la configuración de enfoque:
listItems.forEach((item, index) => { item.addEventListener('mousedown', (event) => { searchInput.value += `${event.currentTarget.innerHTML}`; toggleDisplay(charsMenu, true); event.preventDefault(); searchInput.focus(); }); }); Por cierto, puede tener un detector de eventos en un <UL> en lugar de cada <LI> .