Click on a button within an ion-footer doesn't execute (click) function at first

Question

I am developing a chat with Ionic 2. I used keyboard-attach directive.

//View
    <ion-footer [keyboardAttach]="content">
      <ion-toolbar class="text_send">
        <ion-textarea class="textarea" fz-elastic placeholder="Message" [(ngModel)]="message"></ion-textarea>
        <button ion-button small icon-only round color="secondary" (click)="onSend()">
          <ion-icon name="send"></ion-icon>
        </button>
      </ion-toolbar>
    </ion-footer>

// Controller
onSend() {
    console.log('Send new message ', this.message);
    if (this.id === 'new') {
      this.messageService.createChatAndSendFirstMessage(this.cuid, this.recipientUid, this.message)
      .then(newChatId => {
        // Get last messages of the new chat so that it gets displayed in the view
        this.messages$ = this.messageService.getLastMessages(newChatId, this.ccompany, 20);
        // Update chat id in case the user send more than 1 message
        // In this case it should be the regular behavior for non new messages
        this.id = newChatId;
      })
      .catch(error => console.log('ChatPage#onSend - Error while sending new message ', error));

    } else {
      // If a chat already exists with this user
      this.messageService.sendMessage(this.id, this.cuid, this.recipientUid, this.message)
      .catch(error => console.log('ChatPage#onSend - Error while sending new message ', error));
    }

    // Empty the message input
    this.message = '';
  }

When I emulate my code on iOS and click in the textarea the keyboard shows: perfect.

Only problem is that when I click on the send button, the keyboard hide but the onSend() function is not executed I have to click a second time on it.

How could I manage to click only once and this one click will both hide the keyboard and execute my onSend() code?

Answer 1

I am doing the same thing in various parts of my application, with the keyboard attach directive, with no problems. I believe it may be caused by the (click) emitter you're using.

Try changing it to (tap)

I believe there are some known issues with using (click) in ios safari. ionic2 tap vs click