From d7eda6a7c7f609d3451eda7c44bcf5c93eae833f Mon Sep 17 00:00:00 2001
From: Tim Jacomb <21194782+timja@users.noreply.github.com>
Date: Mon, 21 Oct 2024 19:36:04 +0100
Subject: [PATCH] Use standard dropdowns for combobox (#9462)

Co-authored-by: Zbynek Konecny <zbynek1729@gmail.com>
---
 .../main/resources/lib/form/combobox.jelly    |  5 -
 src/main/js/app.js                            |  2 -
 .../index.js => dropdowns/autocomplete.js}    | 37 +-------
 src/main/js/components/dropdowns/combo-box.js | 93 +++++++++++++++++++
 src/main/js/components/dropdowns/index.js     |  4 +
 src/main/js/components/dropdowns/utils.js     | 31 +++++++
 6 files changed, 132 insertions(+), 40 deletions(-)
 rename src/main/js/components/{autocomplete/index.js => dropdowns/autocomplete.js} (76%)
 create mode 100644 src/main/js/components/dropdowns/combo-box.js

diff --git a/core/src/main/resources/lib/form/combobox.jelly b/core/src/main/resources/lib/form/combobox.jelly
index 51fe7ce0d30f..517e12cd875e 100644
--- a/core/src/main/resources/lib/form/combobox.jelly
+++ b/core/src/main/resources/lib/form/combobox.jelly
@@ -70,11 +70,6 @@ THE SOFTWARE.
   </st:documentation>
   <f:prepareDatabinding/>
   ${descriptor.calcFillSettings(field,attrs)} <!-- this figures out the 'fillUrl' and 'fillDependsOn' attribute -->
-  <st:once>
-    <script type="text/javascript" src="${request.contextPath}/scripts/utilities.js"/>
-    <script type="text/javascript" src="${request.contextPath}/scripts/combobox.js"/>
-  </st:once>
-  <st:adjunct includes="lib.form.combobox.combobox"/>
 
   <!-- mostly pass-through all the attributes -->
   <j:set var="name" value="${attrs.name ?: '_.'+attrs.field}"/>
diff --git a/src/main/js/app.js b/src/main/js/app.js
index 0ac9a97cce38..63a35226d7d4 100644
--- a/src/main/js/app.js
+++ b/src/main/js/app.js
@@ -5,7 +5,6 @@ import Tooltips from "@/components/tooltips";
 import StopButtonLink from "@/components/stop-button-link";
 import ConfirmationLink from "@/components/confirmation-link";
 import Dialogs from "@/components/dialogs";
-import Autocomplete from "@/components/autocomplete";
 
 Dropdowns.init();
 Notifications.init();
@@ -14,4 +13,3 @@ Tooltips.init();
 StopButtonLink.init();
 ConfirmationLink.init();
 Dialogs.init();
-Autocomplete.init();
diff --git a/src/main/js/components/autocomplete/index.js b/src/main/js/components/dropdowns/autocomplete.js
similarity index 76%
rename from src/main/js/components/autocomplete/index.js
rename to src/main/js/components/dropdowns/autocomplete.js
index 9caefc6e242e..b6d982c44911 100644
--- a/src/main/js/components/autocomplete/index.js
+++ b/src/main/js/components/dropdowns/autocomplete.js
@@ -9,32 +9,20 @@ function init() {
     return prev + item + delimiter + " ";
   }
 
