search

SAP / ui5-webcomponents-react

A wrapper implementation for React of the UI5 Web Components that are compliant with the SAP Fiori User Experience
https://sap.github.io/ui5-webcomponents-react/
Apache License 2.0
426 stars 94 forks source link

[SegmentedButton]: `onSelectionChange` not called systematically #5915

Closed ej612 closed 2 weeks ago

ej612 commented 3 weeks ago

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

https://github.com/SAP/ui5-webcomponents-react/assets/110408767/7c0c973d-200c-4acc-a2b9-57c1f039f330

UI5 Web Components for React Version

~1.29.0

UI5 Web Components Version

~1.24.0

Browser

Chrome

Lukas742 commented 2 weeks ago

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 commented 2 weeks ago

Hi @Lukas742,

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