Dialog unexpectedly renders overlay when it is actually closed

[pavelkornev]

Describe the bug
While having a Dialog component in closed state, if we trying to get a dom ref of the overlay, the overlay gets rendered (this is fine), but it also becomes unexpectedly visible with a closed dialog at the same time.

Isolated example
https://codesandbox.io/s/ui5-webcomponents-forked-r5wfq?file=/src/index.js
As it shown in this example, I try to get a staticAreaItemDomRef via public API:
https://github.com/SAP/ui5-webcomponents/blob/master/packages/base/src/UI5Element.js#L896-L901
In order to attach listener on the overlay to close Dialog component on click. It's unexpected that overlay is shown when dialog is actually closed.

Expected behavior
hidden attributed should not be removed from the overlay when getting its DOM reference.

Screenshots

Affected components

• Dialog

Organization: SAP Graph

Priority: Medium

[Martotko]

Hi @pavelkornev,

I've checked the example and it's not reproducible. The overlay is rendered with the "hidden" class when the dialog is in a closed state.

Please explain in details how to reproduce it.

Best regards,
Martin

[pavelkornev]

@Martotko in order to reproduce it, you need just open the provided link.

Once you open it — the grey transparent background is an overlay which should not be visible since dialog is not open.

Please also try to disable this code in src/index.js and compare rendering results of the page:

dialog.getStaticAreaItemDomRef().then((overlayRef) => {
  overlayRef.addEventListener("click", () => dialog.close());
});

[Martotko]

Hello @ui5-webcomponents-topic-rd, I am forwarding this issue to you, because the issue is caused by the following code:

dialog.getStaticAreaItemDomRef().then((overlayRef) => {
overlayRef.addEventListener("click", () => dialog.close());
});

The overlay is visible initially with this code in place and everything behind the dialog button is grey.

Best regards,
Martin