Skip to content

fix(popups): if the popup starts open, the entire state is applied #11502

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 17 commits into
base: main
Choose a base branch
from
Open

fix(popups): if the popup starts open, the entire state is applied #11502

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
ada3d47
chore(popups): test opening only after rendering
TeodorTaushanov May 12, 2025
f4cf2f5
Merge remote-tracking branch 'origin/main' into popup_initial_focus
TeodorTaushanov May 13, 2025
981441b
chore(popups): check closing, add sample and tests
TeodorTaushanov May 13, 2025
6295b59
chore(popups): fix hidePopover
TeodorTaushanov May 13, 2025
f5ad853
Merge remote-tracking branch 'origin/main' into popup_initial_focus
TeodorTaushanov May 29, 2025
8e4b40b
fix: check for attribute
TeodorTaushanov May 29, 2025
54f0340
chore: add comments
TeodorTaushanov May 29, 2025
1f6b316
Merge remote-tracking branch 'origin/main' into popup_initial_focus
TeodorTaushanov May 29, 2025
86518bf
Merge remote-tracking branch 'origin/main' into popup_initial_focus
TeodorTaushanov May 30, 2025
a801eca
Merge remote-tracking branch 'origin/main' into popup_initial_focus
TeodorTaushanov May 30, 2025
0dc8fca
Merge remote-tracking branch 'origin/main' into popup_initial_focus
TeodorTaushanov Jun 4, 2025
9370594
fix: check if the Popup is added to the document
TeodorTaushanov Jun 4, 2025
077a61a
Merge remote-tracking branch 'origin/main' into popup_initial_focus
TeodorTaushanov Jun 4, 2025
f825b4b
Merge remote-tracking branch 'origin/main' into popup_initial_focus
TeodorTaushanov Jun 5, 2025
05cbdd8
Merge remote-tracking branch 'origin/main' into popup_initial_focus
TeodorTaushanov Jun 6, 2025
a790df8
Merge remote-tracking branch 'origin/main' into popup_initial_focus
TeodorTaushanov Jun 9, 2025
3217f33
fix: add isEnteredInDom property
TeodorTaushanov Jun 9, 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
43 changes: 43 additions & 0 deletions packages/main/cypress/specs/Dialog.cy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -280,3 +280,46 @@ describe("Events", () => {
.should("not.be.visible");
});
});

describe("Initially Open", () => {
it("initial focus", () => {
cy.mount(
<>
<Dialog id="dialogId"
headerText="Dialog Header"
open>
<div>
<input id="innerInput" />
</div>
</Dialog>
</>
);

cy.get("#dialogId")
.should("be.visible");

cy.get("#innerInput")
.should("be.focused");
});

it("initial focus prevented", () => {
cy.mount(
<>
<Dialog id="dialogId"
headerText="Dialog Header"
open
preventInitialFocus>
<div>
<input id="innerInput" />
</div>
</Dialog>
</>
);

cy.get("#dialogId")
.should("be.visible");

cy.get("#innerInput")
.should("not.be.focused");
});
});
6 changes: 5 additions & 1 deletion packages/main/src/Popup.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -252,6 +252,7 @@ abstract class Popup extends UI5Element {
_focusedElementBeforeOpen?: HTMLElement | null;
_opened = false;
_open = false;
isEnteredInDom = false;

constructor() {
super();
Expand Down Expand Up @@ -282,6 +283,7 @@ abstract class Popup extends UI5Element {
}

this.tabIndex = -1;
this.isEnteredInDom = true;

if (this.open) {
this.showPopover();
Expand All @@ -297,6 +299,8 @@ abstract class Popup extends UI5Element {
this._removeOpenedPopup();
}

this.isEnteredInDom = false;

ResizeHandler.deregister(this, this._resizeHandler);
deregisterUI5Element(this);
}
Expand Down Expand Up @@ -327,7 +331,7 @@ abstract class Popup extends UI5Element {
}

async openPopup() {
if (this._opened) {
if (!this.isEnteredInDom || this._opened) {
return;
}

Expand Down
40 changes: 40 additions & 0 deletions packages/main/test/pages/DialogInitiallyOpenPreventFocus.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

<title>Dialog</title>

<script data-ui5-config type="application/json">
{
"language": "EN"
}
</script>

<script>
// delete Document.prototype.adoptedStyleSheets
</script>


<script src="%VITE_BUNDLE_PATH%" type="module"></script>
<script>
function init() {
document.body.insertAdjacentHTML("beforeend",
`<ui5-dialog id="dialogOpen"
header-text="Dialog Header"
open
prevent-initial-focus>
<div>
<input>
</div>
</ui5-dialog>`);
}
</script>
</head>

<body onload="init()">
</body>

</html>
Loading