bug: Consecutive Pages with Swipe-able Segments causes the pages after the first to bug out

[anjildhamalabriebug]

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

v7.x

Current Behavior

I am on Page One and have a Swipeable Segment setup. I can swipe or tap between the segments and my segment content correctly reflects my selection. Once I navigate to Page Two which also has Swipeable Segment, I can tab between the values but my segment content does not update to show the correct one.

Expected Behavior

All consecutive pages should be able to support their own implementation of swipe-able segments.

Steps to Reproduce

1. Create a page with Swipeable Segments and some content to distinguish between the segments
2. Create another page with similar setup but change the segment names and content values so it appears distinct from first page. (Edit: Keep the contentIds the same for both page's segment button and segment content)
3. Navigate from the first page to second and observe how the the second page's segment does not work correctly. If you refresh and stay on the page, the segments do work because Page One is no longer in the stack.

Code Reproduction URL

https://stackblitz.com/edit/s2qn88ad?file=src%2Fapp%2FexampleTwo.component.ts,src%2Fapp%2FexampleTwo.component.html,src%2Fapp%2Fapp.routes.ts,src%2Fapp%2Fexample.component.ts,src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fexample.component.html

Ionic Info

Ionic:

Ionic CLI : 7.2.0 (/Users/anjildhamala/.nvm/versions/node/v22.11.0/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/angular 8.5.7 @angular-devkit/build-angular : 19.2.12 @angular-devkit/schematics : 19.2.12 @angular/cli : 19.2.12 @ionic/angular-toolkit : 12.2.0

Capacitor:

Capacitor CLI : 7.2.0 @capacitor/android : 7.2.0 @capacitor/core : 7.2.0 @capacitor/ios : 7.2.0

Utility:

cordova-res : not installed globally native-run : 2.0.1

System:

NodeJS : v22.11.0 (/Users/anjildhamala/.nvm/versions/node/v22.11.0/bin/node) npm : 10.9.0 OS : macOS Unknown

Additional Information

No response

[anjildhamalabriebug]

I found a workaround in the meantime. I switched to different contentIds for the consecutive pages ion-segment-button+ion-segment-content compared to the first page.

[HappyKnuckles]

Your issue is expected behavior, as navigating in Angular does not automatically remove DOM elements with ids if the components aren’t destroyed. In HTML, ids must always be unique.

If you don’t follow that rule, you’ll run into issues like the one you described. So your 'workaround' isn’t really a workaround - it’s the correct and necessary way to implement your use-case.

As shown in the image, in your StackBlitz example, the segment-contents elements (with ids) from example-one are not destroyed upon navigation. Therefore, the DOM still contains those IDs, which leads to duplication problems.

EDIT: You can also check this with logging in ngOnDestroy that the component is not destroyed (lifecycle hook not called) on navigation.