From 85b1096e36ed83726f3d99e000b6d53b5abfab93 Mon Sep 17 00:00:00 2001
From: tsanislavgatev <tseko95@gmail.com>
Date: Thu, 18 Dec 2025 16:03:52 +0200
Subject: [PATCH] fix(framework): move element registration inside async

---
 packages/base/src/UI5Element.ts          | 26 ++++++++++++------------
 packages/main/test/pages/DatePicker.html |  4 ++--
 2 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/packages/base/src/UI5Element.ts b/packages/base/src/UI5Element.ts
index 36f31b62b81c..41f125ad78c1 100644
--- a/packages/base/src/UI5Element.ts
+++ b/packages/base/src/UI5Element.ts
@@ -1354,22 +1354,22 @@ abstract class UI5Element extends HTMLElement {
 				this.i18nBundleStorage[bundleName] = i18nBundles[index];
 			});
 			this.asyncFinished = true;
+
+			// Register the custom element only after CLDR and i18n data is loaded
+			const tag = this.getMetadata().getTag();
+			const definedLocally = isTagRegistered(tag);
+			const definedGlobally = customElements.get(tag);
+
+			if (definedGlobally && !definedLocally) {
+				recordTagRegistrationFailure(tag);
+			} else if (!definedGlobally) {
+				this._generateAccessors();
+				registerTag(tag);
+				customElements.define(tag, this as unknown as CustomElementConstructor);
+			}
 		};
 		this.definePromise = defineSequence();
 
-		const tag = this.getMetadata().getTag();
-
-		const definedLocally = isTagRegistered(tag);
-		const definedGlobally = customElements.get(tag);
-
-		if (definedGlobally && !definedLocally) {
-			recordTagRegistrationFailure(tag);
-		} else if (!definedGlobally) {
-			this._generateAccessors();
-			registerTag(tag);
-			customElements.define(tag, this as unknown as CustomElementConstructor);
-		}
-
 		return this;
 	}
 
diff --git a/packages/main/test/pages/DatePicker.html b/packages/main/test/pages/DatePicker.html
index 17d3689a3969..e2588126ca69 100644
--- a/packages/main/test/pages/DatePicker.html
+++ b/packages/main/test/pages/DatePicker.html
@@ -76,7 +76,7 @@ <h3>format-pattern - 'short'</h3>
 		<ui5-date-picker id='dp6' format-pattern='short'></ui5-date-picker>
 
 		<h3>format-pattern - 'long'</h3>
-		<ui5-date-picker id='dp7' format-pattern='long'></ui5-date-picker>
+		<ui5-date-picker id='dp7' show-clear-icon format-pattern='long'></ui5-date-picker>
 
 		<h3>format-pattern - 'QQQ yyyy, MMM dd'</h3>
 		<ui5-date-picker id='dp8' format-pattern='QQQ yyyy, MMM dd'></ui5-date-picker>
@@ -179,7 +179,7 @@ <h3>DatePicker with format `yyyy` should open picker on years</h3>
 			<ui5-title>Form validation</ui5-title>
 			<form id="formValidation">
 				<ui5-message-strip id="formValidationMessage" hidden></ui5-message-strip>
-				<ui5-date-picker min-date="6/1/2020" max-date="5/1/2021" format-pattern="dd/MM/yyyy" required id="formDatepicker"></ui5-date-picker>
+				<ui5-date-picker min-date="6/1/2020" max-date="5/1/2021" value="11/11/2020" format-pattern="dd/MM/yyyy" required id="formDatepicker"></ui5-date-picker>
 				<br><br>
 				<ui5-button id="btnCheckFormValidity">Check Validity</ui5-button>
 			</form>