angular2 ionic 2 keeping keyboard popped up

Question

I'm building a chat app where the ion-footer is used as a text box + send button. when I tap on the input box the keyboard popups up nicely as I need. however, when I tap on send button, the keyboard goes down and it becomes a frustrating experience for end user.

I understand it happens as the keyboard looses the focus and ionic pushes it down. however, this is not what I want. How, do I keep keyboard as is until I really hit the send button.

my current ionic 2 looks like
<ion-footer padding>
    <form [formGroup]="chatForm" (ngSubmit)="sendChatMessage()">
        <ion-input type="text" formControlName="messageInput" placeholder="start typing..."></ion-input>
        <ion-buttons end>
            <button item-right ion-button clear type="submit" [disabled]="chatForm.controls['messageInput'].value === ''"><ion-icon name="ios-send" style="zoom:2.0;"></ion-icon></button>
        </ion-buttons>
    </form>
</ion-footer>

Answer 1

Setting focus will open the keyboard back up.

Setting the reference:

<ion-input #sendInput type="text" formControlName="messageInput" placeholder="start typing...">
</ion-input>

Connection reference to class:

@ViewChild("sendInput") public sendInput: TextInput;

Setting the focus:

this.sendInput.setFocus();

Answer 2

If you want to tap outside of input field, you need to trigger event from the tapped element.

For example, in my app, input/message field generates auto suggestions (out side of focus). Clicking on suggestions should not hide the keyboard.

I am trigerring a function/event public setInput(value){ } when any suggestion gets clicked.

HTML-

<ion-list class="autocomplete-list">
    <button ion-item *ngFor="let value of suggestions" (click)="setInput(value)">{{value}}</button>
</ion-list>

<ion-input #messageInput name="inputMessage" on-return="sendMessage()"></ion-input>

Solutions-

1. Using jQuery -

   setInput(value){
      $('.message-form input').focus();
   }
   

The .message-form is class name of container form element.

2. Angular -

   import { Component, ElementRef, ViewChild } from '@angular/core';
   
   export class HomePage {
       @ViewChild("messageInput") public messageInput: ElementRef;
   
   setInput(value){
       var elem:any = this.messageInput;
       elem._native.nativeElement.focus();
   }
   

I also tried using Ionic native Keyboard, but didn't worked.