csbok
May 9, 2018, 3:56pm
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.
Brief
It's not rocket science. By bringing all your channels into one place, your team will never miss a message from a customer again.
- Connect your team to website live chat, shared email inbox and Facebook page messaging.
- Customer messages that has been waiting for a while will be highlighted.
- Hashtag customers to easily find them later.
- Create team chat rooms to discuss certain topics.
- Works on desktop, tablet and phone.
Main features:
- Channel: Website live chat
- Channel: Shared ...
Free
If you know how, please let me know.
Thank you.
csbok
May 9, 2018, 4:48pm
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.
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
csbok
May 10, 2018, 1:45am
6
OK, I’ll upload my code after work. thanks.
csbok
May 10, 2018, 1:54am
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.
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 So that fix preventDefault
and stopPropagation
is more bulletproof