[ComboBox]: Page is breaking in mobile Web-view

[lateefsofi]

Bug Description

One of our page is used in mobile web-view which is breaking right now. This is happening with mobile OS API below 35.
First we saw error:
"Uncaught (in promise) SyntaxError: Failed to execute 'matches' on 'Element': ':dir(rtl)' is not a valid selector.",
For this we followed shoelace-style/shoelace#2188 work around. It fixed above error but now we see another error which prevents rendering of component:
"Uncaught (in promise) TypeError: this.showPopover is not a function", source:
As per mobile team, it is a golive blocker for b2505.

Affected Component

ComboBox

Expected Behaviour

Components should be rendered properly

Isolated Example

https://sap.github.io/ui5-webcomponents-react/v2/?path=/docs/inputs-combobox--docs

Steps to Reproduce

1. Navigate to https://sap.github.io/ui5-webcomponents-react/v2/?path=/docs/inputs-combobox--docs
2. and open it in Android device with mobile OS API below 35

Log Output, Stack Trace or Screenshots

No response

Priority

None

UI5 Web Components Version

2.3.o

Browser

Chrome

Operating System

No response

Additional Context

No response

Organization

Successfactors

Declaration

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

[s-todorova]

Hi @lateefsofi,

Could you please give more details about the enviroment in which you are experiencing this problem?
What version is the Chrome you are using? Web Components support the latest two stable releases of browsers.

I tested on a real Google Pixel device (Android 8.1.0, which according to https://apilevels.com/ is mobile OS API below 35) with Chrome latest version 134.0.6998.108 and I could not reproduce the issue - the page loads correctly and components are rendered as normal. I only experienced a problem with the page loading before updating Chrome, so please check that you are testing on a supported browser version.

Best regards,
Siyana

[taoisabella]

Hi, @lateefsofi @s-todorova
The version of Chrome we are using in Android 10 is Chrome/111.0.5563.116 - the page is blank. It'a very tricky thing to guide users to upgrade the webview the Android project using. It's not as simple as to upgrade Chrome APP.

[ilhan007]

Hello @lateefsofi @taoisabella
this was already followed-up offline via internal channels, but also adding some response here for transparency

The popover API (showPopover()) that all ui5 webcomponents popups are based since v 2,
was introduced in Chrome 114 (source).

This means:

• Minimum Chrome version required: 114
• Minimum WebView version required: 114

For Android OS >7, you can update/ suggest updating to a newer Chrome/WebView versions.
Unfortunately, there is not polyfill for the Popover API to workaround this, so updating is what needs to be done
and I hope this works for you.

BR,
ilhan

[github-actions]

This issue has been closed. To reopen, just leave a comment!