ionic-framework: bug: scroll assist calls stopPropagation which can cause swipe to go back to break

Prerequisites

I have read the Contributing Guidelines.
I agree to follow the Code of Conduct.
I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v4.x
v5.x
v6.x
Nightly

Current Behavior

Swiping right on a form with ion-input and ion-label that has position stacked or floating sometimes causes the app to get stuck between two pages.

https://user-images.githubusercontent.com/104857648/166508595-324b1156-b862-4917-8869-f07e0e742cb1.MP4

Expected Behavior

If the user performs a “full swipe” the user get routed to the previous page.
If the user aborts the swipe he/she stays on the page.
In neither case the user is stuck between two pages.

Steps to Reproduce

Create an ion-content containing multiple ion-items with ion-label and ion-input. The ion-labels must have position="stacked" or position="floating".
Put it on a page where you can swipe to get back to a previous page.
Click into an ion-input
Swipe right fast from the middle of the screen while the ion-input have focus. Sometimes this has to be done multiple times before the bug appears.

It happens when swiping from the left of the screen or even scrolling fast too (probably slightly swiping right) but not as frequently and thus harder to reproduce.

Code Reproduction URL

https://github.com/colmunel/test

Ionic Info

Ionic:

Ionic CLI: 6.18.2 Ionic Framework: @ionic/angular 5.8.5 @angular-devkit/build-angular: 0.1101.4 @angular-devkit/schematics: 9.1.15 @angular/cli: 11.1.4 @ionic/angular-toolkit: 2.3.3

Capacitor:

Capacitor CLI: 3.2.5 @capacitor/android: 3.3.2 @capacitor/core: 3.2.5 @capacitor/ios: 3.3.2

Utility:

cordova-res: not installed globally native-run: 1.5.0

System:

NodeJS: v14.19.0 npm: 6.14.15 OS: Windows 10

Additional Information

Bug appeared on iOS. Not tested on Android.

About this issue

Original URL
State: closed
Created 2 years ago
Comments: 18 (9 by maintainers)

Commits related to this issue

fix(scroll-assist): touch end events continue to bubble on inputs (#25282) resolves #25229 — committed to ionic-team/ionic-framework by liamdebeasi 2 years ago

Most upvoted comments

Ok! Thanks for all the help, much appreciated!

colmunel on May 13, 2022

It seems to work in v.6 yes. Will it be fixed in v.5 as well?

colmunel on May 13, 2022

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

npm install @ionic/angular@6.1.6-dev.11652373111.19917404

Note: This is an Ionic 6 build. As a result, it is subject to the Ionic 6 Breaking Changes.

liamdebeasi on May 12, 2022

I don’t have a timeline on a fix yet. The next step is to determine if this is a bug in Ionic or a browser bug.

liamdebeasi on May 12, 2022

We add a touchend listener on ev.target here: https://github.com/ionic-team/ionic-framework/blob/main/core/src/utils/gesture/pointer-events.ts#L43

When the bug reproduces, the ev.target is the native input element inside of ion-input. If you tap the label, the item, etc the issue does not reproduce. It appears that the browser is not firing touchend on input for some reason.

If you reproduce the issue then tap the same input again, the gesture completes.

liamdebeasi on May 12, 2022

Thanks, I can reproduce this. It looks like the onEnd handler is not firing https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/router-outlet/route-outlet.tsx#L89. I will dig deeper and see why this is happening.

liamdebeasi on May 12, 2022