The keyboard hides to run the MessageBar example on Android


#1

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.
https://play.google.com/store/apps/details?id=com.letsbrief.app

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


#2

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


#3

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.


#4

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


#5

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


#6

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


#7

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.


#8

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:


#9

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