Improvements for the autocomplete component.

platypush/backend/http/webapp/src/components/elements/Autocomplete.js

@@ -2,19 +2,26 @@ function autocomplete(inp, arr, listener) {
     /*the autocomplete function takes two arguments,
     the text field element and an array of possible autocompleted values:*/
     let currentFocus;
+
     /*execute a function when someone writes in the text field:*/
     inp.addEventListener("input", function() {
         let a, b, i, val = this.value;
         /*close any already open lists of autocompleted values*/
         closeAllLists();
-        if (!val) { return false;}
+        if (!val) {
+          return false;
+        }
+
         currentFocus = -1;
+
         /*create a DIV element that will contain the items (values):*/
         a = document.createElement("DIV");
         a.setAttribute("id", this.id + "autocomplete-list");
         a.setAttribute("class", "autocomplete-items");
+
         /*append the DIV element as a child of the autocomplete container:*/
         this.parentNode.appendChild(a);
+
         /*for each item in the array...*/
         for (i = 0; i < arr.length; i++) {
             /*check if the item starts with the same letters as the text field value:*/
@@ -43,10 +50,13 @@ function autocomplete(inp, arr, listener) {
         }
     });
 
-    inp.addEventListener("keydown", function(e) {
+    inp.addEventListener("keyup", function(e) {
-        if (e.keyCode === 9) {
+        if (["ArrowUp", "ArrowDown", "Tab", "Enter"].indexOf(e.key) >= 0) {
-            /*Reset the list if tab has been pressed*/
+            e.stopPropagation();
-            closeAllLists();
+        }
+
+        if (e.key === "Enter") {
+            this.blur();
         }
     });
 
@@ -54,19 +64,21 @@ function autocomplete(inp, arr, listener) {
     inp.addEventListener("keydown", function(e) {
         let x = document.getElementById(this.id + "autocomplete-list");
         if (x) x = x.getElementsByTagName("div");
-        if (e.keyCode === 40) {
+        if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
             /*If the arrow DOWN key is pressed,
             increase the currentFocus variable:*/
             currentFocus++;
             /*and and make the current item more visible:*/
             addActive(x);
-        } else if (e.keyCode === 38) { //up
+            e.preventDefault();
+        } else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) { //up
             /*If the arrow UP key is pressed,
             decrease the currentFocus variable:*/
             currentFocus--;
             /*and and make the current item more visible:*/
             addActive(x);
-        } else if (e.keyCode === 13) {
+            e.preventDefault();
+        } else if (e.key === 'Enter') {
             /*If the ENTER key is pressed, prevent the form from being submitted,*/
             if (currentFocus > -1 && x && x.length) {
                 e.preventDefault();
@@ -77,6 +89,7 @@ function autocomplete(inp, arr, listener) {
             }
         }
     });
+
     function addActive(x) {
         /*a function to classify an item as "active":*/
         if (!x) return false;
@@ -87,12 +100,14 @@ function autocomplete(inp, arr, listener) {
         /*add class "autocomplete-active":*/
         x[currentFocus].classList.add("autocomplete-active");
     }
+
     function removeActive(x) {
         /*a function to remove the "active" class from all autocomplete items:*/
         for (let i = 0; i < x.length; i++) {
             x[i].classList.remove("autocomplete-active");
         }
     }
+
     function closeAllLists(elmnt) {
         /*close all autocomplete lists in the document,
         except the one passed as an argument:*/
@@ -103,6 +118,7 @@ function autocomplete(inp, arr, listener) {
             }
         }
     }
+
     /*execute a function when someone clicks in the document:*/
     document.addEventListener("click", function (e) {
         closeAllLists(e.target);

platypush/backend/http/webapp/src/style/autocomplete.scss

@@ -22,11 +22,11 @@
     background-color: $background-color;
 
     &:hover {
-      background-color: $hover-bg;
+      background-color: $hover-bg-2;
     }
   }
 }
 
 .autocomplete-active {
-  background-color: $selected-bg !important;
+  background-color: $hover-bg-2 !important;
 }