Ionic 5 - ion-item requires 2 clicks in IOS to trigger onclick event

Issue

Below code is using to open modal on click of ion-item

 <ion-item lines="none" (click)="selectDepartment()" class="m-0 ion-float-left w100">
   <ion-input formControlName="department_name" ngDefaultControl readonly type="text" placeholder="Select Department" class="tenx-input with-icon header-sub-head-font-16 w100 ion-float-left">
        <ion-icon class="header-sub-head-font-16" src="assets/icon/down-arrow.svg" item-right></ion-icon>
   </ion-input>
 </ion-item>

"selectDepartment" gets triggered only if user clicks on ion-item 2nd time. Tried many solutions but no luck

Ionic Info

Ionic:

   Ionic CLI                     : 5.4.16 (C:\Users\Nitin\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 5.3.4
   @angular-devkit/build-angular : 0.1000.8
   @angular-devkit/schematics    : 10.0.8
   @angular/cli                  : 10.0.8
   @ionic/angular-toolkit        : 2.3.3

Cordova:

   Cordova CLI       : 10.0.0
   Cordova Platforms : android 9.0.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 12 other plugins)

Utility:

   cordova-res : 0.12.1
   native-run  : 1.0.0

System:

   Android SDK Tools : 26.1.1 (C:\Android\sdk)
   NodeJS            : v10.17.0 (C:\Program Files\nodejs\node.exe)
   npm               : 6.11.3
   OS                : Windows 10

Solution

Work around for this could be:

• Disable the ion-item
• Add onClick the ion-item
• Prevent the default

It works for me always.

Answered By - Shreyash Jadhav