ui5-input: mobile ui5-input is not scoped

[JarrettChan]

Bug Description

With scoping suffix applied and using mobile emulation, the ui5-input in the Input.Suggestions.responsivePopover is not converted to ui5-input-$suffix. regression: https://github.com/SAP/ui5-webcomponents/issues/4945

Expected Behavior

Scoping suffix should work for ui5-input in Suggestions.responsivePopover

Context

• UI5 Web Components version: 1.5.0
• OS/Platform: macOS
• Browser: Chrome 103.0.5060.134 (Official Build) (x86_64)
• Affected component: ui5-input (mobile)

Log Output / Stack Trace / Screenshots

ShellBarItem-2b4a8900.js:1236 Uncaught TypeError: Cannot read properties of null (reading 'querySelector')
    at GlobalSearchInputSupport.getInputDOMRefSync (ShellBarItem-2b4a8900.js:1236:99)
    at GlobalSearchInputSupport.onBeforeRendering (ShellBarItem-2b4a8900.js:798:29)
    at GlobalSearchInputSupport._render (Button-7d03b82d.js:989:12)
    at renderImmediately (bundle.esm.js:2247:16)
    at RenderQueue.process (bundle.esm.js:2057:7)
    at bundle.esm.js:2257:34

(GlobalSearchInputSupport extends Input)

Priority

• [x] Low
• [ ] Medium
• [ ] High
• [ ] Very High

Implemented workaround by adding ui5-input to our Suggestions.dependencies, needed to make a change anyways since I'm not using "InputSuggestions" feature and needed to add our Suggestions.dependencies.

Stakeholder Info (if applicable)

• Organization: SuccessFactors

[stbodurov]

Hi @SAP/ui5-webcomponents-topic-rl,

The scoping suffix for Input.Suggestions.responsivePopover is not being applied on mobile. This may be caused by a missing declaration in the dependencies array and the fix could possibly be something similar to https://github.com/SAP/ui5-webcomponents/pull/5553

You can use https://stackblitz.com/edit/js-m5vkk8 to test a scoped input. If StackBlitz is not loading properly, try using a browser different than Chrome.

Could you take a look?

Regards, Stanislav

[niyap]

Hello @JarrettChan,

Actually, I am not able to reproduce the reported issue. Please, check the sample in CodeSandbox: https://codesandbox.io/s/ui5-webcomponents-forked-13mu02?file=/src/index.js Here, when you open the sample on mobile, both the responsive popover and the ui5-input within it have the expected suffix. Could you please check whether the issue is still reproducible and if so, please describe it in more details and enhance the sample in a way that the issue could be reproduced?

Thank you in advance!

Kind Regards, Niya

[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.

[JarrettChan]

@niyap , My issue is not claiming that ui5-input does not apply scoping for ui5-input. My issue is with the following code where a component will additionally scope itself. https://github.com/SAP/ui5-webcomponents/blob/v1.7.1/packages/base/src/renderer/executeTemplate.js#L17-L32

I have extended the ui5-input and so when the component additionally scopes itself, that I am additionally scoping my component; not the ui5-input. The ui5-input is not in the list of dependencies inherited from the ui5-input.

I am requesting that the ui5-input be added to the ui5-input dependencies, rather than relying on the self-scoping fix.