Skip to content

Commit 2c97806

Browse files
dimovpetardimovpetar
authored
fix(ui5-dialog): initial dimensions are now calculated at once (#12108)
1 parent 54ec21a commit 2c97806

File tree

3 files changed

+163
-1
lines changed

3 files changed

+163
-1
lines changed

‎packages/main/cypress/specs/Dialog.cy.tsx‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import "@ui5/webcomponents-base/dist/features/F6Navigation.js";
2+
import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
23
import Dialog from "../../src/Dialog.js";
34
import Label from "../../src/Label.js";
45
import Title from "../../src/Title.js";
@@ -379,6 +380,32 @@ describe("Dialog general interaction", () => {
379380
.should("not.be.visible");
380381
});
381382

383+
it("dialog ResizeHandler registration", () => {
384+
cy.spy(ResizeHandler, "register").as("registerResizeSpy");
385+
386+
cy.mount(
387+
<>
388+
<Dialog id="dialog">
389+
<div>Content</div>
390+
</Dialog>
391+
</>
392+
);
393+
394+
cy.get<Dialog>("#dialog")
395+
.should((dialog => {
396+
expect(dialog.get(0).getDomRef()).to.exist;
397+
}));
398+
399+
cy.get("@registerResizeSpy")
400+
.should("not.be.called");
401+
402+
cy.get("#dialog")
403+
.invoke("attr", "open", true);
404+
405+
cy.get("@registerResizeSpy")
406+
.should("be.calledOnce");
407+
});
408+
382409

383410
it("dialog repositions after screen resize", () => {
384411
cy.mount(

‎packages/main/src/Popup.ts‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -252,6 +252,7 @@ abstract class Popup extends UI5Element {
252252
_focusedElementBeforeOpen?: HTMLElement | null;
253253
_opened = false;
254254
_open = false;
255+
_resizeHandlerRegistered = false;
255256

256257
constructor() {
257258
super();
@@ -272,11 +273,17 @@ abstract class Popup extends UI5Element {
272273
renderFinished().then(() => {
273274
this._updateMediaRange();
274275
});
276+
277+
if (this.open) {
278+
this._registerResizeHandler();
279+
} else {
280+
this._deregisterResizeHandler();
281+
}
275282
}
276283

277284
onEnterDOM() {
278285
this.setAttribute("popover", "manual");
279-
ResizeHandler.register(this, this._resizeHandler);
286+
280287
if (isDesktop()) {
281288
this.setAttribute("desktop", "");
282289
}
@@ -603,6 +610,20 @@ abstract class Popup extends UI5Element {
603610
}
604611
}
605612

613+
_registerResizeHandler() {
614+
if (!this._resizeHandlerRegistered) {
615+
ResizeHandler.register(this, this._resizeHandler);
616+
this._resizeHandlerRegistered = true;
617+
}
618+
}
619+
620+
_deregisterResizeHandler() {
621+
if (this._resizeHandlerRegistered) {
622+
ResizeHandler.deregister(this, this._resizeHandler);
623+
this._resizeHandlerRegistered = false;
624+
}
625+
}
626+
606627
/**
607628
* Sets "none" display to the popup
608629
* @protected

‎packages/main/test/pages/Dialog.html‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,9 @@
8383
<br>
8484
<br>
8585
<ui5-button id="multiple-show">Open dialog calling ".open = true" multiple times</ui5-button>
86+
<br>
87+
<br>
88+
<ui5-button id="open-big-content">Open dialog with big content</ui5-button>
8689
</div>
8790
<ui5-block-layer></ui5-block-layer>
8891

@@ -719,6 +722,113 @@
719722
<ui5-button id="scrolledBtn" class="scrolledBtn">open</ui5-button>
720723
</div>
721724

725+
<ui5-dialog id="dlgBigContent" header-text="Register Form">
726+
<section class="login-form">
727+
<div>
728+
<ui5-label for="username" required show-colon>Username</ui5-label>
729+
<ui5-input id="username"></ui5-input>
730+
</div>
731+
<div>
732+
<ui5-label for="password" required show-colon>Password</ui5-label>
733+
<ui5-input id="password" type="Password" value-state="Negative"></ui5-input>
734+
</div>
735+
<div>
736+
<ui5-label for="email" type="Email" required show-colon>Email</ui5-label>
737+
<ui5-input id="email"></ui5-input>
738+
</div>
739+
<div>
740+
<ui5-label for="address" show-colon>Address</ui5-label>
741+
<ui5-input id="address"></ui5-input>
742+
</div>
743+
<ui5-input></ui5-input>
744+
<ui5-button>Button</ui5-button>
745+
<ui5-input></ui5-input>
746+
<ui5-button>Button</ui5-button>
747+
<ui5-input></ui5-input>
748+
<ui5-button>Button</ui5-button>
749+
<ui5-input></ui5-input>
750+
<ui5-button>Button</ui5-button>
751+
<ui5-input></ui5-input>
752+
<ui5-button>Button</ui5-button>
753+
<ui5-input></ui5-input>
754+
<ui5-button>Button</ui5-button>
755+
<ui5-input></ui5-input>
756+
<ui5-button>Button</ui5-button>
757+
<ui5-input></ui5-input>
758+
<ui5-button>Button</ui5-button>
759+
<ui5-input></ui5-input>
760+
<ui5-button>Button</ui5-button>
761+
<ui5-input></ui5-input>
762+
<ui5-button>Button</ui5-button>
763+
<ui5-input></ui5-input>
764+
<ui5-button>Button</ui5-button>
765+
<ui5-input></ui5-input>
766+
<ui5-button>Button</ui5-button>
767+
<ui5-input></ui5-input>
768+
<ui5-button>Button</ui5-button>
769+
<ui5-input></ui5-input>
770+
<ui5-button>Button</ui5-button>
771+
<ui5-input></ui5-input>
772+
<ui5-button>Button</ui5-button>
773+
<ui5-input></ui5-input>
774+
<ui5-button>Button</ui5-button>
775+
<ui5-input></ui5-input>
776+
<ui5-button>Button</ui5-button>
777+
<ui5-input></ui5-input>
778+
<ui5-button>Button</ui5-button>
779+
<ui5-input></ui5-input>
780+
<ui5-button>Button</ui5-button>
781+
<ui5-input></ui5-input>
782+
<ui5-button>Button</ui5-button>
783+
<ui5-input></ui5-input>
784+
<ui5-button>Button</ui5-button>
785+
<ui5-input></ui5-input>
786+
<ui5-button>Button</ui5-button>
787+
<ui5-input></ui5-input>
788+
<ui5-button>Button</ui5-button>
789+
<ui5-input></ui5-input>
790+
<ui5-button>Button</ui5-button>
791+
<ui5-input></ui5-input>
792+
<ui5-button>Button</ui5-button>
793+
<ui5-input></ui5-input>
794+
<ui5-button>Button</ui5-button>
795+
<ui5-input></ui5-input>
796+
<ui5-button>Button</ui5-button>
797+
<ui5-input></ui5-input>
798+
<ui5-button>Button</ui5-button>
799+
<ui5-input></ui5-input>
800+
<ui5-button>Button</ui5-button>
801+
<ui5-input></ui5-input>
802+
<ui5-button>Button</ui5-button>
803+
<ui5-input></ui5-input>
804+
<ui5-button>Button</ui5-button>
805+
<ui5-input></ui5-input>
806+
<ui5-button>Button</ui5-button>
807+
<ui5-input></ui5-input>
808+
<ui5-button>Button</ui5-button>
809+
<ui5-input></ui5-input>
810+
<ui5-button>Button</ui5-button>
811+
<ui5-input></ui5-input>
812+
<ui5-button>Button</ui5-button>
813+
<ui5-input></ui5-input>
814+
<ui5-button>Button</ui5-button>
815+
<ui5-input></ui5-input>
816+
<ui5-button>Button</ui5-button>
817+
</section>
818+
<ui5-toolbar slot="footer">
819+
<ui5-toolbar-button
820+
design="Emphasized"
821+
text="Submit"
822+
>
823+
</ui5-toolbar-button>
824+
<ui5-toolbar-button
825+
design="Transparent"
826+
text="Cancel"
827+
>
828+
</ui5-toolbar-button>
829+
</ui5-toolbar>
830+
</ui5-dialog>
831+
722832
<script>
723833
cbCompact.addEventListener("ui5-change", function () {
724834
document.body.classList.toggle("ui5-content-density-compact", cbCompact.checked);
@@ -966,6 +1076,10 @@
9661076
document.getElementById("theme-switch").addEventListener("ui5-selection-change", event => {
9671077
window["sap-ui-webcomponents-bundle"].configuration.setTheme(event.detail.selectedItems[0].getAttribute("data-ui5-theme-name"));
9681078
});
1079+
1080+
document.getElementById("open-big-content").addEventListener("click", function () {
1081+
window["dlgBigContent"].open = true;
1082+
});
9691083
</script>
9701084
</body>
9711085

0 commit comments

Comments
 (0)