Skip to content

Commit 499bca6

Browse files
dimovpetardimovpetar
committed
fix(ui5-dialog): Dynamically opened dialogs no longer flicker when opened
1 parent 768a8ca commit 499bca6

File tree

3 files changed

+17
-3
lines changed

3 files changed

+17
-3
lines changed

‎packages/main/src/Dialog.ts‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -329,7 +329,10 @@ class Dialog extends Popup {
329329

330330
_show() {
331331
super._show();
332-
this._center();
332+
requestAnimationFrame(() => {
333+
this._updateMediaRange();
334+
this._center();
335+
});
333336
}
334337

335338
onBeforeRendering() {
@@ -384,7 +387,7 @@ class Dialog extends Popup {
384387
_center() {
385388
const height = window.innerHeight - this.offsetHeight,
386389
width = window.innerWidth - this.offsetWidth;
387-
390+
console.error(`${Math.round(height / 2)}px`, `${Math.round(width / 2)}px`);
388391
Object.assign(this.style, {
389392
top: `${Math.round(height / 2)}px`,
390393
left: `${Math.round(width / 2)}px`,

‎packages/main/src/Popup.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -604,7 +604,7 @@ abstract class Popup extends UI5Element {
604604
}
605605

606606
/**
607-
* Sets "block" display to the popup. The property can be overriden by derivatives of Popup.
607+
* Sets "popover=manual" to the popup. The method can be overridden by derivatives of Popup.
608608
* @protected
609609
*/
610610
_show() {

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
</head>
2525

2626
<body>
27+
<ui5-button id="btnUnwanted">Open dialog with unwanted animation</ui5-button>
2728
<div class="wrapper">
2829
<div>
2930
<ui5-segmented-button id="theme-switch">
@@ -871,6 +872,16 @@
871872
</ui5-dialog>
872873

873874
<script>
875+
document.getElementById("btnUnwanted").addEventListener("click", function () {
876+
const dialog = document.createElement("ui5-dialog");
877+
const child1 = `<div data-v-f5de9ea6="" data-v-d7dd9f52="" class="header" slot="header" design="Header"><h3 data-v-f5de9ea6="" automation-id="contactEmailFormModal-header">Contact form</h3><udex-control-button data-v-f5de9ea6="" automation-id="contactEmailFormModal-headerCloseButton" slot="endContent" icon-only="" has-icon="" accessible-name="close button"><template shadowrootmode="open" shadowrootdelegatesfocus=""></template></udex-control-button></div>`
878+
const child2 = `<div data-v-d7dd9f52="" class="modal-content" automation-id="contactEmailForm-modalContent"><div data-v-d7dd9f52="" class="modal-form-header" automation-id="contactEmailForm-modalFormHeader"><div data-v-9c54a22e="" data-v-d7dd9f52="" class="header-container" automation-id="contactEmailForm-contactEmailHeader"><div data-v-9c54a22e="" class="relative block h-full max-w-[130px]" automation-id="partnerProfilePage-partnerLogo-root"><div automation-id="partnerProfilePage-partnerLogo" class="border-grey-2 block h-[62px] w-[62px] rounded-sm border bg-white flex justify-center items-center !w-[60px] !h-[60px] !border-none"><img class="h-full w-full object-contain" src="/sap/details/api//media/storage/0000225382/1740396106410-0000225382.png" automation-id="partnerProfilePage-partnerLogo-img"></div></div><div data-v-9c54a22e="" class="HeadingMediumM-size"><div data-v-9c54a22e="">Contact SEIDOR</div><div data-v-9c54a22e=""></div></div></div></div><form data-v-a57c5c36="" data-v-d7dd9f52="" automation-id="contactEmailForm-contactEmailFormContent"><div data-v-a57c5c36="" class="form-field-wrapper mobile-only"><div data-v-a57c5c36="" class="newsletter-option"><p data-v-a57c5c36="" class="newsletter-label">Stay informed about our updates</p><udex-checkbox data-v-a57c5c36="" id="newsletter" tabindex="-1" automation-id="newsletter-option"><template shadowrootmode="open"></template></udex-checkbox><small data-v-a57c5c36="" class="newsletter-info">You can unsubscribe at any time.</small></div></div><div data-v-a57c5c36="" class="system-field alternate-view"><udex-text-field data-v-a57c5c36="" id="referral_code" name="referral_code" placeholder="Enter your referral code" tabindex="-1" automation-id="referral-code-input"><template shadowrootmode="open"></template></udex-text-field><small data-v-a57c5c36="" class="field-hint">Enter code above</small></div><udex-message-strip data-v-a57c5c36="" status-type="Icon" class="mb-8"><template shadowrootmode="open"></template><div data-v-a57c5c36="" class="flex items-center justify-between gap-4"><span data-v-a57c5c36="" class="body-s-size">We suggest to read some tips before selecting a Partner</span><udex-button data-v-a57c5c36="" class="flex shrink-0 justify-center" id="custom-usage-patterns-forms-learn-more" accessible-name="Read Tips before Selecting a Partner" udex-button=""><template shadowrootmode="open" shadowrootdelegatesfocus=""></template>Read Tips</udex-button></div></udex-message-strip><div data-v-a57c5c36="" class="HeadingMediumXXXS-size mb-4" automation-id="contactEmailFormContent-personalDetailsTitle">Personal Details</div><div data-v-a57c5c36="" class="flex flex-col gap-1.5 max-[850px]:gap-2" automation-id="contactEmailFormContent-personalDetails"><div data-v-a57c5c36="" class="flex justify-between gap-6 max-[850px]:flex-col max-[850px]:gap-2" automation-id="contactEmailFormContent-personalDetailsNames"><udex-text-field data-v-a57c5c36="" value-state="Standard" aria-describedby="firstNameError" supporting-text="" automation-id="contactEmailFormContent-firstName"><template shadowrootmode="open"></template></udex-text-field><udex-text-field data-v-a57c5c36="" value-state="Standard" aria-describedby="lastNameError" supporting-text="" automation-id="contactEmailFormContent-lastName"><template shadowrootmode="open"></template></udex-text-field></div><div data-v-a57c5c36="" class="flex justify-between gap-6 max-[850px]:flex-col max-[850px]:gap-2" automation-id="contactEmailFormContent-personalDetailsContacts"><udex-text-field data-v-a57c5c36="" value-state="Standard" aria-describedby="emailError" supporting-text="" automation-id="contactEmailFormContent-email"><template shadowrootmode="open"></template></udex-text-field><udex-phone-number-field data-v-a57c5c36="" id="udex-phone-number-field" value-state="Standard" automation-id="contactEmailFormContent-phoneNumber"><template shadowrootmode="open"></template></udex-phone-number-field></div></div><div data-v-a57c5c36="" class="HeadingMediumXXXS-size mb-4" automation-id="contactEmailFormContent-companyDetailsTitle">Company Details</div><div data-v-a57c5c36="" class="mb-1 flex flex-col gap-1.5" automation-id="contactEmailFormContent-companyDetails"><div data-v-a57c5c36="" class="flex gap-6 max-[850px]:flex-col max-[850px]:gap-2" automation-id="contactEmailFormContent-companyDetailsInputs"><udex-text-field data-v-a57c5c36="" value-state="Standard" aria-describedby="companyError" supporting-text="" automation-id="contactEmailFormContent-companyName"><template shadowrootmode="open"></template></udex-text-field><udex-country-selector data-v-a57c5c36="" id="country-selector" value-state="Standard" width="380px" search-placeholder="Search Countries and Regions" supporting-text="" automation-id="contactEmailFormContent-countrySelector" value=""><template shadowrootmode="open"></template></udex-country-selector></div><div data-v-a57c5c36="" class="flex gap-6 max-[850px]:flex-col max-[850px]:gap-2" automation-id="contactEmailFormContent-companyDetailsInputs"><udex-select-box data-v-a57c5c36="" value-state="Standard" supporting-text="" value=""><template shadowrootmode="open"></template><udex-select-box-item data-v-a57c5c36=""></udex-select-box-item><udex-select-box-item data-v-a57c5c36=""></udex-select-box-item><udex-select-box-item data-v-a57c5c36=""></udex-select-box-item><udex-select-box-item data-v-a57c5c36=""></udex-select-box-item><udex-select-box-item data-v-a57c5c36=""></udex-select-box-item><udex-select-box-item data-v-a57c5c36=""></udex-select-box-item><udex-select-box-item data-v-a57c5c36=""></udex-select-box-item><udex-select-box-item data-v-a57c5c36=""></udex-select-box-item><udex-select-box-item data-v-a57c5c36=""></udex-select-box-item></udex-select-box></div></div><udex-textarea data-v-a57c5c36="" id="textarea" value-state="Standard" supporting-text="" automation-id="contactEmailFormContent-comments"><template shadowrootmode="open"></template></udex-textarea><div data-v-1f58e182="" data-v-a57c5c36="" class="agreement body-s-size" automation-id="contactEmailFormContent-agreement"><div data-v-1f58e182="" class="checkbox-agreement-wrapper" automation-id="contactEmailForm-checkboxWrapper"><udex-checkbox data-v-1f58e182="" value-state="Standard" automation-id="contactEmailForm-checkbox"><template shadowrootmode="open"></template></udex-checkbox><span data-v-1f58e182="" automation-id="contactEmailForm-agreementText"> I agree that SAP will share this data with SEIDOR so that they can contact me regarding my request. * <udex-link data-v-1f58e182="" automation-id="contactEmailForm-privacyLink"><template shadowrootmode="open"></template>View Privacy Statement.</udex-link></span></div><!----></div><div data-v-a57c5c36="" class="mt-6" automation-id="contactEmailFormContent-recaptcha"></div><!----><udex-button data-v-a57c5c36="" class="mt-6" id="custom-usage-patterns-forms-submit" accessible-name="Contact Sales Submit" udex-button="" automation-id="contactEmailFormContent-submitButton"><template shadowrootmode="open" shadowrootdelegatesfocus=""></template>Send</udex-button></form></div>`;
879+
880+
dialog.innerHTML = child1 + child2;
881+
document.body.appendChild(dialog);
882+
dialog.open = true;
883+
});
884+
874885
cbCompact.addEventListener("ui5-change", function () {
875886
document.body.classList.toggle("ui5-content-density-compact", cbCompact.checked);
876887
});

0 commit comments

Comments
 (0)