fix: If a value is specified in the select, it is now also displayed with a...

fix: If a value is specified in the select, it is now also displayed with a label from the options. #212

fix: If a value is specified in the select, it is now also displayed with a...
dc7d1cb5 · Volker Schukai · 45f8a4bd · dc7d1cb5 · dc7d1cb5 · dc7d1cb5
Verified Commit dc7d1cb5 authored 11 months ago by Volker Schukai
--- a/development/issues/closed/212.html
+++ b/development/issues/closed/212.html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>select label is not translated when the value is transferred #212</title>
+    <script src="./212.mjs" type="module"></script>
+</head>
+<body>
+<h1>select label is not translated when the value is transferred #212</h1>
+<p>select label is not translated when the value is transferred</p>
+<ul>
+    <li><a href="https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/212">Issue #212</a></li>
+    <li><a href="/">Back to overview</a></li>
+</ul>
+<main>
+
+    <monster-select value="1000"
+                    data-monster-option-url="/issue-212.json"
+                    data-monster-option-features-lazyload="true"
+                    data-monster-option-mapping-labeltemplate="name"
+                    data-monster-option-mapping-valuetemplate="id"
+    ></monster-select>
+
+</main>
+</body>
+</html>
--- a/development/issues/closed/212.mjs
+++ b/development/issues/closed/212.mjs
+/**
+ * @file development/issues/open/212.mjs
+ * @url https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/212
+ * @description select label is not translated when the value is transferred
+ * @issue 212
+ */
+
+import "../../../source/components/style/property.pcss";
+import "../../../source/components/style/normalize.pcss";
+import "../../../source/components/style/typography.pcss";
+import "../../../source/components/style/link.pcss";
+import "../../../source/components/style/color.pcss";
+import "../../../source/components/form/select.mjs";
--- a/source/components/form/select.mjs
+++ b/source/components/form/select.mjs
@@ -696,20 +696,21 @@ class Select extends CustomControl {

 							let result;
 							const selection = this.getOption("selection");
+							let newValue = [];
 							if (selection) {
-								result = setSelection.call(this, selection);
+								newValue = selection
 							} else if (this.hasAttribute("value")) {
-								result = setSelection.call(this, this.getAttribute("value"));
-							} else {
-								result = setSelection.call(this, []);
+								newValue = this.getAttribute("value");
 							}

+							result = setSelection.call(this, newValue);
 							setTimeout(() => {
+								checkOptionState.call(this);
 								setStatusOrRemoveBadges.call(this, "closed");
-								resolve();
+								resolve(result);
 							}, 10);

-							return result;
+							return
 						}

 						setStatusOrRemoveBadges.call(this, "error");
@@ -1865,6 +1866,7 @@ function areOptionsAvailableAndInit() {
 * @throws {Error} no shadow-root is defined
 */
 function checkOptionState() {
+	
 	if (!this.shadowRoot) {
 		throw new Error("no shadow-root is defined");
 	}
@@ -1889,6 +1891,8 @@ function checkOptionState() {
 			if (e.checked !== false) e.checked = false;
 		}
 	}
+	
+	
 }

 /**
@@ -1972,7 +1976,16 @@ function setSelection(selection) {
 		selection = [];
 	}

-	this.setOption("selection", validateArray(selection));
+	validateArray(selection)
+	
+	for (let i = 0; i < selection.length; i++) {
+		selection[i] = {
+			label: getSelectionLabel.call(this, selection[i].value),
+			value: selection[i].value,
+		};
+	}
+
+	this.setOption("selection", selection);
 	checkOptionState.call(this);

 	try {
@@ -2101,7 +2114,9 @@ function show() {
 		setStatusOrRemoveBadges.call(this, "loading");
 		
 		new Processing(200, () => {
-			this.fetch().catch((e) => {
+			this.fetch().then(() => {
+					checkOptionState.call(this);
+				}).catch((e) => {
 				addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e.message);
 				setStatusOrRemoveBadges.call(this, "error");
 			});