Need to click ion-button two times to trigger the click event

Ionic Framework
1

I have to click two times to trigger the click event of an ion-button code chunk below

open the keyboard by focusing on ion-textarea and press save when keyboard. is up
Its on ios as of now running on ionic 4

<div class="msgContainer">
    <div class="defaultFont ion-padding-bottom"><b> Instructions:</b></div>
    <div class="inputContainer">
      <div class="login-input">


        <ion-textarea (ionBlur)="checkBlur(true)" (ionFocus)="checkFocous(false)" [(ngModel)]="item"></ion-textarea>


      </div>
      <ion-button tappable color="primary"  (click)='saveMessage(item)'>Save</ion-button>
    </div>
    <ion-list class="listClass" *ngIf="!isBlur">
      <ion-item>dummy test1</ion-item>
      <ion-item>dummy test2</ion-item>
      <ion-item>dummy test3</ion-item>

    </ion-list>
  </div>

My code is inside an ion modal but i don’t think that’s a problem?

2

Couple of things:

  1. You don’t need tappable on a button.
  2. Is this Ionic 3 or what?
  3. Is this Android, iOS or both?
  4. If this is Android - does the double click issue happen if you tap and release your finger, as opposed to waiting too long?

If 3 + 4 are: Android + No respectively, then this is just how Ionic works. You can get around it by attaching to the (touchend) event instead of click, but you may get some bizarre results, or not.

3

This is on IOS running on ionic 5.4.16 , I have not checked in with Android Yet this on IOS.

Point 4 is not valid as I can reproduce this issue on iOS I hope I didn’t forgot anything to your question

4

When I removed (ionBlur)="checkBlur(true)" (ionFocus)="checkFocous(false)"

It worked I was using ionBlur and ionFocus for detecting keypad is on or not , now I am getting that using Capacitor Keyboard Plug-in