diff --git a/packages/main/cypress/specs/Toast.cy.ts b/packages/main/cypress/specs/Toast.cy.ts
new file mode 100644
index 000000000000..f38efd1763ef
--- /dev/null
+++ b/packages/main/cypress/specs/Toast.cy.ts
@@ -0,0 +1,43 @@
+import { html } from "lit";
+import "../../src/Toast.js";
+import "../../src/Button.js";
+import "../../src/List.js";
+import type Toast from "../../src/Toast.js";
+
+describe("Toast - test popover API", () => {
+ it("Should verify the toast has the popover attribute set to manual", () => {
+ cy.mount(html`
+ TopStart`);
+ cy.get("[ui5-toast]")
+ .should("have.attr", "popover", "manual")
+ .should("be.visible");
+ });
+
+ it("Toast should stay on top of list after scroll", () => {
+ cy.mount(html`
+ TopStart
+
+ List Item 1
+ List Item 2
+ List Item 3
+ `);
+
+ cy.get("[ui5-toast]")
+ .should("have.attr", "popover", "manual")
+ .should("be.visible");
+
+ cy.get("#toast")
+ .then($toast => {
+ const toastRect = $toast[0].getBoundingClientRect();
+ cy.get("#list")
+ .then($list => {
+ const listRect = $list[0].getBoundingClientRect();
+ const isOverlapping = toastRect.right > listRect.left
+ && toastRect.left < listRect.right
+ && toastRect.bottom > listRect.top
+ && toastRect.top < listRect.bottom;
+ expect(isOverlapping).to.be.true;
+ });
+ });
+ });
+});
diff --git a/packages/main/src/Toast.ts b/packages/main/src/Toast.ts
index d7424cf5042f..1deadbfec3ab 100644
--- a/packages/main/src/Toast.ts
+++ b/packages/main/src/Toast.ts
@@ -187,6 +187,15 @@ class Toast extends UI5Element {
}
}
+ onAfterRendering() {
+ if (!this.hasAttribute("popover")) {
+ this.setAttribute("popover", "manual");
+ }
+ if (this.open) {
+ this.showPopover();
+ }
+ }
+
_onfocusin() {
if (this.focusable) {
this.focused = true;
@@ -214,6 +223,7 @@ class Toast extends UI5Element {
this.focusable = false;
this.focused = false;
this.fireDecoratorEvent("close");
+ this.hidePopover();
}
_onmouseover() {
diff --git a/packages/main/src/themes/Toast.css b/packages/main/src/themes/Toast.css
index 4117ac441102..9079e4993984 100644
--- a/packages/main/src/themes/Toast.css
+++ b/packages/main/src/themes/Toast.css
@@ -17,6 +17,9 @@
text-overflow: ellipsis;
white-space: pre-line;
padding: 1rem;
+ inset: unset;
+ margin: 0;
+ border: none;
}
.ui5-toast-root {