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:

ponent.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 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:

ponent.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 ?

• javascript
• reactjs
• mobile
• android-softkeyboard

• 1 Maybe this codepen can help you. – Samball Commented Mar 17, 2022 at 13:27
• Interesting solution @Samball, works on my mobile device – GetSet Commented Mar 17, 2022 at 13:30
• I tried after posting here also doing ` submitMessageBtn.current!.focus()` and seem to work on Android, but issue is mobile keyboard is covering bottom of chat list. Need to padd dynamically based on size of keyboard – Kristi Jorgji Commented Mar 17, 2022 at 13:35

3 Answers 3

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.

This question ranked high on google, and here is how I managed to do this (with the position 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

You can try the VirtualKeyboard API: https://developer.chrome./docs/web-platform/virtual-keyboard/

if ('virtualKeyboard' in navigator) {
  // The VirtualKeyboard API is supported!
  navigator.virtualKeyboard.overlaysContent = true;
  navigator.virtualKeyboard.show();
  // When you want to hide it
  navigator.virtualKeyboard.hide();
}

Note this only works in a secure context i.e. localhost or https site. If you need to do testing and you want to host from your local device but test on your phone, use port forwarding as described here: https://developer.chrome./docs/devtools/remote-debugging/local-server/

Also your browser MUST be focused on an element which is editable, as per the W3C spec. https://www.w3/TR/virtual-keyboard/#webidl-65390189