How to cancel event bubbles from ion-segment

Ionic Framework Ionic Angular
1

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?

image
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>
2 Likes
2

Workaround: I added a large div to the bottom of the page which ensures that the overall height of the ion-content doesn’t end up less than 100vh. This seems to help prevent the automatic scroll to the top of the page. Preventing the scroll seems to prevent the event click bubble.

This was really weird, clicking the card components at the top of the page launch a modal. So when clicking the segment button below, it would scroll all the way up and launch a modal… far from the desired experience…

I would still like to know how to prevent the bubbling if that’s something the framework allows?

image
image786×1154 99.7 KB