Skip to content

fix(ui5-popover): render block layers in the correct order #12659

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
+270 −14
Open

fix(ui5-popover): render block layers in the correct order #12659

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e76d000
fix(ui5-popover): render block layers in the correct order
kskondov Nov 11, 2025
9f880ec
fix(ui5-popover): render block layers in the correct order
kskondov Nov 11, 2025
2f34f5c
Merge remote-tracking branch 'origin/main' into ui5-popover-block-layers
TeodorTaushanov Nov 11, 2025
598adbb
chore: handle opening and closing
TeodorTaushanov Nov 11, 2025
f7fd078
fix(ui5-popover): render block layers in the correct order
kskondov Nov 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions packages/base/src/css/OpenUI5PopupStyles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,9 @@
border: none;
overflow: visible;
margin: 0;
}

.sapUiBLy[popover] {
width: 100%;
height: 100%;
}
27 changes: 27 additions & 0 deletions packages/base/src/features/patchPopup.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,19 @@ const addOpenedPopup = (popupInfo: PopupInfo) => {
};

const removeOpenedPopup = (popup: object) => {
if (isNativePopoverOpen()) {
const prevPopup = AllOpenedPopupsRegistry.openedRegistry[AllOpenedPopupsRegistry.openedRegistry.length - 2];
if (prevPopup && prevPopup.type === "OpenUI5") {
const content = (prevPopup.instance as any).getContent().getDomRef() as HTMLElement;
const block = document.getElementById("sap-ui-blocklayer-popup");

content.hidePopover();

block?.showPopover();
content.showPopover();
}
}

const index = AllOpenedPopupsRegistry.openedRegistry.findIndex(el => el.instance === popup);
if (index > -1) {
AllOpenedPopupsRegistry.openedRegistry.splice(index, 1);
Expand Down Expand Up @@ -69,6 +82,12 @@ const hasWebComponentPopupAbove = (popup: object) => {
};

const openNativePopover = (domRef: HTMLElement) => {
const block = document.getElementById("sap-ui-blocklayer-popup");

block?.setAttribute("popover", "manual");
block?.hidePopover();
block?.showPopover();

domRef.setAttribute("popover", "manual");
domRef.showPopover();
};
Expand All @@ -78,6 +97,14 @@ const closeNativePopover = (domRef: HTMLElement) => {
domRef.hidePopover();
domRef.removeAttribute("popover");
}

const lastPopup = AllOpenedPopupsRegistry.openedRegistry[AllOpenedPopupsRegistry.openedRegistry.length - 1];
if (lastPopup.type === "OpenUI5") {
const block = document.getElementById("sap-ui-blocklayer-popup");
if (block && block.hasAttribute("popover")) {
block.hidePopover();
}
}
};

const isNativePopoverOpen = (root: Document | ShadowRoot = document): boolean => {
Expand Down
81 changes: 74 additions & 7 deletions packages/main/test/pages/DialogAndOpenUI5Dialog.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@
press: function () {
new Dialog("openUI5Dialog", {
title: "OpenUI5 Dialog",
draggable: true,
content: [
new HTML({
content:
Expand Down Expand Up @@ -112,7 +113,6 @@
}
}).placeAt("dialog1content");


ShortcutHintsMixin.addConfig(button, {
event: "press",
position: "0 0",
Expand All @@ -128,20 +128,31 @@
document.getElementById("popoverButtonNoFocus").addEventListener("click", function (event) {
openUI5Popover(event.target);
});

document.getElementById("someButton2").addEventListener("click", function () {
openUI5Dialog2();
});
document.getElementById("someButton3").addEventListener("click", function () {
openUI5Dialog3();
});
document.getElementById("someButton4").addEventListener("click", function () {
document.getElementById("newDialog4").open = true;
});
}

function openUI5Dialog() {
sap.ui.require(["sap/m/Button", "sap/m/Dialog"], (Button, Dialog) => {
new Dialog("openUI5DialogWithButtons", {
title: "OpenUI5 Dialog",
title: "UI5 Dialog 1",
draggable: true,
content: [
new Button({
text: "Focus stop"
}),
new Button("openUI5DialogButton", {
text: "Open WebC Dialog",
text: "Open UI5 Dialog 2",
press: function () {
document.getElementById("newDialog1").open = true;
openUI5Dialog2();
}
})
],
Expand All @@ -152,6 +163,52 @@
});
}

function openUI5Dialog2() {
sap.ui.require(["sap/m/Button", "sap/m/Dialog"], (Button, Dialog) => {
new Dialog("openUI5DialogWithButtons2", {
title: "UI5 Dialog 2",
draggable: true,
content: [
new Button({
text: "Focus stop"
}),
new Button("openUI5DialogButton2", {
text: "Open WebC Dialog 2",
press: function () {
document.getElementById("newDialog2").open = true;
}
})
],
afterClose: function () {
this.destroy();
}
}).open();
});
}

function openUI5Dialog3() {
sap.ui.require(["sap/m/Button", "sap/m/Dialog"], (Button, Dialog) => {
new Dialog("openUI5DialogWithButtons3", {
title: "UI5 Dialog 3",
draggable: true,
content: [
new Button({
text: "Focus stop"
}),
new Button("openUI5DialogButton22", {
text: "Open WebC Dialog 3",
press: function () {
document.getElementById("newDialog3").open = true;
}
})
],
afterClose: function () {
this.destroy();
}
}).open();
});
}

function openUI5Popover(opener) {
sap.ui.require(["sap/m/Popover", "sap/m/Button"], (Popover, Button) => {
new Popover("openUI5PopoverSecond", {
Expand Down Expand Up @@ -189,7 +246,7 @@
<div id="buttonP">
<ui5-button id="myButton">Open WebC Dialog</ui5-button>
</div>
<ui5-dialog id="dialog1" header-text="This is an WebC Dialog 1">
<ui5-dialog id="dialog1" draggable header-text="This is an WebC Dialog 1">
<div id="dialog1content"></div>
<br >
Web Components:
Expand All @@ -211,8 +268,18 @@
<ui5-button id="dialogButton">Open UI5 dialog</ui5-button>
<ui5-button id="popoverButtonNoFocus">Open UI5 Popover No Initial Focus</ui5-button>
</ui5-dialog>
<ui5-dialog id="newDialog1" header-text="This is an WebC Dialog 2">
<ui5-button id="someButton">Some button</ui5-button>
<ui5-dialog id="newDialog1" draggable header-text="This is an WebC Dialog 2">
Copy link

@Stoev Stoev Nov 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<ui5-dialog id="newDialog1" draggable header-text="This is an WebC Dialog 2">
<ui5-dialog id="newDialog1" draggable header-text="This is a Web Component Dialog 2">

<ui5-button id="someButton2">Some button 1</ui5-button>
</ui5-dialog>
<ui5-dialog id="newDialog2" draggable header-text="This is an WebC Dialog 3">
Copy link

@Stoev Stoev Nov 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same as above, if appropriate, please change all entries "an WebC" to "a Web Component".

<ui5-button id="someButton3">Open UI5 Dialog</ui5-button>
</ui5-dialog>
<ui5-dialog id="newDialog3" draggable header-text="This is an WebC Dialog 3">
<ui5-button id="someButton4">Some button 3</ui5-button>
</ui5-dialog>

<ui5-dialog id="newDialog4" draggable header-text="This is an WebC Dialog 4">
<ui5-button id="someButton5">Some button 3</ui5-button>
</ui5-dialog>
<div id="content"></div>
<ui5-responsive-popover id="respPopover"
Expand Down
Loading