autocomplete behavior

Dispenser-Projects · Apr 17, 2022 · 5da897a · 5da897a
1 parent 017511e
commit 5da897a
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 38 deletions.
diff --git a/src/sidebar.ts b/src/sidebar.ts
@@ -144,11 +144,14 @@ function autocomplete(textInput: HTMLInputElement, arr: string[]) {
     let selectedItem: HTMLElement = null
     const styleSelectedItem = "selected"
 
-    function selectAutocomplete(target: HTMLElement){
+    function selectAutocomplete(target: HTMLElement, validate: boolean = true){
         if ( !(target) ){return;}
-        textInput.value = target.dataset.name
+        selectItem(target)
+        textInput.value = selectedItem.dataset.name
         closeAutocompleteList()
-        validateButton.click()
+        if (validate){
+            validateButton.click()
+        }
     }
 
     function deselectItem(){
@@ -174,7 +177,6 @@ function autocomplete(textInput: HTMLInputElement, arr: string[]) {
 
         let b = document.createElement("li");
         b.setAttribute('role', 'option')
-        b.classList.add('text-text/40')
         b.appendChild(document.createTextNode(result.id.slice(0, result.startIndex)))
         let ba = document.createElement("span")
         ba.classList.add('text-text')
@@ -218,7 +220,7 @@ function autocomplete(textInput: HTMLInputElement, arr: string[]) {
             .forEach(v => autocompleteList.append(v))
 
         calculateHeightAutocompleteList()
-        autocompleteList.scrollTo({top: 0});
+        selectItem(autocompleteList.firstElementChild)
     }
 
     function wordStartWith(input: string, id: string): MatchResult | undefined {
@@ -238,21 +240,9 @@ function autocomplete(textInput: HTMLInputElement, arr: string[]) {
         selectedItem = target
         selectedItem.classList.add(styleSelectedItem)
 
-        textInput.value = selectedItem.dataset.name
-        textInput.focus()
-        textInput.selectionStart = 0
-        textInput.selectionEnd = textInput.value.length;
-
         selectedItem.scrollIntoView({behavior: "smooth", block: "nearest", inline: "nearest"})
     }
 
-    let userLastInput: string
-    function returnToLastUserValue(){
-        textInput.value = userLastInput
-        deselectItem()
-        textInput.focus()
-    }
-
     function textInputKey(event: KeyboardEvent) {
         switch (event.key){
             case "ArrowDown":
@@ -263,13 +253,11 @@ function autocomplete(textInput: HTMLInputElement, arr: string[]) {
                             selectItem(selectedItem.nextElementSibling)
                             break
                         }
-                        userLastInput = textInput.value
                         selectItem(autocompleteList.firstElementChild)
                         break
                     case "ArrowUp":
-                        if (autocompleteList.firstElementChild == selectedItem && userLastInput){
+                        if (autocompleteList.firstElementChild == selectedItem){
                             event.preventDefault()
-                            returnToLastUserValue()
                             return
                         }
                         if (selectedItem && selectedItem.previousElementSibling){
@@ -284,33 +272,21 @@ function autocomplete(textInput: HTMLInputElement, arr: string[]) {
 
             case "Enter":
                 selectAutocomplete(selectedItem)
-                validateButton.click()
                 textInput.blur()
                 event.preventDefault()
                 break
             case "Escape":
                 event.preventDefault()
-                if (selectedItem && userLastInput){
-                    returnToLastUserValue()
-                    break
-                }
                 textInput.blur()
                 break
+            case "Tab":
+                event.preventDefault()
+                selectAutocomplete(selectedItem, false)
+                break
         }
     }
 
-    textInput.onkeydown = textInputKey
-
-    autocompleteList.onfocus = function(event: FocusEvent){
-        if (selectedItem){
-            validateButton.focus()
-            return
-        }
-        event.preventDefault();
-        selectItem(autocompleteList.firstElementChild)
-    }
-
-    autocompleteList.onkeydown = textInputKey
+    textInput.onkeydown = autocompleteList.onkeydown = textInputKey
 
     function closeAutocompleteList(){
         autocompleteList.classList.add("hidden")

diff --git a/src/styles/sidebar.css b/src/styles/sidebar.css
@@ -13,7 +13,7 @@
 }
 
 .autocomplete-list li{
-    @apply px-4 py-2 cursor-pointer w-full truncate;
+    @apply px-4 py-2 cursor-pointer w-full truncate text-text/40;
 }
 
 .autocomplete-list li:hover{