How to prevent mobile keyboard from closing when I click button in website?

Question

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 ?

Answer 1

This question ranked high on google, and here is how I managed to do this (with the composition api)

you will need first to get a ref to your textarea (or input), and when you are firing the click event, call this ref value and focus on it:

<template>
  <textarea
    ref="input"
    placeholder="Message..."
  />
  <button @click="sendMessage">Send</button>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";

// if you are using JS, write only const input = ref(null);
const input = ref<null | { focus: () => null }>(null);

async function sendMessage() {
  // keep focus back on the input
  input.value?.focus();
  // input.value.focus(); in JS

  // then send the message
  // ...
}
</script>

this was tested only on android though