@schukai/monster 4.85.2 → 4.86.0

package/CHANGELOG.md

@@ -2,6 +2,17 @@
 
 
 
+## [4.86.0] - 2026-01-10
+
+### Add Features
+
+- Add investigation for form writeback and control ([#370](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/370))
+### Changes
+
+- close issue
+
+
+
 ## [4.85.2] - 2026-01-08
 
 ### 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.85.2"}
+{"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.86.0"}

package/source/components/form/form.mjs

@@ -189,6 +189,12 @@ function initEventHandler() {
 			const events = this.getOption("writeBack.events");
 			for (const event of events) {
 				this.addEventListener(event, (e) => {
+					const target = e?.target;
+					const targetTag = target?.tagName?.toLowerCase?.();
+					if (targetTag === "monster-select" && e.type !== "change") {
+						return;
+					}
+
 					if (e?.target && typeof e.target.setCustomValidity === "function") {
 						e.target.setCustomValidity("");
 						e.target.removeAttribute("data-monster-validation-error");

package/source/components/form/select.mjs

@@ -3241,6 +3241,40 @@ function isValueIsEmptyThenGetNormalize(value) {
 	return value;
 }
 
+/**
+ * @private
+ * @param {Array} current
+ * @param {Array} next
+ * @returns {boolean}
+ */
+function areSelectionValuesEqual(current, next) {
+	if (!isArray(current) || !isArray(next)) {
+		return false;
+	}
+
+	if (current.length !== next.length) {
+		return false;
+	}
+
+	const toValue = (item) => {
+		if (isObject(item) && Object.prototype.hasOwnProperty.call(item, "value")) {
+			return `${item.value}`;
+		}
+		return `${item}`;
+	};
+
+	const currentValues = current.map(toValue).sort();
+	const nextValues = next.map(toValue).sort();
+
+	for (let i = 0; i < currentValues.length; i++) {
+		if (currentValues[i] !== nextValues[i]) {
+			return false;
+		}
+	}
+
+	return true;
+}
+
 /**
  * @private
  * @param selection
@@ -3280,27 +3314,34 @@ function setSelection(selection) {
 
 	selection = resultSelection;
 
+	const previousSelection = this.getOption("selection", []);
+	const valuesChanged = !areSelectionValuesEqual(previousSelection, selection);
+
 	if (!isInteger(this[selectionVersionSymbol])) {
 		this[selectionVersionSymbol] = 0;
 	}
-	this[selectionVersionSymbol] += 1;
+	if (valuesChanged) {
+		this[selectionVersionSymbol] += 1;
+	}
 
 	this.setOption("selection", selection);
 
 	checkOptionState.call(this);
 	setSummaryAndControlText.call(this);
 
-	try {
-		this?.setFormValue(this.value);
-	} catch (e) {
-		addErrorAttribute(this, e);
-	}
+	if (valuesChanged) {
+		try {
+			this?.setFormValue(this.value);
+		} catch (e) {
+			addErrorAttribute(this, e);
+		}
 
-	fireCustomEvent(this, "monster-selected", {
-		selection,
-	});
+		fireCustomEvent(this, "monster-selected", {
+			selection,
+		});
 
-	fireEvent(this, "change"); // https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/291
+		fireEvent(this, "change"); // https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/291
+	}
 
 	if (this[runLookupOnceSymbol] !== true && selection.length > 0) {
 		this[runLookupOnceSymbol] = true;