Fix on missing autocomplete function after switching between textarea and input

src/js/filters.mjs

@@ -3,7 +3,7 @@ import { userData, handleError, translations, setUserData, startBuilding, _paq }
 import { items, generateGroups, generateTable } from "./todos.mjs";
 import { isToday, isPast, isFuture } from "./date.mjs";
 
-const modalFormInput = document.getElementById("modalFormInput");
+//const modalFormInput = document.getElementById("modalFormInput");
 const todoTableSearch = document.getElementById("todoTableSearch");
 const autoCompleteContainer = document.getElementById("autoCompleteContainer");
 const todoFilters = document.getElementById("todoFilters");
@@ -383,16 +383,16 @@ function generateFilterButtons(category, autoCompleteValue, autoCompletePrefix,
         todoFiltersItem.addEventListener("click", () => {
           if(autoCompleteValue) {
             // remove composed filter first, then add selected filter
-            modalFormInput.value = modalFormInput.value.slice(0, caretPosition-autoCompleteValue.length) + todoFiltersItem.getAttribute("data-filter") + modalFormInput.value.slice(caretPosition) + " ";
+            document.getElementById("modalFormInput").value = document.getElementById("modalFormInput").value.slice(0, caretPosition-autoCompleteValue.length-1) + autoCompletePrefix + todoFiltersItem.getAttribute("data-filter") + document.getElementById("modalFormInput").value.slice(caretPosition) + " ";
           } else {
             // add button data value to the exact caret position
-            modalFormInput.value = [modalFormInput.value.slice(0, caretPosition), todoFiltersItem.getAttribute('data-filter'), modalFormInput.value.slice(caretPosition)].join('') + " ";
+            document.getElementById("modalFormInput").value = [document.getElementById("modalFormInput").value.slice(0, caretPosition), todoFiltersItem.getAttribute('data-filter'), document.getElementById("modalFormInput").value.slice(caretPosition)].join('') + " ";
           }
           // hide the suggestion container after the filter has been selected
           autoCompleteContainer.blur();
           autoCompleteContainer.classList.remove("is-active");
           // put focus back into input so user can continue writing
-          modalFormInput.focus();
+          document.getElementById("modalFormInput").focus();
           // trigger matomo event
           if(userData.matomoEvents) _paq.push(["trackEvent", "Suggestion-box", "Click on filter tag", category]);
         });

src/js/form.mjs

@@ -14,7 +14,7 @@ const modalForm = document.getElementById("modalForm");
 const modalFormInputResize = document.getElementById("modalFormInputResize");
 const modalBackground = document.querySelectorAll('.modal-background');
 const modalClose = document.querySelectorAll('.close');
-const modalFormInput = document.getElementById("modalFormInput");
+//const modalFormInput = document.getElementById("modalFormInput");
 const priorityPicker = document.getElementById("priorityPicker");
 const btnItemStatus = document.getElementById("btnItemStatus");
 
@@ -165,7 +165,7 @@ function modalFormInputEvent() {
   }
   let autoCompleteValue ="";
   let autoCompletePrefix = "";
-  let caretPosition = getCaretPosition(modalFormInput);
+  let caretPosition = getCaretPosition(document.getElementById("modalFormInput"));
   let autoCompleteCategory = "";
   if((document.getElementById("modalFormInput").value.charAt(caretPosition-2) === " " || document.getElementById("modalFormInput").value.charAt(caretPosition-2) === "\n") && (document.getElementById("modalFormInput").value.charAt(caretPosition-1) === "@" || document.getElementById("modalFormInput").value.charAt(caretPosition-1) === "+")) {
     autoCompleteValue = document.getElementById("modalFormInput").value.substr(caretPosition, document.getElementById("modalFormInput").value.lastIndexOf(" ")).split(" ").shift();
@@ -454,7 +454,7 @@ function toggleInputSize(type) {
   document.getElementById("modalFormInput").addEventListener("keyup", e => {
     modalFormInputEvent();
     // do not show suggestion container if Escape has been pressed
-    if(e.key==="Escape") return false;
+    //if(e.key==="Escape") return false;
   });
   document.getElementById("modalFormInput").focus();
 }

src/render.js

@@ -600,8 +600,11 @@ function registerKeyboardShortcuts() {
         }
       });
     });
-    autoCompleteContainer.addEventListener ("keydown", function() {
-      if(event.key === "Escape") this.classList.remove("is-active")
+    autoCompleteContainer.addEventListener ("keyup", function() {
+      if(event.key === "Escape") {
+        this.classList.remove("is-active");
+        modalFormInput.focus();
+      }
     });
     return Promise.resolve("Success: Keyboard shortcuts registered");
   } catch(error) {