From 2cba504e3b5841c21af996a3276fc98f6b668e85 Mon Sep 17 00:00:00 2001 From: Fabio Manganiello Date: Sun, 14 May 2023 15:07:54 +0200 Subject: [PATCH] Improvements for the autocomplete component. --- .../src/components/elements/Autocomplete.js | 32 ++++++++++++++----- .../http/webapp/src/style/autocomplete.scss | 4 +-- 2 files changed, 26 insertions(+), 10 deletions(-) diff --git a/platypush/backend/http/webapp/src/components/elements/Autocomplete.js b/platypush/backend/http/webapp/src/components/elements/Autocomplete.js index 6c9113770..334972b75 100644 --- a/platypush/backend/http/webapp/src/components/elements/Autocomplete.js +++ b/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) { - if (e.keyCode === 9) { - /*Reset the list if tab has been pressed*/ - closeAllLists(); + inp.addEventListener("keyup", function(e) { + if (["ArrowUp", "ArrowDown", "Tab", "Enter"].indexOf(e.key) >= 0) { + e.stopPropagation(); + } + + 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); diff --git a/platypush/backend/http/webapp/src/style/autocomplete.scss b/platypush/backend/http/webapp/src/style/autocomplete.scss index 6c95e7e2e..6a8c5297f 100644 --- a/platypush/backend/http/webapp/src/style/autocomplete.scss +++ b/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; }