How to cancel event bubbles from ion-segment

I’ve got an ion-segment on a page. Clicking it does 2 unexpected things:

1. The page scrolls to the top
2. A button I have at the top of the page gets clicked

in my ionChange method I’ve added preventDefault, stopPropagation and return false to see if any of them will prevent this unexpected behavior:

segmentChanged(e) {
    e.preventDefault();
    e.stopPropagation();
    // do some filtering of a list
   return false;
}

Results are mixed. Desktop chrome seems fine. iOS device (iOS 14) occasionally still bubbles up. Android device always happens (Android 7). Mixed on android simulator pixel 3 API 29 (android 9) .

I’ve logged out what the event actually is and I see two properties bubbles: true and cancelBubble: false which I’m guessing I need to target but cannot find anything in the docs. I thought stopPropagation would have effected these. Is this CustomEvent and an Ionic thing? If so, how can I set bubbles: false and/or cancelBubble: true?

image1866×570 91.4 KB

Here’s my template code if it helps:

<ion-segment (ionChange)="segmentChanged($event)" [value]="segment">
      <ion-segment-button value="all">
        <ion-label>All </ion-label>
      </ion-segment-button>
      <ion-segment-button value="trade">
        <ion-label>Trade </ion-label>
      </ion-segment-button>
      <ion-segment-button value="exchange">
        <ion-label>Exchange </ion-label>
      </ion-segment-button>
    </ion-segment>

I’ve also tried directly handling the event in the template:

<ion-segment (ionChange)="segmentChanged($event); //WITH THIS => $event.stopPropagation()" 
    [value]="segment">
...
    </ion-segment>

1 post - 1 participant

Read full topic