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.47k stars 254 forks source link

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

Open ilhan007 opened 6 days ago

ilhan007 commented 6 days ago

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

ilhan007 commented 6 days ago

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.