Impossible to create basic Chat app in Ionic2

Ionic Framework ionic-v3
1

It takes abut 20 mins in iOS to create a basic chat page (client only) - In ionic 2 it seems impossible after many hours of work speaking with many developers.

There seems to be no reliable way to keep the keyboard displayed after the input loses focus.

This is a serious limitation of an otherwise great framework. - although id like to use ionic - i cant until a basic chat page app is available that has the typical functionality and that the keybaord does not drop down on every message sent.

2 Likes
2

I have the same question as you,who can solve this?

3

Personally, i’d only want to show the keyboard when there’s focus on the input. Otherwise there’s no use in showing the keyboard.

So what you want to do is sending the message, but keeping the focus to the input.

4

Hi,when i click the ion-input,the keyboard pops up and covered the input field.i must scroll the screen to the ion-input’s position, click the link to see the detail :Two questions when the keyboard pops up?

Sorry,I’m not good at English,could you give me some advice?

5

Just guessing: can’t prevent the default event when the keyboard will hide?

I was looking at the ionic plugin keyboard docs

there is an event “native.keyboardhide” (This event fires when the keyboard will hide):

window.addEventListener('native.keyboardhide', keyboardHideHandler);
function keyboardHideHandler(e){
    alert('Goodnight, sweet prince');
}

isn’t it possible to do something like:

function keyboardHideHandler(e){
    e.preventDefault();
}

I’m assuming this could work like when we prevent the default submit behaviour from a form, in vanilla javascript:

document.hetElementById("my_form").onsubmit = function(e) {
e.preventDefault(); //form won't be submitted
}
6

Well this is not how ALL popular chat applications work, iMessage, whatsApp, skype - keyboard should stay up in-between messages - there is no way to do this in ionic 2 yet - which hurts my app a lot :frowning:

7

Hi guys,

basic chat functionality is a a fundamental requirement of my app.
I still don’t have a way to handle the implementation of a whats app clone in ionic2.

The two main deficiencies are

  1. input in footer should slide up with keyboard when focus.
  2. keyboard should not slide down between consecutive messages.

Please can someone help with this fundamental issue, otherwise I will have to revert back to native as this is a real flaw for an app where messaging is a crucial component.

8

Hi malma67,

I was wondering if you solve this problem.

Thanks

9

I managed to do this! (tested only on Android)

I first click on the enter button and then on the send/paper plane icon.

So what the issue the following code fixes is the fact that when you’re typing a message on an input field and then you press a button beside to send it, the keyboard disappears. (instead of pressing enter on the mobile keyboard).

This is due to the fact the focus is changed to the element button (for example).

Let say you have a chat messages controller:

  sendMessage() {
    // send msg to to other chat person (or bot)
  }

  // magic right here! 🎉
  preventFocusChange(e) {
    e.preventDefault();
  }

Now just set the mousedown event on the button or element you want the focus not to move to.
i.e. you want to keep the keyboard up when you click on this element.

    <ion-input [(ngModel)]="message" type="text" placeholder="Write a message..."
      maxlength="{{maxChatMessageLength}}" autocomplete="true"
      (keypress)="enterKeyHandler($event)" spellcheck="true"></ion-input>
    <ion-buttons end>
      <button ion-button icon-only [disabled]="!message.trim().length" (click)="sendMessage()" 
          (mousedown)="preventFocusChange($event)">
        <!-- ^-- this is what prevents the focus to change when clicking / tapping on the button -->
        <ion-icon name="paper-plane"></ion-icon>
      </button>
    </ion-buttons>

Hat Tip to Han Seoul-Oh who found this trick on jQuery:


http://jsfiddle.net/Ddffh/103/

1 Like