ionic-framework icon indicating copy to clipboard operation
ionic-framework copied to clipboard

bug: ion-segment swipe-gesture doesn't stop gesture

Open jongbonga opened this issue 8 months ago • 3 comments

Prerequisites

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

jongbonga avatar Mar 21 '25 13:03 jongbonga

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.

Leomhl avatar Apr 15 '25 19:04 Leomhl

Did you manage to fix this? I have run into this issue too.

sargison avatar Apr 23 '25 19:04 sargison

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>

baleeds avatar May 07 '25 19:05 baleeds

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

oscarAct avatar Jul 05 '25 00:07 oscarAct

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 avatar Jul 15 '25 16:07 brandyscarney

@brandyscarney any ETA on when this will be added?

moblizeit avatar Jul 20 '25 16:07 moblizeit

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

brandyscarney avatar Jul 23 '25 21:07 brandyscarney