Skip to content

Commit 712aae4

Browse files
TeodorTaushanovTeodorTaushanov
authored
fix(ui5-popover): fix popover flickering (#10955)
* fix(ui5-popover): fix popover flickering
1 parent 427d2f2 commit 712aae4

File tree

3 files changed

+97
-2
lines changed

3 files changed

+97
-2
lines changed

Diff for: ‎packages/main/cypress/specs/Popover.cy.tsx

+53
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,59 @@ describe("Popover opener", () => {
6262
});
6363
cy.get("#btnClosePopover").realClick();
6464
});
65+
66+
it("tests calling _showOutsideViewport method", () => {
67+
cy.mount(
68+
<>
69+
<Button id="btnOpen">Open</Button>
70+
<Popover id="popover" opener="btnOpen">
71+
<Button id="btnClosePopover">Close</Button>
72+
</Popover>
73+
</>
74+
);
75+
76+
cy.get("#popover").then(el => {
77+
cy.spy<Popover>((el.get(0) as Popover), "_showOutsideViewport").as("showOutsideViewport");
78+
});
79+
80+
// act
81+
cy.get("#popover").invoke("prop", "open", "true");
82+
83+
cy.get("@showOutsideViewport")
84+
.should("have.been.calledOnce");
85+
});
86+
87+
it("tests calling _showOutsideViewport method, when popover is created dynamically", () => {
88+
cy.mount(
89+
<>
90+
<div id="container"></div>
91+
<Button id="btnOpen">Open</Button>
92+
</>
93+
);
94+
95+
cy.get("#container").then(container => {
96+
const popover = document.createElement("ui5-popover");
97+
98+
cy.spy<Popover>((popover as Popover), "_showOutsideViewport").as("showOutsideViewport");
99+
100+
popover.id = "popover";
101+
popover.headerText = "Popover Header";
102+
popover.opener = "btnOpen";
103+
popover.open = true;
104+
105+
const content = document.createElement("div");
106+
content.innerHTML = "<button id='popoverBtn'>button</button>";
107+
popover.appendChild(content);
108+
109+
container.get(0).appendChild(popover);
110+
});
111+
112+
cy.get("#popover")
113+
.should("be.visible");
114+
115+
cy.get("@showOutsideViewport")
116+
.should("have.been.calledOnce");
117+
});
65118
});
66119

67120
describe("Popover interaction", () => {

Diff for: ‎packages/main/src/Popup.ts

+1-2
Original file line numberDiff line numberDiff line change
@@ -304,15 +304,14 @@ abstract class Popup extends UI5Element {
304304
return;
305305
}
306306

307-
this._opened = true;
308-
309307
if (this.isModal) {
310308
Popup.blockPageScrolling(this);
311309
}
312310

313311
this._focusedElementBeforeOpen = getFocusedElement();
314312

315313
this._show();
314+
this._opened = true;
316315

317316
if (this.getDomRef()) {
318317
this._updateMediaRange();

Diff for: ‎packages/main/test/pages/PopoverDynamicCreation.html

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
7+
8+
<title>Popover Initially Open</title>
9+
10+
<script data-ui5-config type="application/json">
11+
{
12+
"language": "EN"
13+
}
14+
</script>
15+
<script src="%VITE_BUNDLE_PATH%" type="module"></script>
16+
<script>
17+
function init() {
18+
document.querySelector('[ui5-button]').addEventListener('click', (e) => {
19+
e.preventDefault();
20+
21+
const menu = document.createElement('ui5-menu');
22+
menu.setAttribute('header-text', 'Basic Menu with Items');
23+
const newFileItem = document.createElement('ui5-menu-item');
24+
newFileItem.setAttribute('text', 'New File');
25+
const newFolderItem = document.createElement('ui5-menu-item');
26+
newFolderItem.setAttribute('text', 'New Folder');
27+
menu.appendChild(newFileItem);
28+
menu.appendChild(newFolderItem);
29+
menu.addEventListener('close', () => {
30+
menu.parentNode.removeChild(menu);
31+
});
32+
document.body.appendChild(menu);
33+
34+
menu.opener = e.currentTarget.getDomRef();
35+
menu.open = true;
36+
});
37+
}
38+
</script>
39+
</head>
40+
<body onload="init()">
41+
<ui5-button style="float: right">Menu</ui5-button>
42+
</body>
43+
</html>

0 commit comments

Comments
 (0)