@schukai/monster 4.124.0 → 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}

package/source/components/form/login.mjs

@@ -1490,8 +1490,9 @@ function initEventHandler() {
 		getWindow()
 			.fetch(url, options)
 			.then((response) => {
-				const disabledCodes =
-					this.getOption("behavior.passwordResetDisabledStatusCodes") || [401];
+				const disabledCodes = this.getOption(
+					"behavior.passwordResetDisabledStatusCodes",
+				) || [401];
 				const isResetDisabled =
 					disabledCodes.includes(response.status) &&
 					response.headers.has("x-password-reset") &&

package/source/components/form/popper-button.mjs

@@ -18,7 +18,10 @@ import {
 	assembleMethodSymbol,
 	registerCustomElement,
 } from "../../dom/customelement.mjs";
-import { findElementWithSelectorUpwards, getDocument } from "../../dom/util.mjs";
+import {
+	findElementWithSelectorUpwards,
+	getDocument,
+} from "../../dom/util.mjs";
 import { isFunction } from "../../types/is.mjs";
 import { DeadMansSwitch } from "../../util/deadmansswitch.mjs";
 import { Popper } from "../layout/popper.mjs";