[Ionic 2 + Firebase] Chat application upon receiving an incoming message the view reloads and user losses message being typed -- SOLVED

Ionic Framework ionic-v3
1

Hi - I am implementing a chat web/mobile on Ionic2 using Firebase.

On the component, I subscribe to a firebase array for new messages:

this.messagesRef = af.database.list(SERVER.env+"/instances/"+this.firebase_id+"/messages");
this.messagesRef.subscribe( data => {
    this.messages = data;
});

On the template:

<ion-content>    
  <div *ngFor="let message of messages"(hold)="onMessageHold($event, $index, message)">
    <div class="message">
        {{ message.text }}
      </div>
  </div>
</ion-content>

<ion-footer>    
  <ion-toolbar class="no-border" color="white">        
    <ion-input [(ngModel)]="newMessage" placeholder="Write your message ..."></ion-input>  
    <ion-buttons end>
      <button ion-button (click)="sendMessage()">
        <ion-icon name="md-send" color="primary"></ion-icon>
      </button>
    </ion-buttons>
  </ion-toolbar>    
</ion-footer>

Every time a new message comes in, the view reloads triggering the lifecycle hooks (ionViewDidEnter, etc.) and deleting whatever the user is typing in the input box.

This doesn’t happen if running on a browser, but happens on actual devices. Any suggestions? At a bit of a loss here

2

What if you had the messages as a separate child component with its own template? Maybe this way when the (new and separate) messages component triggers a re-render, then the parent component (where the message input resides) should remain as is.

Alternatively you could copy the value of newMessage to a separate variable newMessageCache every time newMessage gets updated. Then on ionViewWillEnter event check if newMessageCache !== undefined, if true then newMessage = newMessageCache.

There’s probably a more elegant approach, but I’m brainstorming here.

Let me know how this goes.

3

Thanks for this suggestion. I actually implemented the cache solution using localstorage, it mitigates a bit the annoyance (as the user doesn’t lose message in progress), but the keyboard will hide and pop up again.

4

Yeah, I feared you might get that issue which is why I offered the component solution first. Since you seem quite at ease with ionic I suggest you spend the 15 minutes to see if you can solve this problem entirely using a custom subcomponent, instead of working around it.

Cheers.

5

It would be good to know which actual devices you’ve seen this on, because who knows, maybe there’s a bug. But I haven’t had this issue myself.

Is your (hold) in the wrong place? I thought it would go on the inner div. Maybe the redefinition of that function is what is forcing the DOM to rebuild.

I’d change the outer div to an ion-list, and use the async pipe as shown in the AngularFire documentation, instead of what you are doing now, and see if that resolves the problem. I’d do one of those things at a time, starting with moving (hold), and see if it helps.

6

Thank you all. After countless hours I figured it out, it ended up being a push notification payload with additional data triggering the view to reload (this is why I only saw this behavior in the actual devices).

7

Hey is there any chance you can share your chat code here? Have you implemented ionic infinite scroll with this?

8

Happy to share the code here. Looking at the controller or view? or both?

I have not implemented infinite scroll with this, since with Firebase it loads the entire list at once.

9

Looking at both if possible. Im trying to implement a chat with angular fire and ionic infinite list, it takes a while to receive and load messages without infinite list if you have a lot of messages?