bug: ion-segment will toggle when the page is scrolled

[wilk-polarny]

Prerequisites

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

Ionic Framework Version

• [ ] v4.x
• [X] v5.x
• [ ] v6.x

Current Behavior

When using an ion-segment as part of a scrollable area (or rubber banding area on iOS), starting a scroll action on that element will toggle the segment, although the finger has enganged in a scroll gesture, scrolling the view.

Expected Behavior

Starting a scroll gesture must not cause the ion-segment to switch/toggle

Steps to Reproduce

• Create any page with enough content to allow for scrolling (or use the iOS bounce)
• Add an ion-segment
• Initiate a scroll gesture by tapping the currently inactive part of the segment
• Scroll the page up or down
• Lift off your finger and observe, that the segment has switched

Code Reproduction URL

https://github.com/wilk-polarny/Repro-Ionic-24062

Ionic Info

Ionic:

   Ionic CLI                     : 6.16.3 (C:\Users\xxx\AppData\Roaming\nvm\v14.17.0\node_modules\@ionic\cli)
   Ionic Framework               : @ionic/angular 5.7.0
   @angular-devkit/build-angular : 12.1.4
   @angular-devkit/schematics    : 12.1.4
   @angular/cli                  : 12.1.4
   @ionic/angular-toolkit        : 4.0.0

Cordova:

   Cordova CLI       : 10.0.0
   Cordova Platforms : android 9.1.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 5.0.0, (and 23 other plugins)

Utility:

   cordova-res : 0.15.3
   native-run  : 1.3.0

System:

   Android SDK Tools : 26.1.1 (C:\Users\xxx\AppData\Local\Android\sdk)
   NodeJS            : v14.17.0 (C:\Program Files\nodejs\node.exe)
   npm               : 6.14.13
   OS                : Windows 10

Additional Information

Added an Ionic Angular Repro-repo, it's reproducable within the browser.

[ionitron-bot[bot]]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[wilk-polarny]

@liamdebeasi , there you go: https://github.com/wilk-polarny/Repro-Ionic-24062

https://user-images.githubusercontent.com/819238/137018687-930e2a66-a5a3-4152-a3ff-4f8dcd2d1755.mp4

[wilk-polarny]

@liamdebeasi , any updates on this? Did this get fixed in 6.x ?

[levymetal]

This is still happening in 8.2.6. I've been able to work around the issue by setting swipeGesture to false. IMHO losing the swipe gesture is better than triggering the segment on scroll, but this is still a bug.

<IonSegment
  onIonChange={handleChangeSection}
  value={section}
  // fixes issue when initiating a content scroll with finger on a segment
  swipeGesture={false}
/>