bug: ion-toggle and rendered label blocks vertical gestures/touch-scrolling

[lincolnthree]

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

v7.x

Current Behavior

With the new 'modern form syntax' ion-toggle now renders or contains its label as a child element. This means that its gesture config is now taking over the entire width of the parent container, and blocks touch/scroll gestures on not just the toggle icon/button, but on the entire label/row. This can lead to some very confusing user interactions.

See video:

Screen.Recording.2023-04-20.at.12.08.17.PM.mov

Note, I have not tried it, but I suspect that other elements such as ion-range, which also have gestures, may also suffer from this same issue.

Expected Behavior

The toggle's label should not be a gesture capturing element.

Steps to Reproduce

Checkout repro url and scroll as seen in video.

Code Reproduction URL

https://github.com/lincolnthree/ionic-bugs/tree/issue-27254

Ionic Info

Ionic:

Ionic CLI : 6.20.3 (/Users/lincoln/.nvm/versions/node/v16.14.0/lib/node_modules/@ionic/cli)
Ionic Framework : not installed
@angular-devkit/build-angular : 15.1.6
@angular-devkit/schematics : 15.1.6
@angular/cli : 15.1.6
@ionic/angular-toolkit : 6.1.0

Capacitor:

Capacitor CLI : 4.6.3
@capacitor/android : not installed
@capacitor/core : 4.6.3
@capacitor/ios : not installed

Utility:

cordova-res : not installed globally
native-run (update available: 1.7.2) : 1.7.1

System:

NodeJS : v16.14.0 (/Users/lincoln/.nvm/versions/node/v16.14.0/bin/node)
npm : 8.3.1
OS : macOS

Additional Information

No response

[liamdebeasi]

Thanks! Mind giving this dev build a shot?

7.0.4-dev.11682008337.11c1bc0d

[lincolnthree]

Hey Liam,

Thanks - Unfortunately, this does not seem to resolve the issue here in my sandbox. I'm going to try a few more times, but as of right now, I have not noticed a change in gestures when interacting with toggles.

Ionic:

   Ionic CLI                     : 7.0.1 (/Users/lincoln/.nvm/versions/node/v16.14.0/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 7.0.4-dev.11682008337.11c1bc0d
   @angular-devkit/build-angular : 15.1.6
   @angular-devkit/schematics    : 15.1.6
   @angular/cli                  : 15.1.6
   @ionic/angular-toolkit        : 6.1.0

[liamdebeasi]

Make sure @ionic/[email protected] is getting installed too as that is where the fix is.

[lincolnthree]

Make sure @ionic/[email protected] is getting installed too as that is where the fix is.

[lincolnthree]

I tried both in my production app and also in the sample repo.

[lincolnthree]

Let me try a full reinstall of node modules.

[lincolnthree]

Ok, so I do notice one change. Swiping left-right no longer toggles, but swiping up/down still does not scroll as expected:

Screen.Recording.2023-04-21.at.10.44.10.AM.mov

[liamdebeasi]

Good catch! Here's a dev build with another fix: 7.0.4-dev.11682092361.1656526f

[lincolnthree]

Thanks @liamdebeasi - The latest Dev build appears to fix the issue!

[ionitron-bot]

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.