Fix autocomplete issue

app/packs/entrypoints/decidim_term_customizer_admin.js

@@ -2,5 +2,4 @@ import "src/decidim/term_customizer/admin/multifield/component"
 import "src/decidim/term_customizer/admin/constraint_fields"
 // import "app/packs/src/decidim/term_customizer/admin/multifield"
 import "src/decidim/term_customizer/admin/translation_sets_admin"
-import "src/decidim/term_customizer/admin/translations_admin_bulk"
 import "src/decidim/term_customizer/admin/translations_admin"

app/packs/entrypoints/decidim_term_customizer_admin_bulk.js

@@ -0,0 +1 @@
+import "src/decidim/term_customizer/admin/translations_admin_bulk"

app/packs/src/decidim/term_customizer/admin/translations_admin.js

@@ -9,10 +9,6 @@ $(() => {
   let currentSearch = "";
   let selectedTerms = [];
 
-  searchInput.addEventListener("keyup", () => {
-    currentSearch = searchInput.value;
-  });
-
   // Prevent accidental submit on the autocomplete field
   form.addEventListener("submit", (ev) => ev.preventDefault());
 
@@ -49,6 +45,11 @@ $(() => {
     });
   };
 
+  const ac = initiate();
+
+  searchInput.addEventListener("keyup", () => {
+    currentSearch = searchInput.value;
+  });
   // Method for hiding the currently selected items
   const hideSelectedItems = () => {
     const resultsList = searchInput.nextSibling;
@@ -61,8 +62,6 @@ $(() => {
     }
   };
 
-  initiate();
-
   // Currently not possible in Decidim to get notified when the list is
   // modified, so hack it with a MutationObserver.
   // Create an observer instance linked to the callback function
@@ -99,5 +98,16 @@ $(() => {
         resultsElement.classList.add("hide");
       }
     });
+    setTimeout(() => {
+      ac.autocomplete.open();
+    }, 0)
+  });
+
+  document.addEventListener("click", (event) => {
+    if (!searchInput.nextSibling.contains(event.target)) {
+      setTimeout(() => {
+        ac.autocomplete.close();
+      }, 0)
+    }
   });
 });

app/packs/src/decidim/term_customizer/admin/translations_admin_bulk.js

@@ -99,7 +99,7 @@ $(document).ready(function () {
       }
 
       $(".js-bulk-action-form").find(`.js-translation-id-${translationId}`).prop("checked", checked);
-      window.selectedTranslationCountUpdate();
+      window.selectedTranslationsCountUpdate();
     });
 
     $(".js-cancel-bulk-action").on("click", function () {

app/views/decidim/term_customizer/admin/add_translations/index.html.erb

@@ -29,10 +29,11 @@
 
     <div class="filters row">
       <div class="column medium-4">
-        <%= form_tag search_translation_set_add_translations_path, method: :get do %>
+        <%= form_tag search_translation_set_add_translations_path, autocomplete: "off", method: :get do %>
           <div class="filters__search">
             <%= search_field_tag :term, nil, label: false, id: "tc-autocomplete", class: "autocomplete-input input-group-field", placeholder: t(".search"), data: {
               autocomplete: {
+                searchURL: search_translation_set_add_translations_url,
                 searchPromptText: t("autocomplete.search_prompt", scope: "decidim.admin")
               }
             } %>

app/views/decidim/term_customizer/admin/translations/index.html.erb

@@ -82,5 +82,4 @@
   </div>
 </div>
 
-<%#= javascript_pack_tag "decidim/term_customizer/admin/translations_admin_bulk" %>
-<%= javascript_pack_tag "decidim_term_customizer_admin" %>
+<%= javascript_pack_tag "decidim_term_customizer_admin_bulk" %>

config/assets.rb

@@ -8,7 +8,8 @@
 
 # Entrypoints for the module
 Decidim::Webpacker.register_entrypoints(
-  decidim_term_customizer_admin: "#{base_path}/app/packs/entrypoints/decidim_term_customizer_admin.js"
+  decidim_term_customizer_admin: "#{base_path}/app/packs/entrypoints/decidim_term_customizer_admin.js",
+  decidim_term_customizer_admin_bulk: "#{base_path}/app/packs/entrypoints/decidim_term_customizer_admin_bulk.js"
 )
 
 # Stylesheet imports for admin panel