bug: scroll assist cancels first click event

Bug Report

Ionic version: [ ] 4.x [x] 5.x

Current behavior: An ion-item in a ion-list needs two clicks/taps to trigger the click event. This only happens on iOS (Safari/WebKit).

Expected behavior: The event should trigger on the first click.

Steps to reproduce:

1. Create an ion-list
2. Within the ion-list create an ion-item with a (click) event handler
3. Within the ion-item create an ion-label
4. Within the ion-item create an ion-input
5. Within the ion-item create an ion-button

Related code:

This is the markup with which you can reproduce the issue. You can also find a GIF at the bottom of this issue.

<ion-list>
  <ion-item (click)="onTitleClicked()" button detail="false">
    <ion-label position="floating">
      Title
    </ion-label>
    <ion-input [value]="title" readonly></ion-input>
    <ion-button
      *ngIf="title"
      slot="end"
      fill="clear"
      size="small"
      (click)="resetTitle($event)"
    >
      <ion-icon name="close"></ion-icon>
    </ion-button>
  </ion-item>
</ion-list>

I tried to narrow it down to the following, but the issue still persists.

<ion-list>
  <ion-item (click)="onTitleClicked()" button detail="false">
    <ion-label>
      Title
    </ion-label>
    <ion-input [value]="title"></ion-input>
  </ion-item>
</ion-list>

You can find a sample application on my GitHub.

Other information: I found out that this change of behaviour was introduced with version v5.0.6. I’ve checked the changes between the versions v5.0.5 and v5.0.6 but I didn’t find any suspicious code 🤔

Ionic info:

Ionic:

   Ionic CLI                     : 6.11.0 (/Users/phil/.asdf/installs/nodejs/12.17.0/.npm/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.3.1
   @angular-devkit/build-angular : 0.901.12
   @angular-devkit/schematics    : 9.1.12
   @angular/cli                  : 9.1.12
   @ionic/angular-toolkit        : 2.3.0

Capacitor:

   Capacitor CLI   : 2.4.0
   @capacitor/core : 2.4.0

Utility:

   cordova-res : not installed
   native-run  : 1.0.0

System:

   NodeJS : v12.17.0 (/Users/phil/.asdf/installs/nodejs/12.17.0/bin/node)
   npm    : 6.14.4
   OS     : macOS Catalina

[liamdebeasi]

Glad the issue is resolved. I merged in https://github.com/ionic-team/ionic-framework/pull/22845, the fix for this issue. This fix will be available in the next release of Ionic Framework.

Thanks!

[iphilgood]

@liamdebeasi Thank you so much 🎉 I just tried it out and it works like a charm 😍 I tested it in our production app and in my demo repo. Finally, the issue seems to be resolved. I run some tests on an iPhone 8, iPhone 12 Pro and also on an Android device and everything works as expected.

Should I run some additional testing or can I support you in some other way? Please let me know.