Ionic 3 - Native like chat page

26 Jan 2018

Are you tired of dealing with this in your Ionic app?

Well! Me too! By default, in a chat page the keyboard should stay open even when you click on the send button. But guess what? We will resolve this issue in this tutorial :)

For this tutorial, I have created a simple (and ugly) chat page (you can see it in the GIF). I believe it is not necessary to include how did I do it. It was simple, I just added an ion-footer component with a grid to divide the area of the input with the area of the send button. For the messages, I just created an array and a function to push the text wrote into the input. Easy right? Yep! 🙃

In order to resolve this problem, we need to create a new function into our chat page. This function will receive an event (if you are not familiar with events, I highly recommend you to read this Events - Mozilla)

The function will look like this:

preventFocusChange(e) { e.preventDefault(); }

And in the send button, you should add the mousedown event and pass the created function with $event as parameter:

(mousedown)=”preventFocusChange($event)”

And we are done!! We now have a native like chat page. To confirm it, take a look at the GIF below 🙃

If you have any question, just let me know 💯

---

---