@schukai/monster 4.124.1 → 4.124.2

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 
 
+## [4.124.2] - 2026-03-02
+
+### Bug Fixes
+
+- **digits:** stabilize rendering and input behavior ([#384](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/384))
+
+
+
 ## [4.124.1] - 2026-02-23
 
 ### Bug Fixes

package/package.json

@@ -1 +1 @@
-{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.4","@popperjs/core":"^2.11.8"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"4.124.1"}
+{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.5","@popperjs/core":"^2.11.8"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"4.124.2"}

package/source/components/form/digits.mjs

@@ -100,10 +100,11 @@ class Digits extends CustomControl {
 	 * @property {string} value
 	 */
 	set value(value) {
-		const chars = String(value).split("");
+		const normalizedValue = value == null ? "" : String(value);
+		const chars = normalizedValue.split("");
 
-		this.setOption("value", value);
-		this.setFormValue(value);
+		this.setOption("value", normalizedValue);
+		this.setFormValue(normalizedValue);
 
 		if (chars.every(checkCharacter.bind(this))) {
 			this.setValidity({ badInput: false }, "");
@@ -209,7 +210,9 @@ function updateDigitControls() {
 
 	const controls = [];
 
-	const values = this.getOption("value") || "";
+	const values = this.getOption("value") == null
+		? ""
+		: String(this.getOption("value"));
 
 	if (this[digitsElementSymbol]) {
 		this[digitsElementSymbol].style.gridTemplateColumns =
@@ -218,11 +221,17 @@ function updateDigitControls() {
 
 	for (let i = 0; i < digits; i++) {
 		controls.push({
-			value: values[i] ?? " ",
+			value: values[i] ?? "",
 		});
 	}
 
 	this.setOption("digitsControls", controls);
+
+	// Keep real input.value in sync with the option model. Attribute updates alone
+	// can drift after user interaction because inputs keep an internal dirty value.
+	setTimeout(() => {
+		syncInputValues.call(this, controls);
+	}, 0);
 }
 
 /**
@@ -287,7 +296,7 @@ function initEventHandler() {
 		}
 
 		if (pressedKey === "Backspace") {
-			if (inputControl.value !== "" && inputControl.value !== " ") {
+			if (inputControl.value !== "") {
 				event.preventDefault();
 				inputControl.value = "";
 				collectValues.call(self);
@@ -313,16 +322,14 @@ function initEventHandler() {
 				return;
 			}
 
-			if (inputControl.value.length === 1) {
-				event.preventDefault();
-				inputControl.value = pressedKey;
-				const nextControl = inputControl.nextElementSibling;
-				if (nextControl && nextControl.tagName === "INPUT") {
-					nextControl.focus();
-				}
-				collectValues.call(self);
-				return;
+			event.preventDefault();
+			inputControl.value = pressedKey;
+			const nextControl = inputControl.nextElementSibling;
+			if (nextControl && nextControl.tagName === "INPUT") {
+				nextControl.focus();
 			}
+			collectValues.call(self);
+			return;
 		}
 	});
 
@@ -344,10 +351,28 @@ function initEventHandler() {
 function collectValues() {
 	const controlsValues = Array.from(
 		this[digitsElementSymbol].querySelectorAll("input"),
-	).map((input) => input.value || " ");
+	).map((input) => input.value || "");
 	this.value = controlsValues.join("");
 }
 
+/**
+ * @private
+ * @param {Array<{value:string}>} controls
+ * @returns {void}
+ */
+function syncInputValues(controls) {
+	if (!this[digitsElementSymbol]) return;
+	const inputs = this[digitsElementSymbol].querySelectorAll("input");
+	if (!inputs.length) return;
+
+	for (let i = 0; i < inputs.length; i++) {
+		const nextValue = controls?.[i]?.value ?? "";
+		if (inputs[i].value !== nextValue) {
+			inputs[i].value = nextValue;
+		}
+	}
+}
+
 /**
  * @private
  * @return {void}