ui5-webcomponents icon indicating copy to clipboard operation
ui5-webcomponents copied to clipboard

Published 20 hours ago • verified publisher icon SAP

[Dialog, ResponsivePopover]: block-layer remains on top if second Dialog is being opened from inside the first Dialog

Open ilhan007 opened this issue 1 year ago • 1 comments

Bug Description

The block-layer displayed by a dialog remains on top of a second Dialog or ResponsivePopover popover on mobile, opened from inside the first Fialog.

Affected Component

Dialog, ResponsivePopover

Expected Behaviour

The ResponsivePopover the Dialog that are opened second should not be cover by the block layer.

Isolated Example

No response

Steps to Reproduce

  1. Checkout the release-1.24 branch (you probably need to clean it as it diverges too much, rm -rf node_modules, yarn, yarn clean, yarn build)

  2. Start the development server, open the test/Dialog.html and replace the body with this:

<body>

	<ui5-button id="dialogOpener">Open Dialog</ui5-button>
	<ui5-dialog id="dialog">
             <ui5-button id="dialogOpener2">Open ResponsivePopover</ui5-button>
 
             <ui5-dialog id="dialog2"  opener="popupOpener" header-text="Newsletter subscription">
 
                  <div className="popover-content">
                      Lorem ipsum
                  </div>
       
                  <div slot="footer" className="popover-footer">
                      <ui5-button id="closePopoverButton" design="Emphasized">Subscribe</ui5-button>
                  </div>
       
            </ui5-dialog>
      </ui5-dialog>

	<script>
            const dialogOpener = document.getElementById("dialogOpener");
            const dialogOpener2 = document.getElementById("dialogOpener2");
            const dialog = document.getElementById("dialog");
            const popover = document.getElementById("popover");
            
            dialogOpener2.addEventListener("click", () => {
	            dialog2.open = true;
            });
            dialogOpener.addEventListener("click", () => {
	            dialog.open = true;
            });
	</script>
</body>
  1. Open the first dialog
  2. Open the second dialog
  3. Observe the result ...

Log Output, Stack Trace or Screenshots

Screenshot 2024-06-27 at 16 08 05

Priority

None

UI5 Web Components Version

1.24 (release-1.24)

Browser

Chrome

Operating System

No response

Additional Context

No response

Organization

No response

Declaration

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

ilhan007 avatar Jun 27 '24 13:06 ilhan007

Hello @SAP/ui5-webcomponents-topic-rd could you see this issues the block layer visibility isn't handled. The issue seems familiar, it's possible that we have fixed it along the way. The good thing is that the issue is not reproducible with 2.0. But still, 1.24 is our 6months maintenance version and we need to fix this.

ilhan007 avatar Jun 27 '24 13:06 ilhan007

Nesting ui5-dialog inside other ui5-dialog was not feasible before the release of WebC version 2.0, which adopts the Popover API.

Dialogs and block layers z-indexes are correctly calculated in this case, but the second dialog is inside the first dialog, which has its own stacking context.

Here the dialog should be placed one after another:

<ui5-dialog id="dialog">
             <ui5-button id="dialogOpener2">Open ResponsivePopover</ui5-button>             
      </ui5-dialog>
<ui5-dialog id="dialog2"  opener="popupOpener" header-text="Newsletter subscription">
 
                  <div className="popover-content">
                      Lorem ipsum
                  </div>
       
                  <div slot="footer" className="popover-footer">
                      <ui5-button id="closePopoverButton" design="Emphasized">Subscribe</ui5-button>
                  </div>
       
            </ui5-dialog>

TeodorTaushanov avatar Jul 10 '24 12:07 TeodorTaushanov