diff --git a/development/issues/open/228.html b/development/issues/closed/228.html
similarity index 51%
rename from development/issues/open/228.html
rename to development/issues/closed/228.html
index 7d7e499416ba5a41396d02b8d95bfcaac4f64fc7..975e177fcf2c1e85e6a9703f2d56a6291a9054b6 100644
--- a/development/issues/open/228.html
+++ b/development/issues/closed/228.html
@@ -7,7 +7,7 @@
<script src="228.mjs" type="module"></script>
</head>
<body>
-<h1>optimize tree-menu #228</h1>
+<h1> lazy load show wrong label #228</h1>
<p></p>
<ul>
<li class="monster-theme-primary-1"><a
@@ -16,9 +16,21 @@
</ul>
<main>
-
- <monster-select data-monster-option-labels-button="click me">
- <p>Yeah, you opened me!</p>
+ <script type="application/json" data-monster-role="translations">
+ {
+ "51": "xyz",
+ "52": "abc",
+ "53": "def"
+ }
+ </script>
+
+
+ <monster-select
+ data-monster-option-features-lazyload="true"
+ data-monster-option-mapping-labeltemplate="${name} (${value})"
+ data-monster-option-mapping-valuetemplate="${id}"
+ data-monster-option-url="/issue-223.json" >
+
</monster-select>
</main>
diff --git a/development/issues/open/228.mjs b/development/issues/closed/228.mjs
similarity index 100%
rename from development/issues/open/228.mjs
rename to development/issues/closed/228.mjs
diff --git a/development/mock/issue-223.js b/development/mock/issue-223.js
new file mode 100644
index 0000000000000000000000000000000000000000..2860e795cb2518c867092f663f88d607681d468b
--- /dev/null
+++ b/development/mock/issue-223.js
@@ -0,0 +1,77 @@
+const json1 =
+ `[
+ {
+ "id": 1000,
+ "name": "order 1",
+ "fieldA": "value A1",
+ "fieldB": "value B1"
+ },
+ {
+ "id": 1001,
+ "name": "order 2",
+ "fieldA": "value A2",
+ "fieldB": "value B2"
+ },
+
+ {
+ "id": 2000,
+ "name": "order 21",
+ "fieldA": "value 2A1",
+ "fieldB": "value 2B1"
+ },
+ {
+ "id": 2001,
+ "name": "order 22",
+ "fieldA": "value 2A2",
+ "fieldB": "value 2B2"
+ },
+ {
+ "id": 2002,
+ "name": "order 23",
+ "fieldA": "value 2A3",
+ "fieldB": "value 2B3"
+ },
+ {
+ "id": 2003,
+ "name": "order 24",
+ "fieldA": "value 2A4",
+ "fieldB": "value 2B4"
+ },
+ {
+ "id": 2004,
+ "name": "order 25",
+ "fieldA": "value 2A5",
+ "fieldB": "value 2B5"
+ },
+ {
+ "id": 2005,
+ "name": "order 26",
+ "fieldA": "value 2A6",
+ "fieldB": "value 2B6"
+ }
+ ]`;
+
+// check if json is valid
+JSON.parse(json1)
+
+const requestDelay = 1000
+
+export default [
+ {
+ url: '/issue-223.json',
+ method: 'get',
+ rawResponse: async (req, res) => {
+ res.setHeader('Content-Type', 'application/json')
+ res.statusCode = 200
+
+ setTimeout(function() {
+ res.end(json1)
+ }, requestDelay);
+
+
+ },
+
+ },
+
+
+];
\ No newline at end of file
diff --git a/source/components/form/select.mjs b/source/components/form/select.mjs
index e9708ee6234d07007233c1a0fd37394bc5032687..64fca45a8eeed743db79ad02c336180d142b89f4 100644
--- a/source/components/form/select.mjs
+++ b/source/components/form/select.mjs
@@ -285,8 +285,10 @@ const FILTER_POSITION_INLINE = "inline";
* @fires monster-changed
*/
class Select extends CustomControl {
+
+
/**
- * @extends CustomControl
+ *
*/
constructor() {
super();
@@ -311,7 +313,7 @@ class Select extends CustomControl {
* // ↦ ['1','2']
* ```
*
- * @property {string|array}
+ * @returns {string}
*/
get value() {
return convertSelectionToValue.call(this, this.getOption("selection"));
@@ -513,7 +515,9 @@ class Select extends CustomControl {
}
if (self.getOption("url") !== null && !lazyLoadFlag) {
- self.fetch();
+ self.fetch().catch((e) => {
+ addAttributeToken(self, ATTRIBUTE_ERRORMESSAGE, `${e}`);
+ });
}
let lastValue = self.value;
@@ -2006,11 +2010,11 @@ function fetchData(url) {
let delayWatch = false;
// if fetch short time, do not show loading badge, because of flickering
- setTimeout(() => {
+ requestAnimationFrame(() => {
if (delayWatch === true) return;
setStatusOrRemoveBadges.call(this, "loading");
delayWatch = true;
- }, 500);
+ });
url = new Formatter({ filter: this.getOption("filter.defaultValue") }).format(
url,
@@ -2032,7 +2036,7 @@ function fetchData(url) {
try {
return Promise.resolve(JSON.parse(String(text)));
} catch (e) {
- throw new TypeError("the result cannot be parsed");
+ throw new TypeError("the result cannot be parsed, check the URL");
}
})
.catch((e) => {
diff --git a/source/i18n/translations.mjs b/source/i18n/translations.mjs
index 2d511adc2755d8d53ec2b4d73524b67e6feb5df9..705b2806d4229e4a33bf5eb9ffb945caa0aff07d 100644
--- a/source/i18n/translations.mjs
+++ b/source/i18n/translations.mjs
@@ -217,10 +217,9 @@ class Translations extends Base {
* @param {HTMLElement|undefined} [element] - Element to search for translations. Default: element with objectlink @schukai/monster/i18n/translations@@link.
* @returns {Translations}
* @throws {Error} Element is not an HTMLElement.
- * @throws {Error} Cannot find element with translations. Add a translations object to the document.
+ * @throws {Error} Cannot find the element with translations. Add the translation object to the document.
* @throws {Error} This element has no translations.
* @throws {Error} Missing translations.
- * @memberOf Monster.I18n
*/
function getDocumentTranslations(element) {
const d = getDocument();
@@ -231,7 +230,7 @@ function getDocumentTranslations(element) {
);
if (element === null) {
throw new Error(
- "Cannot find element with translations. Add a translations object to the document.",
+ "Cannot find the element with translations. Add the translation object to the document.",
);
}
}