fix(framework): wait cldr to be loaded (#11643)

Prevent language-aware components from re-rendering during a language change while language-specific data (e.g., CLDR, language bundles) is still loading and incomplete.

Components that depend on this data, and attempting to render them prematurely can lead to runtime issues such as missing content, console errors, or exceptions.

To avoid these problems, re-rendering is deferred until the language-specific data has fully loaded. Once the loading phase is complete, the language change will automatically trigger the necessary re-rendering.

Fixes: #11601

Author: nnaydenow

packages/base/src/UI5Element.ts

@@ -43,6 +43,7 @@ import { getI18nBundle } from "./i18nBundle.js";
 import type I18nBundle from "./i18nBundle.js";
 import { fetchCldr } from "./asset-registries/LocaleData.js";
 import getLocale from "./locale/getLocale.js";
+import { getLanguageChangePending } from "./config/Language.js";
 
 const DEV_MODE = true;
 let autoId = 0;
@@ -111,6 +112,15 @@ function _invalidate(this: UI5Element, changeInfo: ChangeInfo) {
 		return;
 	}
 
+	const ctor = this.constructor as typeof UI5Element;
+
+	// Skip re-rendering of language-aware components while language-specific data (e.g., CLDR, language bundles) is still loading.
+	// Once all necessary language data has been loaded, the language change
+	// will trigger a re-render of all language-aware components.
+	if (ctor.getMetadata().isLanguageAware() && getLanguageChangePending()) {
+		return;
+	}
+
 	// Call the onInvalidation hook
 	this.onInvalidation(changeInfo);
 

packages/base/src/config/Language.ts

@@ -16,6 +16,17 @@ attachConfigurationReset(() => {
 	fetchDefaultLanguage = undefined;
 });
 
+// Flag indicating that a language change is in progress and not yet complete.
+// While this flag is true, language-aware components will not re-render.
+// These components may rely on language-specific data (e.g., CLDR, language bundles),
+// which might be unavailable during the loading phase.
+// During this phase, all re-rendering is postponed.
+// Once all necessary language data has been loaded, the language change
+// will trigger a re-render of all language-aware components.
+let languageChangePending = false;
+
+const getLanguageChangePending = () => languageChangePending;
+
 /**
  * Returns the currently configured language, or the browser language as a fallback.
  * @public
@@ -41,9 +52,13 @@ const setLanguage = async (language: string): Promise<void> => {
 		return;
 	}
 
+	languageChangePending = true;
 	curLanguage = language;
 
 	await fireLanguageChange(language);
+
+	languageChangePending = false;
+
 	if (isBooted()) {
 		await reRenderAllUI5Elements({ languageAware: true });
 	}
@@ -92,4 +107,5 @@ export {
 	getDefaultLanguage,
 	setFetchDefaultLanguage,
 	getFetchDefaultLanguage,
+	getLanguageChangePending,
 };

packages/main/cypress/specs/DatePicker.cy.tsx

@@ -5,11 +5,6 @@ import DatePicker from "../../src/DatePicker.js";
 import Label from "../../src/Label.js";
 
 describe("Date Picker Tests", () => {
-	afterEach(() => {
-		// eslint-disable-next-line
-		cy.wait(200);
-	});
-
 	it("input renders", () => {
 		cy.mount(<DatePicker></DatePicker>);
 
@@ -1547,11 +1542,6 @@ describe("Date Picker Tests", () => {
 });
 
 describe("Legacy date customization and Islamic calendar type", () => {
-	afterEach(() => {
-		// eslint-disable-next-line
-		cy.wait(200);
-	});
-
 	const configurationObject = {
 		"formatSettings": {
 			"legacyDateCalendarCustomizing": [

packages/main/cypress/specs/DateRangePicker.cy.tsx

@@ -242,6 +242,8 @@ describe("DateRangePicker general interaction", () => {
 			.should("be.focused");
 
 		cy.realPress("End")
+		// TODO: Carret position need to be checked somehow before triggering next action
+		cy.wait(100);
 
 		cy.realPress("PageDown");
 
@@ -254,6 +256,8 @@ describe("DateRangePicker general interaction", () => {
 			.should("have.attr", "value", "Jul 16, 2020 @ Jul 29, 2020");
 
 		cy.realPress("Home");
+		// TODO: Carret position need to be checked somehow before triggering next action
+		cy.wait(100);
 
 		cy.realPress("PageDown");
 
@@ -585,6 +589,9 @@ describe("DateRangePicker general interaction", () => {
 
 		cy.mount(<DateRangePickerTemplate formatPattern="MM.yyyy" />);
 
+		// TODO: Remove when focus is applied on month, day, year picker in their onAfterRendering method. It takes the focus one they are rendered even if not visible
+		cy.wait(500);
+
 		cy.get<DateRangePicker>("[ui5-daterange-picker]")
 			.as("dateRangePicker")
 			.shadow()

packages/main/cypress/support/commands/DatePicker.commands.ts

@@ -1,3 +1,12 @@
+import type ResponsivePopover from "../../../src/ResponsivePopover.js";
+
+const isPickerOpen = (open = false) => {
+	cy.get("@datePicker")
+		.shadow()
+		.find<ResponsivePopover>("[ui5-responsive-popover].ui5-date-picker-popover")
+	[open ? "ui5ResponsivePopoverOpened" : "ui5ResponsivePopoverClosed"]();
+};
+
 Cypress.Commands.add("ui5DatePickerGetInnerInput", { prevSubject: true }, subject => {
 	cy.wrap(subject)
 		.as("datePicker");
@@ -19,6 +28,8 @@ Cypress.Commands.add("ui5DatePickerGetPopoverDate", { prevSubject: true }, (subj
 	cy.get("@datePicker")
 		.should("have.attr", "open");
 
+	isPickerOpen(true);
+
 	cy.get("@datePicker")
 		.shadow()
 		.find("ui5-calendar")
@@ -40,6 +51,8 @@ Cypress.Commands.add("ui5DatePickerGetDisplayedDay", { prevSubject: true }, (sub
 	cy.get("@datePicker")
 		.should("have.attr", "open");
 
+	isPickerOpen(true);
+
 	cy.get("@datePicker")
 		.shadow()
 		.find("ui5-calendar")
@@ -61,6 +74,8 @@ Cypress.Commands.add("ui5DatePickerGetFirstDisplayedDate", { prevSubject: true }
 	cy.get("@datePicker")
 		.should("have.attr", "open");
 
+	isPickerOpen(true);
+
 	cy.get("@datePicker")
 		.shadow()
 		.find("ui5-calendar")
@@ -82,6 +97,8 @@ Cypress.Commands.add("ui5DatePickerGetFirstDisplayedYear", { prevSubject: true }
 	cy.get("@datePicker")
 		.should("have.attr", "open");
 
+	isPickerOpen(true);
+
 	cy.get("@datePicker")
 		.shadow()
 		.find("ui5-calendar")
@@ -102,6 +119,8 @@ Cypress.Commands.add("ui5DatePickerGetDisplayedMonth", { prevSubject: true }, (s
 	cy.get("@datePicker")
 		.should("have.attr", "open");
 
+	isPickerOpen(true);
+
 	cy.get("@datePicker")
 		.shadow()
 		.find("ui5-calendar")
@@ -123,6 +142,8 @@ Cypress.Commands.add("ui5DatePickerGetDisplayedYear", { prevSubject: true }, (su
 	cy.get("@datePicker")
 		.should("have.attr", "open");
 
+	isPickerOpen(true);
+
 	cy.get("@datePicker")
 		.shadow()
 		.find("ui5-calendar")
@@ -144,6 +165,8 @@ Cypress.Commands.add("ui5DatePickerGetNextButton", { prevSubject: true }, subjec
 	cy.get("@datePicker")
 		.should("have.attr", "open");
 
+	isPickerOpen(true);
+
 	cy.get("@datePicker")
 		.shadow()
 		.find("ui5-calendar")
@@ -163,6 +186,29 @@ Cypress.Commands.add("ui5DatePickerGetPreviousButton", { prevSubject: true }, su
 	cy.get("@datePicker")
 		.should("have.attr", "open");
 
+	isPickerOpen(true);
+
+	cy.get("@datePicker")
+		.shadow()
+		.find("ui5-calendar")
+		.as("calendar")
+		.should("be.visible");
+
+	return cy.get("@calendar")
+		.shadow()
+		.find(".ui5-calheader div[data-ui5-cal-header-btn-prev]")
+		.first();
+});
+
+Cypress.Commands.add("ui5DatePickerGetPreviousButton", { prevSubject: true }, subject => {
+	cy.wrap(subject)
+		.as("datePicker");
+
+	cy.get("@datePicker")
+		.should("have.attr", "open");
+
+	isPickerOpen(true);
+
 	cy.get("@datePicker")
 		.shadow()
 		.find("ui5-calendar")
@@ -179,6 +225,8 @@ Cypress.Commands.add("ui5DatePickerGetMonthButton", { prevSubject: true }, subje
 	cy.wrap(subject)
 		.as("datePicker");
 
+	isPickerOpen(true);
+
 	cy.get("@datePicker")
 		.shadow()
 		.find("ui5-calendar")
@@ -195,6 +243,8 @@ Cypress.Commands.add("ui5DatePickerGetYearButton", { prevSubject: true }, subjec
 	cy.wrap(subject)
 		.as("datePicker");
 
+	isPickerOpen(true);
+
 	cy.get("@datePicker")
 		.shadow()
 		.find("ui5-calendar")