@schukai/monster 4.85.2 → 4.87.0

package/CHANGELOG.md

@@ -2,6 +2,25 @@
 
 
 
+## [4.87.0] - 2026-01-11
+
+### Add Features
+
+- Add functionality for change events in text fields for issue [#371](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/371)
+
+
+
+## [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.87.0"}

package/source/components/datatable/save-button.mjs

@@ -14,14 +14,24 @@
 
 import { instanceSymbol } from "../../constants.mjs";
 import { diff } from "../../data/diff.mjs";
-import { addAttributeToken } from "../../dom/attributes.mjs";
-import { ATTRIBUTE_ERRORMESSAGE } from "../../dom/constants.mjs";
+import {
+	addAttributeToken,
+	getLinkedObjects,
+	hasObjectLink,
+} from "../../dom/attributes.mjs";
+import {
+	ATTRIBUTE_ERRORMESSAGE,
+	customElementUpdaterLinkSymbol,
+} from "../../dom/constants.mjs";
 import {
 	assembleMethodSymbol,
 	CustomElement,
 	registerCustomElement,
 } from "../../dom/customelement.mjs";
-import { findElementWithSelectorUpwards } from "../../dom/util.mjs";
+import {
+	findElementWithSelectorUpwards,
+	getDocument,
+} from "../../dom/util.mjs";
 import { isString, isArray } from "../../types/is.mjs";
 import { Observer } from "../../types/observer.mjs";
 import { TokenList } from "../../types/tokenlist.mjs";
@@ -346,8 +356,8 @@ function initEventHandler() {
 			this[saveInFlightSymbol] = true;
 			this[stateButtonElementSymbol].setOption("disabled", true);
 
-			this[datasourceLinkedElementSymbol]
-				.write()
+			flushLinkedForms.call(this)
+				.then(() => this[datasourceLinkedElementSymbol].write())
 				.then(() => {
 					this[originValuesSymbol] = null;
 					this[originValuesSymbol] = clone(
@@ -378,6 +388,49 @@ function initEventHandler() {
 	});
 }
 
+/**
+ * @private
+ * @return {Promise<void>}
+ */
+function flushLinkedForms() {
+	const datasource = this[datasourceLinkedElementSymbol];
+	if (!datasource) {
+		return Promise.resolve();
+	}
+
+	const doc = getDocument();
+	const forms = doc.querySelectorAll("monster-form");
+	const writes = [];
+
+	for (const form of forms) {
+		if (!(form instanceof HTMLElement)) {
+			continue;
+		}
+		if (form[datasourceLinkedElementSymbol] !== datasource) {
+			continue;
+		}
+
+		if (hasObjectLink(form, customElementUpdaterLinkSymbol)) {
+			const updaters = getLinkedObjects(form, customElementUpdaterLinkSymbol);
+			for (const list of updaters) {
+				for (const updater of list) {
+					updater.retrieve();
+				}
+			}
+		}
+
+		if (typeof form.write === "function") {
+			writes.push(form.write());
+		}
+	}
+
+	if (writes.length === 0) {
+		return Promise.resolve();
+	}
+
+	return Promise.all(writes).then(() => {});
+}
+
 /**
  * @private
  */

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;