search

SAP / ui5-webcomponents

UI5 Web Components - the enterprise-flavored sugar on top of native APIs! Build SAP Fiori user interfaces with the technology of your choice.
https://sap.github.io/ui5-webcomponents/
Apache License 2.0
1.56k stars 267 forks source link

ui5-input: mobile ui5-input is not scoped #5575

Closed JarrettChan closed 2 years ago

JarrettChan commented 2 years ago

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

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

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)

stbodurov commented 2 years ago

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

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] commented 2 years ago

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] commented 2 years ago

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

JarrettChan commented 2 years ago

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