[ui5-segmented-button | Angular 15.2.9]: Segmented button breaks when using ngFor and ngIf directives

[ixiler]

Bug Description

When trying to use ui5-segmented-button with ngIf directive and the ui5-segmented-button-items are generated with an ngFor directive then the ui5-segmented-button breaks and doesn't get visualised

Additionally you can observe similar behaviour for the basic cases if you modify the html template and before refreshing the page all the segmented buttons in the example are broken.

Affected Component

ui5-segmented-button

Expected Behaviour

The ui5-segmented-button to be visualised and behave as expected

Isolated Example

https://stackblitz.com/edit/angular-ivy-xnrlql?file=src%2Fapp%2Fapp.component.html

Steps to Reproduce

1. Open the example
2. Observa that the 2 basic cases are visualised (refresh the page if they are not)
3. Click the button to visualise the case that breaks
4. Observe that the third segmented button doesn't get visualised and throws an error in the console

Log Output, Stack Trace or Screenshots

Unhandled Promise rejection:
Cannot set properties of undefined (setting 'pressed')
; Zone:
<root>
; Task:
Promise.then
; Value:
Error: Cannot set properties of undefined (setting 'pressed')
TypeError: Cannot set properties of undefined (setting 'pressed')
at SegmentedButton._applySingleSelection (https://angular-ivy-xnrlql.stackblitz.io/turbo_modules/@ui5/[email protected]/dist/SegmentedButton.js:119:22)
at SegmentedButton.normalizeSelection (https://angular-ivy-xnrlql.stackblitz.io/turbo_modules/@ui5/[email protected]/dist/SegmentedButton.js:86:22)
at SegmentedButton.onBeforeRendering (https://angular-ivy-xnrlql.stackblitz.io/turbo_modules/@ui5/[email protected]/dist/SegmentedButton.js:74:14)
at SegmentedButton._render (https://angular-ivy-xnrlql.stackblitz.io/turbo_modules/@ui5/[email protected]/dist/UI5Element.js:548:14)
at renderImmediately (https://angular-ivy-xnrlql.stackblitz.io/turbo_modules/@ui5/[email protected]/dist/Render.js:36:18)
at SegmentedButton.eval (https://angular-ivy-xnrlql.stackblitz.io/turbo_modules/@ui5/[email protected]/dist/UI5Element.js:122:47)
at Generator.next (<anonymous>)
at fulfilled (https://angular-ivy-xnrlql.stackblitz.io/turbo_modules/[email protected]/tslib.js:166:62)
at _ZoneDelegate.invoke (https://angular-ivy-xnrlql.stackblitz.io/turbo_modules/[email protected]/dist/zone.js:409:30)
at Zone.run (https://angular-ivy-xnrlql.stackblitz.io/turbo_modules/[email protected]/dist/zone.js:169:47)

Priority

High

UI5 Web Components Version

1.15.1

Browser

Chrome

Operating System

OSX

Additional Context

No response

Organization

SAP Automation Pilot

Declaration

• [X] I’m not disclosing any internal or sensitive information.

[s-todorova]

Hello colleagues,

I was able to reproduce the issue described above via the provided example both on Windows and MacOS (tested on SauceLabs). When the ui5-segmented-button is created with a ngIf directive and its items with ngFor, the resulting segmented button gets rendered, but throws the given error in the console.

Could you please take a look at this? Thanks in advance!

Best regards, Siyana

[ilhan007]

tagging in case it's not seen by the team - @SAP/ui5-webcomponents-topic-b

[JeeOpp]

faced with this issue too 1.18.0 still isn't fixed

but I can hadle it by adding the property: mode="MultiSelect"

[hinzzx]

Hi @ixiler,

I started to investigate the issue and created a new local Angular App (v17.3) using latest ui5-webcomponents version (v1.24.0) and am not able to reproduce the console error.

I uploaded the sample here as well.

Could you please check if updating the versions would work for you ?

Best Regards, Stoyan

[ixiler]

Hi @hinzzx,

The issue seems to be fixed in the reproduction. If we face further issues when we reintroduce it in our app I will link the new ticket to this one.

Thank you! Teodor