ionic-framework
ionic-framework copied to clipboard
bug: ion-segment swipe-gesture doesn't stop gesture
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
v8.x
Current Behavior
swipe-gesture="false" doesn't stop swipe between segments
Expected Behavior
user shouldn't be able to swipe between segments if swipe-gesture="false"
Steps to Reproduce
set swipe-gesture="false" on ion-segment
swipe between segment-content inside segment-view
Code Reproduction URL
https://stackblitz.com/edit/msaxc4p1?file=src%2Fapp%2Fexample.component.ts
Ionic Info
Ionic:
Ionic CLI : 7.2.0
Ionic Framework : @ionic/angular 8.5.1
@angular-devkit/build-angular : 18.2.12
@angular-devkit/schematics : 18.2.12
@angular/cli : 18.2.12
@ionic/angular-toolkit : 11.0.1
Additional Information
No response
I am also finding issues with swipes, and the
IonicModule.forRoot({ swipeBackEnabled: false, }),
isn't working for me.
Nothing "turns off" the swipe gestures. The issue:
Considering a stack with "n" pages hierarchically opened (like 10), pressing the back button or using the ionic back button, it is working fine. But when the user starts to swipe left/right automatically, the routes stack looks strange and at some point loses the reference.
Nothing is working for me to disable the swipe back.
Did you manage to fix this? I have run into this issue too.
My implementation could be user-error, but in its current form, the usability of the swipe gesture when combined with vertical scroll is problematic. Here's a video recording of that interaction. I don't believe that users should be able to scroll the view down, and gesture to switch segments at the same time, as is shown in the video. https://photos.app.goo.gl/qDmxenA678mJ8MDi7
<ion-header>
<ion-toolbar>
<!-- random stuff -->
</ion-toolbar>
<ion-toolbar>
<ion-segment style="width: 100%; margin: 0 12px">
<ion-segment-button value="sortBy" content-id="sortBy">
<ion-label>Sort by</ion-label>
</ion-segment-button>
<ion-segment-button value="reorder" content-id="reorder">
<ion-label>Reorder</ion-label>
</ion-segment-button>
</ion-segment>
</ion-toolbar>
</ion-header>
<ion-content [scrollY]="false" [scrollX]="false">
<ion-segment-view>
<ion-segment-content id="sortBy">
<ion-list>
<ion-radio-group [value]="selectedSortField" (ionChange)="handleSortSelection($event)">
<!-- list of radio buttons -->
</ion-radio-group>
</ion-list>
</ion-segment-content>
<ion-segment-content id="reorder">
<ion-list>
<ion-reorder-group [disabled]="false" (ionItemReorder)="handleReorder($any($event))">
@for (field of fieldOptions; track field.field) {
<ion-item>
<!-- list of items with buttons -->
</ion-item>
}
</ion-reorder-group>
</ion-list>
</ion-segment-content>
</ion-segment-view>
</ion-content>
Any update on this one? I'm experiencing the same issue—the segment still swipes even with [swipeGesture]="false" set on the ion-segment tag.
I'm having particular issues when interacting with ion-item-slide inside an ion-segment-content. I think properly disabling swipeGesture (or getting it to work correctly) would potentially solve this issue.
Here is a video, of the incorrect behaviour I am experiencing: Issue with Ion-Segement gestures - Google Drive
Thank you for the issue! After discussing it with the team, we've confirmed that it was not the intended behavior to disable swiping on ion-segment-view when the ion-segment has swipeGesture set to false.
To address this, we've decided to introduce a new property that allows developers to explicitly disable the swipe gesture on the segment view. I've marked this as a feature request so it can be added.
@brandyscarney any ETA on when this will be added?
@moblizeit We don't have a specific ETA at the moment. The feature set for the next release (8.7) is already locked in, but I've added this to our feature backlog so we can fit it in when time allows. If you're interested in contributing a PR, that would help prioritize it!