Tengo una vista de chat simple y un botón que, cuando se hace clic, envía el valor del campo de entrada a la API (enviar mensaje)
Después de insertar texto a través del teclado virtual móvil y hacer clic en el botón "Enviar", el teclado se cierra.
Quiero evitar que se cierre, para que el usuario pueda enviar más mensajes y solo cuando haga clic fuera del teclado, finalmente se cerrará.
Mi código de reacción es así:
componente.tsx
<span className="input-group-btn"> <button ref={submitMessageBtn} className="btn" onClick={React.useCallback((event) => { event.nativeEvent.preventDefault(); sendMessage(); }, [])} > {i18n.sendMsgBtn} </button> </span> // somewhere down the function sendMessage function sendMessage() { const messageContent = chatMessageInput.current!.value; chatMessageInput.current!.value = ''; submitMessageBtn.current!.disabled = true; p.sendMessage(user.id, messageContent).catch((err) => { // not interesting for question }); } Probé en el controlador de eventos del botón para preventDefault() pero no funciona. También probé event.nativeEvent.stopPropagation(); event.stopPropagation() sigue sin éxito. No entiendo por qué se cierra el teclado (tal vez debido a la pérdida de enfoque, pero quiero mantenerlo abierto) ¿Cómo evitar que el teclado virtual móvil (Android) se cierre cuando hago clic en este botón?
Tuve el mismo problema con un botón en Vue.js y .preventDefault() en el evento de clic no ayudó. La solución fue agregar un EventListener en el botón para el evento "touchend".
mounted() { this.guestName = ""; const btn = document.querySelector(".input-button"); if (btn){ btn.addEventListener("touchend", (e)=>{ e.preventDefault(); //functions for the Button need to be called here this.addGuestClicked(this.guestName); }) }Acabo de probarlo en iOS, pero supongo que Android también funcionará.