allow tag addition and friend search with "Enter"

Previously, pressing enter in those text boxes triggered the form to be
submitted. This was rather unintuitive, therefore Enter now triggers the
correct action (add a tag or search for friends).

1 files changed, 45 insertions, 29 deletions

diff --git a/fietsboek/static/fietsboek.js b/fietsboek/static/fietsboek.js
index 4a4eabf..d58da60 100644
--- a/fietsboek/static/fietsboek.js
+++ b/fietsboek/static/fietsboek.js
@@ -22,6 +22,44 @@ function tagClicked(event) {
 addHandler(".tag-badge", "click", tagClicked);
 
 /**
+ * Handler to add a new tag when the button is pressed.
+ */
+function addTag() {
+  const newTag = document.querySelector("#new-tag");
+  const node = document.createElement("span");
+  node.classList.add("tag-badge");
+  node.classList.add("badge");
+  node.classList.add("rounded-pill");
+  node.classList.add("bg-info");
+  node.classList.add("text-dark");
+  node.addEventListener("click", tagClicked);
+  const text = document.createTextNode(newTag.value);
+  node.appendChild(text);
+  const icon = document.createElement("i");
+  icon.classList.add("bi");
+  icon.classList.add("bi-x");
+  node.appendChild(icon);
+  const input = document.createElement("input");
+  input.hidden = true;
+  input.name = "tag[]";
+  input.value = newTag.value;
+  node.appendChild(input);
+  document.querySelector("#formTags").appendChild(node);
+  const space = document.createTextNode(" ");
+  document.querySelector("#formTags").appendChild(space);
+  newTag.value = "";
+}
+
+addHandler("#add-tag-btn", "click", addTag);
+// Also add a tag when enter is pressed
+addHandler("#new-tag", "keypress", (event) => {
+  if (event.keyCode == 13) {
+    event.preventDefault();
+    addTag();
+  }
+});
+
+/**
  * Function to check for password validity.
  *
  * @param main - The actual entered password.
@@ -105,6 +143,13 @@ function searchFriends() {
 }
 
 addHandler("#add-friend-btn", "click", () => searchFriends());
+// Also trigger the search on Enter keypress
+addHandler("#friendSearchQuery", "keypress", (event) => {
+  if (event.keyCode == 13) {
+    event.preventDefault();
+    searchFriends();
+  }
+});
 
 /**
  * Handler for when a "Remove friend" button is clicked.
@@ -244,35 +289,6 @@ addHandler(".archive-checkbox", "change", () => {
 
 document.addEventListener('DOMContentLoaded', function() {
   window.fietsboekImageIndex = 0;
-  /* Enable the "Add tag" button in the track edit page */
-  const $ = (selector) => document.querySelector(selector);
-  const button = $("#add-tag-btn");
-  if (button) {
-    button.addEventListener('click', function() {
-      const node = document.createElement("span");
-      node.classList.add("tag-badge");
-      node.classList.add("badge");
-      node.classList.add("rounded-pill");
-      node.classList.add("bg-info");
-      node.classList.add("text-dark");
-      node.addEventListener("click", tagClicked);
-      const text = document.createTextNode($("#new-tag").value);
-      node.appendChild(text);
-      const icon = document.createElement("i");
-      icon.classList.add("bi");
-      icon.classList.add("bi-x");
-      node.appendChild(icon);
-      const input = document.createElement("input");
-      input.hidden = true;
-      input.name = "tag[]";
-      input.value = $("#new-tag").value;
-      node.appendChild(input);
-      $("#formTags").appendChild(node);
-      const space = document.createTextNode(" ");
-      $("#formTags").appendChild(space);
-      $("#new-tag").value = "";
-    });
-  }
 
   /* Enable tooltips */
   const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));