ManagedStyles on chrome mobile emulator throws error "Invalid runtime index supplied" on v1.120

[anna-yujeong]

Bug Description

When initializing Dialog/Icon, there is a console error "Invalid runtime index supplied"

This seems like caused by in updateStyle in ManagedStyles.ts the chrome mobile device emulator falls to the else block - where const styleRuntimeIndex = style.getAttribute("data-ui5-runtime-index") || undefined; returns "undefined" as literal string rather than type undefined. This then goes to shouldUpdate method and tries to parseInt, which returns NaN, where it is checked by compareRuntimes in Runtimes.js and eventually throw the error.

We don't see the console error on web settings (so without the emulator on) since it goes to the else if block const stylesheetTheme = stylesheet._ui5Theme; which returns undefined (not as string), which returns true on shouldUpdate

Web (non-Safari):

Mobile (chrome emulator) or Safari:

file: https://github.com/SAP/ui5-webcomponents/blob/v1.20.0/packages/base/src/ManagedStyles.ts

Affected Component

Dialog/Icon

Expected Behaviour

Should also handle the case where runtimeIndex in shouldUpdate in ManagedStyles comes in as literal string "undefined" Should not throw error

Steps to Reproduce

1. with the specified version, initialize Dialog/Icon
2. set "data-ui5-runtime-index" attribute to "undefined" or anything else that is not type integer or undefined
3. during initialization, in console there is error "Invalid runtime index supplied"

Log Output, Stack Trace or Screenshots

No response

Priority

High

UI5 Web Components Version

openui5 1.120.1, webcomponents 1.23.3

Browser

Chrome, Edge, Safari

Operating System

No response

Additional Context

No response

Organization

SAP Cloud

Declaration

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

[GerganaKremenska]

@anna-yujeong,

Could you please provide a link to an isolated example if possible by forking this stackblitz? And detailed steps to reproduce.

Best Regards, Gergana

[anna-yujeong]

hi @GerganaKremenska, thank you for the reply.

I find it hard to provide an isolated example with just defining components since it seems more of on the Runtime side, and to simulate this i will need access to define different runtimes. Could you please let me know if there is any way to do this? Or, would there be by any chance on your side to test shouldUpdate method in ManagedStyles.ts if it can handle a non-integer and not an undefined? The problem seems to me is that it tries to parseInt a string and throws an error.

I recently found this since we did a ui5 version upgrade from 1.14.0 to 1.23.3 last week, and I see there are differences in ManagedStyles.ts between those two versions.

https://github.com/SAP/ui5-webcomponents/blob/v1.14.0/packages/base/src/ManagedStyles.ts https://github.com/SAP/ui5-webcomponents/blob/v1.23.3/packages/base/src/ManagedStyles.ts

Thank you for your help,

Anna

[nnaydenow]

Hi @anna-yujeong,

I saw that you participate in SAP organization. Could you please provide more details offline so we can process issue?

[anna-yujeong]

Hi @nnaydenow , I sent a message on Teams. Please let me know if you didn't get the message, thank you.

[nnaydenow]

Hi @anna-yujeong,

As we discussed offline I'm waiting response from your side and until them I'm putting the issue in author action state.

[github-actions[bot]]

Hello, everyone! The issue has been inactive for 21 days. If there are still questions or comments, please feel free to continue the discussion. Inactive issues will be closed after 7 days!

[github-actions[bot]]

Hello, everyone! The issue has been inactive for 28 days, so I am closing the issue.