The keyboard hides to run the MessageBar example on Android

I’ve run this example.
http://framework7.io/vue/messages.html
On Android, when I press the send button on the MessageBar, the keyboard hides.
Like the gif below.

What code should I use to avoid hiding the keyboard?

The Brief app built with Framework7 do not hide the keyboard.

If you know how, please let me know.
Thank you.

Hi,
you could try with cordova-plugin-ionic-keyboard

Hi
Thanks for your reply.
But it wasn’t a solution.

I wrote the code in main.js

window.addEventListener(‘keyboardWillHide’, () => {
Keyboard.show();
});

But it doesn’t any change.

Can you share the code? do you have a repo? or a sandboxcode.

Just look how it is done in Kitchen Sink, you need to call focus() on textarea inside of your send link click handler after you send the message

OK, I’ll upload my code after work. thanks.

Hi
I tested Kitchen Sink - Messages Menu (http://framework7.io/kitchen-sink/?theme=ios) on Android 5,7 version(chrome browser) and iOS 11 version(safari)

iOS is work fine. But Android is the same issue that I attached gif image in main article.

hi,
After a lot of testing, i get to this solution, i dont know if its correct. maybe @nolimits4web can say something about that.

so what i did was, remove the @click event and add an id to the anchor;

<a class="link icon-only demo-send-message-link" id='noHideKeyboard'>

then add an event listener to the event touchstart on pageInit and as a callback used the sendMessage

var el = document.getElementById('noHideKeyboard')
el.addEventListener('touchstart', this.sendMessage);

and in sendMessage prevent the events, and return false.

sendMessage: function (evt) {
  evt.preventDefault();
  evt.stopPropagation();
  evt.stopImmediatePropagation();
  ...CODE...
  return false
},

hope it works for you.
here is the result:

Probably just calling focus() is not enough for nasty Android :slight_smile: So that fix preventDefault and stopPropagation is more bulletproof