I've found out what the issue was. I will submit a PR shortly 🙌🏽

Can confirm this

Well, I thought I found the issue but actually I didn't. 😅 For more information check out the comment from @liamdebeasi.

Hopefully, this gets fixed soon. If I can do anything, please let me know. I'm happy to help.

I have been able to reproduce this sporadically as well using the (tap) event, however, in my case, switching to (click) seems to have been a passable workaround.

Maybe related to #20986

Now that you mention it, this does only occur on iOS from the testing I've seen.

At least you can get it to click. My ion-item button does not fire a click event at all...

Actually it's been happening on Android as well. Do you have any custom Hammer.js recognizers configured?

Changing event listeners, like touchstart and touchmove to passive wherever possible.

may help a little bit. That's what I got from release notes in 4.10.4 of Mobiscroll.

Thanks to this discussion on StackOverflow I found out that two clicks/taps are only necessary when using an <ion-label> with position="floating" or position="stacked".

Thanks to this discussion on StackOverflow I found out that two clicks/taps are only necessary when using an <ion-label> with position="floating" or position="stacked".

@iphilgood hi, we have tried this solution and it doesn't work for us, so if anyone has suggestions for how to fix this is would be well appreciated.

Can confirm as well in this demo with these steps:
Ion content with some padding (50px here) and scrollEvents true
--background-activated-opacity: 1 on item
Scroll to very bottom of list and click on an item
See list i "moving" and click is ignored, second click will work

<ion-content [scrollEvents]="true" style="--padding-bottom: 50px;">
  <ion-item
    button
    style="--background-activated-opacity: 1"
    *ngFor="let item of items"
    (click)="onClick(item)"
  >
    <ion-label>{{ item }}</ion-label>
  </ion-item>
</ion-content>

https://github.com/lydemann/ionic-item-scrollend-click-bug

I can reproduce this. The issue is with the scroll assist utility. When scroll assist starts after an input is tapped, Ionic Framework calls preventDefault and stopPropagation on the touchend event, which cancels the click event: https://github.com/ionic-team/ionic-framework/blob/master/core/src/utils/input-shims/hacks/scroll-assist.ts#L29-L30

I can remove those lines, but I need to make sure it does not interfere with anything else.

Can you try the following dev build and let me know if it resolves the issue?

Angular

npm install @ionic/[email protected]

React

npm install @ionic/[email protected] @ionic/[email protected]

Vue

npm install @ionic/[email protected] @ionic/[email protected]

Stencil/Vanilla JavaScript

npm install @ionic/[email protected]

Can confirm as well in this demo with these steps:
Ion content with some padding (50px here) and scrollEvents true
--background-activated-opacity: 1 on item
Scroll to very bottom of list and click on an item
See list i "moving" and click is ignored, second click will work

<ion-content [scrollEvents]="true" style="--padding-bottom: 50px;">
  <ion-item
    button
    style="--background-activated-opacity: 1"
    *ngFor="let item of items"
    (click)="onClick(item)"
  >
    <ion-label>{{ item }}</ion-label>
  </ion-item>
</ion-content>

https://github.com/lydemann/ionic-item-scrollend-click-bug

The dev build I posted appears to fix the repo you posted in #22740, but https://github.com/lydemann/ionic-item-scrollend-click-bug seems like a different issue.

Thanks for your dev build! Awesome that this issue gets further investigated 🎉

The click event gets now fired on first click but a funny thing is happening. The lower (like lower in the y axis) the item with input gets rendered, the longer it takes to fire the click event 🤔 In other words, the click on the very first item of a page gets fired faster than the click on the very last item of a page.

Do you have an idea why this is happening?

I've updated the demo repo from my very first post with the new version and additional examples. This behaviour is actually reproducable in my demo repo.

I also tested this only on iOS. Do you think I should try that on Android as well? Furthermore, if there's anything I can do to support you please let me know.

@liamdebeasi - I have been working with someone on an issue related to this one and your dev build appears to fix the issue for them without causing other problems.

@iphilgood Can you try this dev build? It should fix the issue you mentioned.

Angular

npm install @ionic/[email protected]

React

npm install @ionic/[email protected] @ionic/[email protected]

Vue

npm install @ionic/[email protected] @ionic/[email protected]

Stencil/Vanilla JavaScript

npm install @ionic/[email protected]

@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.

Glad the issue is resolved. I merged in #22845, the fix for this issue. This fix will be available in the next release of Ionic Framework.

Thanks!

I still have the same issue with a checkbox within a ion-item. The checkbox is not checked/unchecked on the first tap (only in iOS, in Android it works like a charm).

Still having this issue sporadically on things like buttons, the ion-back-button, and other elements. It seems to happen more near the edge of the screen than other places, though I'm not sure why that would be. Possibly menu gesture interaction?

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.