fix(ui5-step-input): format value with new locale symbols when language is changed

Fixes: #12334

Author: GDamyanov

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

@@ -1,4 +1,6 @@
 import StepInput from "../../src/StepInput.js";
+import { setLanguage } from "@ui5/webcomponents-base/dist/config/Language.js";
+import "../../src/Assets.js";
 
 const decreaseValue = true;
 
@@ -650,6 +652,44 @@ describe("StepInput thousand separator formatting", () => {
             	expect(num).to.equal(12345);
         });
     });
+
+	it("should update input value when language is changed", () => {
+		cy.wrap({ setLanguage })
+			.then(async ({ setLanguage }) => {
+				await setLanguage("en");
+			});
+
+		cy.mount(
+			<StepInput value={10000.56} valuePrecision={2}></StepInput>
+		);
+
+		cy.get("[ui5-step-input]")
+			.as("stepInput");
+		cy.get<StepInput>("@stepInput")
+			.ui5StepInputGetInnerInput()
+			.should($input => {
+				const val = $input.val() as string;
+				expect(val).to.equal("10,000.56");
+		});
+
+		cy.wrap({ setLanguage })
+			.then(async ({ setLanguage }) => {
+				await setLanguage("de");
+			})
+			.then(() => {
+				cy.get<StepInput>("@stepInput")
+				.ui5StepInputGetInnerInput()
+				.should($input => {
+					const val = $input.val() as string;
+					expect(val).to.equal("10.000,56");
+				});
+			});
+		
+		cy.wrap({ setLanguage })
+			.then(async ({ setLanguage }) => {
+				await setLanguage("en");
+			});
+	});
 });
 
 describe("StepInput property propagation", () => {

packages/main/src/StepInput.ts

@@ -45,6 +45,7 @@ import NumberFormat from "@ui5/webcomponents-localization/dist/NumberFormat.js";
 import StepInputCss from "./generated/themes/StepInput.css.js";
 import getCachedLocaleDataInstance from "@ui5/webcomponents-localization/dist/getCachedLocaleDataInstance.js";
 import getLocale from "@ui5/webcomponents-base/dist/locale/getLocale.js";
+import { attachLanguageChange, detachLanguageChange } from "@ui5/webcomponents-base/dist/locale/languageChange.js";
 
 // Spin variables
 const INITIAL_WAIT_TIMEOUT = 500; // milliseconds
@@ -301,6 +302,10 @@ class StepInput extends UI5Element implements IFormInputElement {
 
 	_formatter?: NumberFormat;
 
+	_languageChangeHandler?: (lang: string) => Promise<void>;
+
+	_languageChanged?: boolean = false;
+
 	@i18n("@ui5/webcomponents")
 	static i18nBundle: I18nBundle;
 
@@ -363,6 +368,11 @@ class StepInput extends UI5Element implements IFormInputElement {
 	}
 
 	get _displayValue() {
+		if (this._languageChanged) {
+			this._languageChanged = false;
+			this.valueState = ValueState.None; // to reset the value state visual
+			return this._formatNumber(this.value);
+		}
 		// For the cases when there is set value precision but the input value is not with correct precision we don't need to format it
 		const value = this.input?.value && !this._isValueWithCorrectPrecision ? this.input.value : this._formatNumber(this.value);
 		if ((this.value === 0) || (Number.isInteger(this.value))) {
@@ -394,6 +404,34 @@ class StepInput extends UI5Element implements IFormInputElement {
 	onBeforeRendering() {
 		this._setButtonState();
 	}
+	onEnterDOM() {
+		this._setupLanguageChangeHandler();
+	}
+
+	onExitDOM() {
+		this._cleanupLanguageChangeHandler();
+	}
+
+	_setupLanguageChangeHandler() {
+		if (this._languageChangeHandler) {
+			return;
+		}
+
+		this._languageChangeHandler = () => {
+			this._formatter = undefined;
+			this._languageChanged = true;
+
+			return Promise.resolve();
+		};
+		attachLanguageChange(this._languageChangeHandler);
+	}
+
+	_cleanupLanguageChangeHandler() {
+		if (this._languageChangeHandler) {
+			detachLanguageChange(this._languageChangeHandler);
+			this._languageChangeHandler = undefined;
+		}
+	}
 
 	get formatter(): NumberFormat {
 		if (!this._formatter) {
@@ -563,16 +601,15 @@ class StepInput extends UI5Element implements IFormInputElement {
 	}
 
 	get _isValueWithCorrectPrecision() {
+		const localeData = getCachedLocaleDataInstance(getLocale());
+		// gets either "." or "," as delimiter which is based on locale, and splits the number by it
+		const delimiter = localeData.getNumberSymbol("decimal") || ".";
 		// check if the value will be displayed with correct precision
 		// _displayValue has special formatting logic
-		if (this.valuePrecision === 0 && ((this.value === 0) || (Number.isInteger(this.value)))) {
+		if (this.valuePrecision === 0 && !this.input?.value.includes(delimiter) && ((this.value === 0) || (Number.isInteger(this.value)))) {
 			// integers and zero will be formatted with toFixed, so thex y're always valid
 			return true;
 		}
-
-		const localeData = getCachedLocaleDataInstance(getLocale());
-		// gets either "." or "," as delimiter which is based on locale, and splits the number by it
-		const delimiter = localeData?.getNumberSymbol("decimal") || ".";
 		const numberParts = this.input?.value?.split(delimiter);
 		const decimalPartLength = numberParts?.length > 1 ? numberParts[1].length : 0;
 

packages/main/src/bundle.common.bootstrap.ts

@@ -70,6 +70,7 @@ import { getFirstDayOfWeek } from "@ui5/webcomponents-base/dist/config/FormatSet
 import { _getRegisteredNames as getIconNames, getIconAccessibleName } from "@ui5/webcomponents-base/dist/asset-registries/Icons.js";
 import applyDirection from "@ui5/webcomponents-base/dist/locale/applyDirection.js";
 import { attachDirectionChange } from "@ui5/webcomponents-base/dist/locale/directionChange.js";
+import { attachLanguageChange, detachLanguageChange } from "@ui5/webcomponents-base/dist/locale/languageChange.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import announce from "@ui5/webcomponents-base/dist/util/InvisibleMessage.js";
 import { ignoreCustomElements, shouldIgnoreCustomElement } from "@ui5/webcomponents-base/dist/IgnoreCustomElements.js";
@@ -114,6 +115,8 @@ const testAssets = {
 	getLocaleData,
 	applyDirection,
 	attachDirectionChange,
+	attachLanguageChange,
+	detachLanguageChange,
 	ResizeHandler,
 	addCustomCSS,
 	attachThemeLoaded,