ui5-dialog: block layer blocks dialog in OpenUI5

[DonkeyCo]

Describe the bug When opening a ui5-dialog in OpenUI5 the block layer blocks the actual dialog. If you have controls inside of it, you can still navigate and interact with your keyboard, but you cannot target it with your mouse.

To reproduce Steps to reproduce the behavior:

1. Create a UI5 library, which implement a custom control for the dialog.
2. Import the library into the UI5 app.
3. Use custom control in view.
4. Write a controller, which opens the dialog.

Isolated example Code Sandbox Example

Expected behavior The dialog should be in front of the block layer and you should be able to interact with it by using your mouse.

Screenshots If applicable, add screenshots to help explain your problem. More Examples on imgur

Context

• UI5 Web Components version: 1.0.0-rc.8 (latest version)
• OS/Platform: Windows
• Browser (if relevant): {...}
• Other information:
  • UI5 version: 1.80.0 (latest)

Affected components (if known)

Log output / Any errors in the console no error messages

[ignipae]

Hi, I can confirm this as well. Basically, this happens as soon as the dialog is created from within the xml view. When creating the dialog within a javascript function, it works as expected.

[Smux]

We also found out that this issue occurs as well when you want to open a UI5 web component dialog while a SAPUI5 dialog is opened. The UI5 Web component dialog is opening but we are not able to focus it via cursor. We assume that the block layer of the SAPUI5 dialog is causing this issue. Note: This also happens when opening the UI5 Web component dialog via JS and not XML.

[lava12chenna]

Hi,

We also face the same issue, please let me know if anyone found resolution for it.

[MisherLiu]

I also face this issue, when this will be resolved?

[MisherLiu]

When this issue can be fixed?

[MisherLiu]

Hi Dev Team,

Using this Dialog component in React also has this blocker layer issue. Refer screenshot:

Could you update the status of this please?

[lucasheim]

Hi people, we had the same problem, this happens whenever the button you use to open the dialog is inside another component. By following these instructions of the documentation you should be able to fix this behavior: https://sap.github.io/ui5-webcomponents-react/?path=/docs/modals-popovers-dialog--default-story#using-dialogs-inside-other-components

[luizcarlospedrosogomes]

problem in dialog inside Page: https://codesandbox.io/s/charming-nobel-n9kvc

[luizcarlospedrosogomes]

resolved using createPortal

[cpf-hse]

Hello @ilhan007 we have this issue as well in one of our apps. I have made a simple reference app using latest openui5 version (1.117.0)

https://github.com/cpf-hse/openui5-wc-bugs/tree/WC-Dialog-Bug

Would be nice if this could get back on the roadmap.

Kind regards Christian

[tnurmi82]

We have an app using ui5-webcomponents and also ui5-webcomponents-react. This issue is happening with <MessageBox> React component as well.

I'm experimenting with a CSS workaround: ui5-static-area-item { display: none !important; } This seems to work for our app, but I'm not sure if there could be any unwanted consequences. Unfortunately no time to investigate further, so this will have to do for us, for now.

EDIT: Nope, not a good workaround as it breaks many other things. It appears that <MessageBox> and other components that utilize the "block layer" only work when used on top level of app. The issue happens when used by a child component deeper in app component tree.

[vladitasev]

Hello,

In version 2.0 we no longer use a static area / static area items, but rather the native browser Popover API, which solves all fundamental issues such as stacking context concurrency, the need to use portals, etc.

Therefore, closing this issue. Please let us know if you still need support

BR, Vladi