fix: update updater bind values and select logic #291

source/components/datatable/save-button.mjs

@@ -199,6 +199,7 @@ class SaveButton extends CustomElement {
 					const ignoreChanges = self.getOption("ignoreChanges");
 
 					const result = diff(self[originValuesSymbol], currentValues);
+
 					if (isArray(ignoreChanges) && ignoreChanges.length > 0) {
 						const itemsToRemove = [];
 						for (const item of result) {

source/components/form/select.mjs

@@ -336,22 +336,13 @@ class Select extends CustomControl {
      * @fires monster-selected this event is fired when the selection is set
      */
     set value(value) {
-		let ignoreValues = this.getOption("ignoreValues", []);
-		if (!isArray(ignoreValues)) {
-			ignoreValues = [];
-		}
-
-		for (const v of ignoreValues) {
-			if (value === v) {
-				return;
-			}
-		}
 
         const result = convertValueToSelection.call(this, value);
 
         setSelection
             .call(this, result.selection)
-			.then(() => {})
+            .then(() => {
+            })
             .catch((e) => {
                 addErrorAttribute(this, e);
             });
@@ -410,7 +401,10 @@ class Select extends CustomControl {
      * @property {String} mapping.labelTemplate template with the label placeholders in the form ${name}, where name is the key (**)
      * @property {String} mapping.valueTemplate template with the value placeholders in the form ${name}, where name is the key
      * @property {function|undefined} mapping.filter Filtering of values via a function
-	 * @property {Array} ignoreValues Ignore values in the selection and value
+     * @property {Object} empty
+     * @property {String} empty.defaultValueRadio Default value if you use radio buttons
+     * @property {Array} empty.defaultValueCheckbox Default value if you use checkboxes
+     * @property {Array} empty.equivalents Equivalents for empty values
      * @property {Object} formatter
      * @property {function|undefined} formatter.selection format selection label
      */
@@ -474,7 +468,11 @@ class Select extends CustomControl {
                     valueTemplate: "",
                     filter: null,
                 },
-				ignoreValues: [undefined, null, ""],
+                empty: {
+                    defaultValueRadio: "",
+                    defaultValueCheckbox: [],
+                    equivalents: [undefined, null, "", NaN],
+                },
                 formatter: {
                     selection: buildSelectionLabel,
                 },
@@ -540,7 +538,7 @@ class Select extends CustomControl {
             }
         }
 
-		requestAnimationFrame(() => {
+        setTimeout(() => {
             let lastValue = self.value;
             self[internalSymbol].attachObserver(
                 new Observer(function () {
@@ -551,7 +549,8 @@ class Select extends CustomControl {
                             lastValue = n;
                             setSelection
                                 .call(self, n)
-								.then(() => {})
+                                .then(() => {
+                                })
                                 .catch((e) => {
                                     addErrorAttribute(self, e);
                                 });
@@ -561,7 +560,7 @@ class Select extends CustomControl {
             );
 
             areOptionsAvailableAndInit.call(self);
-		});
+        },0);
 
         return this;
     }
@@ -742,7 +741,8 @@ class Select extends CustomControl {
         setTimeout(() => {
             setSelection
                 .call(this, this.getOption("selection"))
-				.then(() => {})
+                .then(() => {
+                })
                 .catch((e) => {
                     addErrorAttribute(this, e);
                 });
@@ -1036,6 +1036,7 @@ function fetchIt(url, controlOptions) {
                         }
 
                         result = setSelection.call(this, newValue);
+
                         requestAnimationFrame(() => {
                             checkOptionState.call(this);
                             setStatusOrRemoveBadges.call(this, "closed");
@@ -1118,7 +1119,7 @@ function attachResizeObserver() {
         });
     });
 
-	requestAnimationFrame(() => {
+
         let parent = this.parentNode;
         while (!(parent instanceof HTMLElement) && parent !== null) {
             parent = parent.parentNode;
@@ -1127,7 +1128,7 @@ function attachResizeObserver() {
         if (parent instanceof HTMLElement) {
             this[resizeObserverSymbol].observe(parent);
         }
-	});
+
 }
 
 /**
@@ -1351,17 +1352,13 @@ function initOptionObserver() {
                     self.updateI18n();
                 } catch (e) {
                     addErrorAttribute(self, e);
-					requestAnimationFrame(() => {
                         setStatusOrRemoveBadges.call(self, "error");
-					});
                 }
                 try {
                     areOptionsAvailableAndInit.call(self);
                 } catch (e) {
                     addErrorAttribute(self, e);
-					requestAnimationFrame(() => {
                         setStatusOrRemoveBadges.call(self, "error");
-					});
                 }
 
                 setSummaryAndControlText.call(self);
@@ -1382,7 +1379,8 @@ function getDefaultTranslation() {
     try {
         const doc = getDocumentTranslations();
         translation.locale = doc.locale;
-	} catch (e) {}
+    } catch (e) {
+    }
 
     return translation;
 }
@@ -2002,7 +2000,8 @@ function gatherState() {
 
     setSelection
         .call(this, selection)
-		.then(() => {})
+        .then(() => {
+        })
         .catch((e) => {
             addErrorAttribute(this, e);
         });
@@ -2031,7 +2030,8 @@ function clearSelection() {
 
     setSelection
         .call(this, [])
-		.then(() => {})
+        .then(() => {
+        })
         .catch((e) => {
             addErrorAttribute(this, e);
         });
@@ -2239,36 +2239,63 @@ function convertSelectionToValue(selection) {
 
 /**
  * @private
- * @param {array|string} selection
- * @return {Promise}
- * @throws {Error} no shadow-root is defined
+ * @param value
+ * @returns {boolean}
+ */
+function isValueIsEmpty(value) {
+    let equivalents = this.getOption("empty.equivalents");
+    if (!isArray(equivalents)) {
+        if (equivalents === undefined) {
+        return false;
+       }
+        equivalents = [equivalents];
+    }
+
+    return equivalents.indexOf(value) !== -1;
+
+}
+
+/**
+ * @private
+ * @param value
+ * @returns {*}
+ */
+function isValueIsEmptyThenGetNormalize(value) {
+    let emptyDefault = null
+    if (this.getOption("type")==="checkbox") {
+        emptyDefault = this.getOption("empty.defaultValueCheckbox");
+    } else {
+        emptyDefault = this.getOption("empty.defaultValueRadio");
+    }
+
+    if (isValueIsEmpty.call(this,value)) {
+        return emptyDefault;
+    }
+
+    return value;
+
+}
+
+/**
+ * @private
+ * @param selection
+ * @returns {Promise<unknown | void>}
  */
 function setSelection(selection) {
+
     if (isString(selection) || isInteger(selection)) {
         const result = convertValueToSelection.call(this, selection);
         selection = result?.selection;
-	} else if (selection === undefined || selection === null) {
-		selection = [];
     }
 
+    selection = isValueIsEmptyThenGetNormalize.call(this,selection);
     validateArray(selection);
-	let ignoreValues = this.getOption("ignoreValues", []);
-	if (!isArray(ignoreValues)) {
-		ignoreValues = [];
-	}
 
     let resultSelection = [];
     for (let i = 0; i < selection.length; i++) {
-		let ignore = false;
 
-		for (const v of ignoreValues) {
-			if (selection[i].value === v) {
-				ignore = true;
-				break;
-			}
-		}
-		if (ignore) {
-			continue;
+        if(isValueIsEmpty.call(this,selection[i].value)) {
+            continue
         }
 
         let l = getSelectionLabel.call(this, selection[i].value);
@@ -2285,6 +2312,7 @@ function setSelection(selection) {
     selection = resultSelection;
 
     this.setOption("selection", selection);
+
     checkOptionState.call(this);
     setSummaryAndControlText.call(this);
 
@@ -2298,7 +2326,7 @@ function setSelection(selection) {
         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
 
     return new Processing(() => {
         const CLASSNAME = "selected";

source/dom/updater.mjs

@@ -29,7 +29,7 @@ import {
 } from "./constants.mjs";
 
 import {Base} from "../types/base.mjs";
-import { isArray, isString, isInstance, isIterable } from "../types/is.mjs";
+import {isArray, isInteger, isString, isInstance, isIterable} from "../types/is.mjs";
 import {Observer} from "../types/observer.mjs";
 import {ProxyObserver} from "../types/proxyobserver.mjs";
 import {validateArray, validateInstance} from "../types/validate.mjs";
@@ -43,9 +43,19 @@ import {
 import {findTargetElementFromEvent} from "./events.mjs";
 import {findDocumentTemplate} from "./template.mjs";
 import {getWindow} from "./util.mjs";
+import {DeadMansSwitch} from "../util/deadmansswitch.mjs";
+import {addErrorAttribute, removeErrorAttribute} from "./error.mjs";
+
 
 export {Updater, addObjectWithUpdaterToElement};
 
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const timerElementEventHandlerSymbol = Symbol("timerElementEventHandler");
+
 /**
  * The updater class connects an object with the DOM. In this way, structures and contents in the DOM can be
  * programmatically adapted via attributes.
@@ -309,11 +319,20 @@ function getControlEventHandler() {
             return;
         }
 
-		queueMicrotask(() => {
+        if (this[timerElementEventHandlerSymbol] instanceof DeadMansSwitch) {
+            try {
+                this[timerElementEventHandlerSymbol].touch();
+                return;
+            } catch (e) {
+                delete this[timerElementEventHandlerSymbol];
+            }
+        }
+
+        this[timerElementEventHandlerSymbol] = new DeadMansSwitch(50, () => {
             try {
                 retrieveAndSetValue.call(this, element);
             } catch (e) {
-				addAttributeToken(element, ATTRIBUTE_ERRORMESSAGE, e.message || `${e}`);
+                addErrorAttribute(element, e);
             }
         });
     };
@@ -383,7 +402,6 @@ function retrieveAndSetValue(element) {
         throw new Error("unsupported object");
     }
 
-	if (isString(value)) {
     const type = element.getAttribute(ATTRIBUTE_UPDATER_BIND_TYPE);
     switch (type) {
         case "number":
@@ -398,47 +416,96 @@ function retrieveAndSetValue(element) {
         case "boolean":
         case "bool":
         case "checkbox":
-				value = value === "true" || value === "1" || value === "on";
+            value = value === "true" || value === "1" || value === "on" || value === true;
             break;
 
         case "string[]":
-				if (value === "") {
+            if (isString(value)) {
+
+                if (value.trim() === "") {
                     value = [];
+                } else {
+                    value = value.split(",").map((v) => `${v}`);
+                }
+            } else if (isInteger(value)) {
+                value = [`${value}`];
+            } else if (value === undefined || value === null) {
+                value = [];
+            } else if (isArray(value)) {
+                value = value.map((v) => `${v}`);
+            } else {
+                throw new Error("unsupported value");
             }
 
-				value = value.split(",").map((v) => `${v}`);
             break;
 
         case "int[]":
         case "integer[]":
-				if (value === "") {
+
+            if (isString(value)) {
+
+                if (value.trim() === "") {
                     value = [];
                 } else {
-					value = value
-						.split(",")
-						.map((v) => {
+                    value = value.split(",").map((v) => {
+                        try {
+                            return parseInt(v, 10);
+                        } catch (e) {
+                        }
+                        return -1;
+                    }).filter((v) => v !== -1);
+                }
+
+            } else if (isInteger(value)) {
+                value = [value];
+            } else if (value === undefined || value === null) {
+                value = [];
+            } else if (isArray(value)) {
+                value = value.split(",").map((v) => {
                     try {
                         return parseInt(v, 10);
-							} catch (e) {}
+                    } catch (e) {
+                    }
                     return -1;
-						})
-						.filter((v) => v !== -1);
+                }).filter((v) => v !== -1);
+            } else {
+                throw new Error("unsupported value");
             }
 
             break;
         case "[]":
         case "array":
         case "list":
+
+            if (isString(value)) {
+                if (value.trim() === "") {
+                    value = [];
+                } else {
                     value = value.split(",");
+                }
+            } else if (isInteger(value)) {
+                value = [value];
+            } else if (value === undefined || value === null) {
+                value = [];
+            } else if (isArray(value)) {
+                // nothing to do
+            } else {
+                throw new Error("unsupported value for array");
+            }
             break;
         case "object":
         case "json":
+
+            if (isString(value)) {
                 value = JSON.parse(value);
+            } else {
+                throw new Error("unsupported value for object");
+            }
+
             break;
         default:
             break;
     }
-	}
 
     const copy = clone(this[internalSymbol].subject.getRealSubject());
 
@@ -560,7 +627,7 @@ function insertElement(change) {
                     containerElement.removeAttribute(ATTRIBUTE_ERRORMESSAGE);
                     value = pipe.run(subject);
                 } catch (e) {
-					containerElement.setAttribute(ATTRIBUTE_ERRORMESSAGE, e.message);
+                    addErrorAttribute(containerElement, e);
                 }
 
                 const dataPath = cmd.split(":").pop();
@@ -606,12 +673,7 @@ function insertElement(change) {
                         try {
                             containerElement.removeChild(node);
                         } catch (e) {
-							containerElement.setAttribute(
-								ATTRIBUTE_ERRORMESSAGE,
-								`${containerElement.getAttribute(ATTRIBUTE_ERRORMESSAGE)}, ${
-									e.message
-								}`.trim(),
-							);
+                            addErrorAttribute(containerElement, e);
                         }
                     }
                 }
@@ -662,7 +724,10 @@ function appendNewDocumentFragment(container, key, ref, path) {
  * @return {void}
  */
 function applyRecursive(node, key, path) {
-	if (node instanceof HTMLElement) {
+    if (!(node instanceof HTMLElement)) {
+        return
+    }
+
     if (node.hasAttribute(ATTRIBUTE_UPDATER_REPLACE)) {
         const value = node.getAttribute(ATTRIBUTE_UPDATER_REPLACE);
         node.setAttribute(
@@ -680,9 +745,11 @@ function applyRecursive(node, key, path) {
     }
 
     for (const [, child] of Object.entries(node.childNodes)) {
+        if (child instanceof HTMLElement) {
             applyRecursive(child, key, path);
         }
     }
+
 }
 
 /**
@@ -770,12 +837,7 @@ function runUpdateContent(container, parts, subject) {
                 try {
                     element.appendChild(value);
                 } catch (e) {
-					element.setAttribute(
-						ATTRIBUTE_ERRORMESSAGE,
-						`${element.getAttribute(ATTRIBUTE_ERRORMESSAGE)}, ${
-							e.message
-						}`.trim(),
-					);
+                    addErrorAttribute(element, e);
                 }
             } else {
                 element.innerHTML = value;
@@ -856,7 +918,7 @@ function runUpdateAttributes(container, parts, subject) {
                     element.removeAttribute(ATTRIBUTE_ERRORMESSAGE);
                     value = pipe.run(subject);
                 } catch (e) {
-					element.setAttribute(ATTRIBUTE_ERRORMESSAGE, e.message);
+                    addErrorAttribute(element, e);
                 }
 
                 if (value === undefined) {
@@ -979,18 +1041,13 @@ function addObjectWithUpdaterToElement(elements, symbol, object, config = {}) {
                 if (typeof callback === "function") {
                     updaterCallbacks.push([name, callback]);
                 } else {
-					addAttributeToken(
-						this,
-						ATTRIBUTE_ERRORMESSAGE,
-						`onUpdaterPipeCallbacks: ${name} is not a function`,
-					);
+                    addErrorAttribute(this, `onUpdaterPipeCallbacks: ${name} is not a function`);
                 }
             }
         } else {
-			addAttributeToken(
+            addErrorAttribute(
                 this,
-				ATTRIBUTE_ERRORMESSAGE,
-				`onUpdaterPipeCallbacks do not return an object with functions`,
+                `onUpdaterPipeCallbacks do not return an object with functions`
             );
         }
     }