-  function validate(e) {
-    if (e.targetUrl) {
-      var method = e.getAttribute("checkMethod") || "post";
-      try {
-        FormChecker.delayedCheck(e.targetUrl(), method, e.targetElement);
-      } catch (x) {
-        console.warn(x);
-        return;
-      }
-    }
-  }
-
   function convertSuggestionToItem(suggestion, e) {
     const delimiter = e.getAttribute("autoCompleteDelimChar");
     const confirm = () => {
       e.value = delimiter
         ? addValue(e.value, suggestion.name, delimiter)
         : suggestion.name;
-      validate(e);
+      Utils.validateDropdown(e);
       e.focus();
     };
     return {
       label: suggestion.name,
       onClick: confirm,
       onKeyPress: (evt) => {
-        if (evt.key == "Tab") {
+        if (evt.key === "Tab") {
           confirm();
           e.dropdown.hide();
           evt.preventDefault();
@@ -43,13 +31,9 @@ function init() {
     };
   }
 
-  function getMaxSuggestionCount(e) {
-    return parseInt(e.dataset["maxsuggestions"]) || 10;
-  }
-
   function createAndShowDropdown(e, suggestions) {
     const items = suggestions
-      .splice(0, getMaxSuggestionCount(e))
+      .splice(0, Utils.getMaxSuggestionCount(e, 10))
       .map((s) => convertSuggestionToItem(s, e));
     if (!e.dropdown) {
       Utils.generateDropdown(
@@ -82,19 +66,6 @@ function init() {
       .then((response) => createAndShowDropdown(e, response.suggestions || []));
   }
 
-  function debounce(callback) {
-    callback.running = false;
-    return () => {
-      if (!callback.running) {
-        callback.running = true;
-        setTimeout(() => {
-          callback();
-          callback.running = false;
-        }, 300);
-      }
-    };
-  }
-
   behaviorShim.specify(
     "INPUT.auto-complete",
     "input-auto-complete",
@@ -111,7 +82,7 @@ function init() {
       );
       e.addEventListener(
         "input",
-        debounce(() => {
+        Utils.debounce(() => {
           updateSuggestions(e);
         }),
       );
diff --git a/src/main/js/components/dropdowns/combo-box.js b/src/main/js/components/dropdowns/combo-box.js
new file mode 100644
index 000000000000..f3edb3f3e032
--- /dev/null
+++ b/src/main/js/components/dropdowns/combo-box.js
@@ -0,0 +1,93 @@
+import behaviorShim from "@/util/behavior-shim";
+import Utils from "@/components/dropdowns/utils";
+
+function init() {
+  function convertSuggestionToItem(suggestion, e) {
+    const confirm = () => {
+      e.value = suggestion.name;
+      Utils.validateDropdown(e);
+      e.focus();
+    };
+    return {
+      label: suggestion.name,
+      onClick: confirm,
+      onKeyPress: (evt) => {
+        if (evt.key === "Tab") {
+          confirm();
+          e.dropdown.hide();
+          evt.preventDefault();
+        }
+      },
+    };
+  }
+
+  function createAndShowDropdown(e, div, suggestions) {
+    const items = suggestions
+      .splice(0, Utils.getMaxSuggestionCount(e, 20))
+      .map((s) => convertSuggestionToItem(s, e));
+    if (!e.dropdown) {
+      Utils.generateDropdown(
+        div,
+        (instance) => {
+          e.dropdown = instance;
+        },
+        true,
+      );
+    }
+    e.dropdown.setContent(Utils.generateDropdownItems(items, true));
+    e.dropdown.show();
+  }
+
+  function updateSuggestions(e, div, items) {
+    const text = e.value.trim();
+
+    let filteredItems = text
+      ? items.filter((item) => item.indexOf(text) === 0)
+      : items;
+
+    const suggestions = filteredItems
+      .filter((item) => item.indexOf(text) === 0)
+      .map((item) => {
+        return { name: item };
+      });
+    createAndShowDropdown(e, div, suggestions || []);
+  }
+
+  behaviorShim.specify("INPUT.combobox2", "combobox", 100, function (e) {
+    // form field with auto-completion support
+    // insert the auto-completion container
+    refillOnChange(e, function (params) {
+      const div = document.createElement("DIV");
+      e.parentNode.insertBefore(div, e.nextElementSibling);
+      e.style.position = "relative";
+
+      const url = e.getAttribute("fillUrl");
+      fetch(url, {
+        headers: crumb.wrap({
+          "Content-Type": "application/x-www-form-urlencoded",
+        }),
+        method: "post",
+        body: new URLSearchParams(params),
+      })
+        .then((rsp) => (rsp.ok ? rsp.json() : {}))
+        .then((items) => {
+          e.addEventListener("focus", () => updateSuggestions(e, div, items));
+
+          // otherwise menu won't hide on tab with nothing selected
+          // needs delay as without that it blocks click selection of an item
+          e.addEventListener("focusout", () =>
+            setTimeout(() => e.dropdown.hide(), 200),
+          );
+
+          e.addEventListener(
+            "input",
+            Utils.debounce(() => {
+              updateSuggestions(e, div, items);
+            }),
+          );
+        });
+    });
+  });
+}
+
+export default { init };
diff --git a/src/main/js/components/dropdowns/index.js b/src/main/js/components/dropdowns/index.js
index 472c548e0425..014569fbc16f 100644
--- a/src/main/js/components/dropdowns/index.js
+++ b/src/main/js/components/dropdowns/index.js
@@ -2,12 +2,16 @@ import Jumplists from "@/components/dropdowns/jumplists";
 import InpageJumplist from "@/components/dropdowns/inpage-jumplist";
 import OverflowButton from "@/components/dropdowns/overflow-button";
 import HeteroLists from "@/components/dropdowns/hetero-list";
+import ComboBox from "@/components/dropdowns/combo-box";
+import Autocomplete from "@/components/dropdowns/autocomplete";
 
 function init() {
   Jumplists.init();
   InpageJumplist.init();
   OverflowButton.init();
   HeteroLists.init();
+  ComboBox.init();
+  Autocomplete.init();
 }
 
 export default { init };
diff --git a/src/main/js/components/dropdowns/utils.js b/src/main/js/components/dropdowns/utils.js
index 27931dc7de32..588e1c232b02 100644
--- a/src/main/js/components/dropdowns/utils.js
+++ b/src/main/js/components/dropdowns/utils.js
@@ -206,8 +206,39 @@ function convertHtmlToItems(children) {
   return items;
 }
 
+function validateDropdown(e) {
+  if (e.targetUrl) {
+    const method = e.getAttribute("checkMethod") || "post";
+    try {
+      FormChecker.delayedCheck(e.targetUrl(), method, e.targetElement);
+    } catch (x) {
+      console.warn(x);
+    }
+  }
+}
+
+function getMaxSuggestionCount(e, defaultValue) {
+  return parseInt(e.dataset["maxsuggestions"]) || defaultValue;
+}
+
+function debounce(callback) {
+  callback.running = false;
+  return () => {
+    if (!callback.running) {
+      callback.running = true;
+      setTimeout(() => {
+        callback();
+        callback.running = false;
+      }, 300);
+    }
+  };
+}
+
 export default {
   convertHtmlToItems,
   generateDropdown,
   generateDropdownItems,
+  validateDropdown,
+  getMaxSuggestionCount,
+  debounce,
 };