Dialog: Is covered in the block layer and is unusable

[jannislmml]

Describe the bug

If you open a dialog, it is also covered by the block layer and you can no longer interact with it. I open the dialog via the onClick event of a button. Attached is a screenshot on which the problem can also be seen visually.

Please fix this ASAP. Thanks.

Isolated Example

No response

Reproduction steps

1. Open a Dialog via Button
2. Try to interact with it

Expected Behaviour

No response

Screenshots or Videos

UI5 Web Components for React Version

1.22.2

UI5 Web Components Version

1.19.0

Browser

Chrome

Operating System

Windows 10

Additional Context

No response

Relevant log output

No response

Declaration

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

[Lukas742]

Hi @jannislmml

please add a reproducible example, preferably by using this codeSandbox template.

[jannislmml]

Hi @Lukas742

I have tried to reproduce my problem in the following CodeSandbox example. However, the problem does not exist here, the modal is displayed correctly and you can make interactions.

In my case, the problem exists in development and also production mode on a test computer installed in the IIS.

codeSandbox

[jannislmml]

@Lukas742

I have the ui5 packages of the following versions ... "@ui5/webcomponents": "~1.19.0", "@ui5/webcomponents-fiori": "~1.19.0", "@ui5/webcomponents-icons": "~1.19.0", "@ui5/webcomponents-icons-business-suite": "^1.19.0", "@ui5/webcomponents-react": "^1.22.2", "@ui5/webcomponents-react-charts": "^1.22.1",

... downgraded to the following versions ... "@ui5/webcomponents": "~1.17.0", "@ui5/webcomponents-fiori": "~1.17.0", "@ui5/webcomponents-icons": "~1.17.0", "@ui5/webcomponents-icons-business-suite": "^1.17.0", "@ui5/webcomponents-react": "^1.19.0", "@ui5/webcomponents-react-charts": "^1.19.0",

... and now the dialog works again as it should.

[Lukas742]

Since the Dialog is a web component developed by the ui5-webcomponents team, I can't tell if there were changes in between the versions you provided, but atleast there are no changes noted in their change log.

Are you mounting the Dialog inside another component without using createPortal? (More about this here) If not, I will transfer this issue to our colleagues at ui5-webcomponents as they will be able to help you better.

[jannislmml]

I use the dialog as I have included it in the codebox sample, i.e. without createPortal.

[Lukas742]

Ok, then I'll transfer this issue to the ui5-webcomponents repo so our colleagues there can assist further.

[ilhan007]

Hello @jannislmml not sure how to make progress without reproducible environment. Are you a SAP internal, can you contact us via the internal channels. Or, can we setup your project to investigate futher?

[pixel-fabian]

Hi,

we used to have a similar problem when using the ui5-dialog within Vue.js components and needed vue teleport. Maybe you could add a hint to ui5-webcomponents info for vue?

[MFel0123]

Hello colleagues, we can confirm that we have the same problem in an angular environment. With 1.18.0 our ui5-dialog is working fine. The background is inactive (using the class ui5-block-layer). With the new ui5-webcomponents version 1.20.1 this is not working anymore: the background is inactive but the ui5-dialog as well. So it seems to be a central problem in ui5 web components.

Best Regards

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

[MFel0123]

Hello colleagues, this issue is not solved. Please proceed working on it.

Kind Regards

[jannislmml]

This issue isnt fixed in version 1.22.0. Please proceed working on it.

[Andrei-Zaharescu]

This issue persists in version 1.23.1.

[Andrei-Zaharescu]

Hi @ilhan007 - I've seen you reopened the ticket and therefore I sent you an invite the repo so that you can easily reproduce it. Maybe it helps.

Steps: From the side navigation, under Inventory choose Materials and click on Advanced filters button (top right).

[nnaydenow]

Hi @Andrei-Zaharescu,

Is it possible to provide public isolated example since someone else might process the issue and it will be hard if we have to contact or ask permission for every processor. Thanks in advance.

[Andrei-Zaharescu]

Hi @nnaydenow,

I have created an example as requested: https://stackblitz.com/edit/stackblitz-starters-phmjcj?file=src%2Fapp%2Fside-navigation%2Fside-navigation.component.scss

Yet, while I was working on the simplified version I bumped into the root cause. It looks like it was related to some custom CSS. I use Fiori side navigation (https://sap.github.io/ui5-webcomponents/playground/?path=/story/fiori-side-navigation--tool-layout) and in the tool-layout CSS class I've added a property that caused this behaviour.

I'm not a frontend expert so I let you guys to decide if this should still be open or not.

Thank you.

[nnaydenow]

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

The issue author provided example where the issue is reproducible. Could you please take a look again?

[TeodorTaushanov]

Hi @Andrei-Zaharescu,

In your app, you can define the dialog outside the div with position: fixed style:

<div class="tool-layout"> 
</div>
<app-value-help-dialog
[dialogId]="'helperDialog1'"
[helperInputId]="'helperInputId'"
[helperInputPlaceholder]="'helperInputPlaceholder'"
[helperSearchInputId]="'helperSearchInputId'"
[title]="'Title'"
[definitionModel]="hlp"
>
</app-value-help-dialog>

There are some CSS limitations placing the dialog on top of everything. We're currently adopting the new Popover API, which will solve these issues.

Best, Teo

[Andrei-Zaharescu]

Hi @TeodorTaushanov,

Thanks for the updates. Well, I can't do that as the tool-layout contains like everything. The position: fixed was used to remove that annoying scroll bounce but I've found another way.