[SegmentedButton]: `onSelectionChange` not called systematically

[ej612]

Describe the bug

Hi there,

I have a List of CustomListItems, and each list item contains a SegmentedButton. If I add a breakpoint to the segmented button's onSelectionChange function and click around on the buttons, that breakpoint is only hit sporadically, instead of everytime I click on one of the SegmentedButtonItems.

Maybe it's related to the buttons being in a list, I haven't been able to make out a pattern.

Thanks a lot in advance!

Isolated Example

https://stackblitz.com/edit/github-lwrflw?file=src%2FApp.tsx

Screenshots or Videos

video.mp4

UI5 Web Components for React Version

~1.29.0

UI5 Web Components Version

~1.24.0

Browser

Chrome

[Lukas742]

Hi @ej612

the SegmentedButtonItem doesn't support HTMLElements as children:

Note: Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.

To show a value-state icon inside each SegmentedButtonItem, please use the icon prop and apply the respective color via CSS.
This way the described problem doesn't occur for me anymore: https://stackblitz.com/edit/github-lwrflw-jvvzhd?file=src%2FApp.tsx
Does it solve the issue for you as well?

[ej612]

Hi @Lukas742,

Thanks a lot for looking into this for me, your solution works like a charm! Sorry for not reading the docs properly.