I have a simple chat view, and one button that when clicked sends the value of input field to api (send message)
After I insert text via mobile virtual keyboard, and click "Send" Button the keyboard closes.
I want to prevent that closing, so user can send more messages and only when they click outside keyboard it finally closes
My react code is like this:
component.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
});
}
I tried in the button event handler to preventDefault() but doesn't work. I also tried event.nativeEvent.stopPropagation(); event.stopPropagation() still no success. I don't understand why the keyboard closes (maybe due to losing focus but I want to keep it open)
How to stop mobile (android) virtual keyboard from closing, when I click this button ?
I had the same Problem with a Button in Vue.js and .preventDefault() on the click-event didn't help. The solution was adding an EventListener on the Button for the "touchend" Event.
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);
})
}
I just tested it on iOS, but I guess Android will work too.