bug: segment does not set active button when dynamically changing options in angular

[jakobe]

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

When updating the nested segment buttons of the Segment control the active segment button looses it's checked state even when the value matches the value of the containing Segment control. The issue is similar to #28816 but for segment-button, i.e. the value changes after connectedCallback is fired but before any Stencil Watchers are configured. As a result, the value property watcher does not fire which causes updateState not to be called. The fix in #28837 only fixes the problem on initial rendering, but not on subsequent updates to the nested segment buttons.

Expected Behavior

The active segment button should be highlighted when it's value matches the value of it's containing segment control - as was the case before standalone components.

Steps to Reproduce

1. Go to https://stackblitz.com/edit/angular-elmzeu
2. See the segment button "First" being highlighted
3. Wait 2 seconds
4. See the segment button "First" NOT being highlighted even though it's value matches the Segment control's value

Code Reproduction URL

https://stackblitz.com/edit/angular-elmzeu

Ionic Info

Ionic:

Ionic CLI : 5.4.16

Utility:

cordova-res : not installed native-run (update available: 2.0.1) : 1.7.4

System:

NodeJS : v20.11.0 npm : 10.2.4 OS : macOS Unknown

Additional Information

In the Stackblitz reproduction example the nested segment buttons are updated with an additional button, but keeping same value for the first 2 buttons - the problem is the same though when rendering nested buttons each with a new value while updating the value of the Segment control at the same time to match one of the newly rendered buttons.

[sean-perkins]

Thank you for this issue!

I was able to confirm this issue does not reproduce in the isolated web components, but occurs when consumed in Angular.

We might be able to use onSlotchange here in ion-segment to handle the "value change" (items changing) behavior.

[sean-perkins]

Here is a dev-build: 8.0.2-dev.11714411675.10f48160 if you would like to test and report any unexpected behaviors.

Thanks!

[mariusbolik]

This Bug also appears on ion-radio-group and maybe on other components like accordion. Hier is the code to reproduce: https://stackblitz.com/edit/angular-vquurr-ec7ark?file=src%2Fapp%2Fexample.component.html

[jakobe]

@sean-perkins Great! And thanks for the quick reply ⚡

I can confirm this fix works in my scenario as well 👌🏻

I've updated the Stackblitz reproduction example: https://stackblitz.com/edit/angular-elmzeu