From cc30f6a38e7fa74de07842f8c9c8a03d8e2c6d93 Mon Sep 17 00:00:00 2001
From: Volker Schukai <volker.schukai@schukai.com>
Date: Fri, 4 Oct 2024 14:18:02 +0200
Subject: [PATCH] fix: open after lazy load #247
---
development/issues/closed/247.html | 37 ++++++++++++++++++++++++++++++
development/issues/closed/247.mjs | 17 ++++++++++++++
source/components/form/select.mjs | 9 +++++---
3 files changed, 60 insertions(+), 3 deletions(-)
create mode 100644 development/issues/closed/247.html
create mode 100644 development/issues/closed/247.mjs
diff --git a/development/issues/closed/247.html b/development/issues/closed/247.html
new file mode 100644
index 000000000..c0734e069
--- /dev/null
+++ b/development/issues/closed/247.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>select's performance seems to be slow for many entries #247</title>
+ <script src="./247.mjs" type="module"></script>
+</head>
+<body>
+ <h1>Lazy Load should have the option to open the selection immediately after lazy loading #247</h1>
+ <p></p>
+ <ul>
+ <li><a href="https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/247">Issue #247</a></li>
+ <li><a href="/">Back to overview</a></li>
+ </ul>
+ <main>
+
+ <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>
+</body>
+</html>
diff --git a/development/issues/closed/247.mjs b/development/issues/closed/247.mjs
new file mode 100644
index 000000000..bbb4b7a71
--- /dev/null
+++ b/development/issues/closed/247.mjs
@@ -0,0 +1,17 @@
+/**
+* @file development/issues/open/229.mjs
+* @url https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/229
+* @description
+* @issue 247
+*/
+
+import "../../../source/components/style/property.pcss";
+import "../../../source/components/style/color.pcss";
+import "../../../source/components/style/link.pcss";
+import "../../../source/components/style/normalize.pcss";
+import "../../../source/components/style/typography.pcss";
+import "../../../source/components/tree-menu/tree-menu.mjs";
+import "../../../source/components/layout/split-panel.mjs";
+import "../../../source/components/layout/panel.mjs";
+import "../../../source/components/form/select.mjs";
+
diff --git a/source/components/form/select.mjs b/source/components/form/select.mjs
index 64fca45a8..e265079fa 100644
--- a/source/components/form/select.mjs
+++ b/source/components/form/select.mjs
@@ -286,7 +286,6 @@ const FILTER_POSITION_INLINE = "inline";
*/
class Select extends CustomControl {
-
/**
*
*/
@@ -2079,6 +2078,9 @@ function show() {
this.fetch()
.then(() => {
checkOptionState.call(this);
+ requestAnimationFrame(() => {
+ show.call(this);
+ });
})
.catch((e) => {
addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e.message);
@@ -2322,7 +2324,8 @@ function initEventHandler() {
* @return {Select}
*/
function setStatusOrRemoveBadges(suggestion) {
- setTimeout(() => {
+
+ requestAnimationFrame(() => {
const selection = this.getOption("selection");
const clearAllFlag =
@@ -2379,7 +2382,7 @@ function setStatusOrRemoveBadges(suggestion) {
}
return;
}
- }, 2);
+ });
}
/**
--
GitLab