@itrocks/autocomplete 0.1.10 → 0.1.11

package/autocomplete.d.ts

@@ -13,6 +13,7 @@ export declare class AutoComplete {
     lastItems: Item[];
     lastKey: string;
     lastStart: string;
+    lastValue: string;
     options: AutoCompleteOptions;
     suggestions: Suggestions;
     constructor(input: HTMLInputElement, options?: Partial<AutoCompleteOptions>);

package/autocomplete.js

@@ -1,4 +1,4 @@
-const DEBUG = false;
+const DEBUG = true;
 const defaultOptions = {
     allowNew: false,
     fetchAttribute: 'data-fetch'
@@ -10,6 +10,7 @@ export class AutoComplete {
     lastItems = [];
     lastKey = '';
     lastStart = '';
+    lastValue = '';
     options;
     suggestions;
     constructor(input, options = {}) {
@@ -149,9 +150,13 @@ export class AutoComplete {
         const input = this.input;
         const next = input.nextElementSibling;
         const prev = input.previousElementSibling;
-        return ((next instanceof HTMLInputElement) && (next.type === 'hidden')) ? next
+        const idInput = ((next instanceof HTMLInputElement) && (next.type === 'hidden')) ? next
             : ((prev instanceof HTMLInputElement) && (prev.type === 'hidden')) ? prev
                 : undefined;
+        if (!idInput)
+            return undefined;
+        idInput.dataset.lastValue = idInput.value;
+        return idInput;
     }
     initInput(input) {
         input.dataset.lastValue = input.value;
@@ -185,9 +190,19 @@ export class AutoComplete {
     keyEscape(event) {
         if (DEBUG)
             console.log('keyEscape');
+        const input = this.input;
         const suggestions = this.suggestions;
-        if ((this.input.value === '') && !suggestions.isVisible()) {
-            return;
+        if ((input.value === '') && input.dataset.lastValue) {
+            input.value = input.dataset.lastValue;
+            const idInput = this.idInput;
+            if (idInput?.dataset.lastValue) {
+                idInput.value = idInput.dataset.lastValue;
+            }
+            input.setSelectionRange(0, input.value.length);
+            this.onInputValueChange();
+            if (!suggestions.isVisible()) {
+                return;
+            }
         }
         event.preventDefault();
         if (suggestions.isVisible()) {
@@ -239,14 +254,14 @@ export class AutoComplete {
             console.log('onInput()');
         if (document.activeElement !== event.target)
             return;
-        if (this.input.dataset.lastValue === this.input.value)
+        if (this.lastValue === this.input.value)
             return;
         this.fetch(this.lastKey);
     }
     onInputValueChange() {
         if (DEBUG)
             console.log('onInputValueChange()');
-        this.input.dataset.lastValue = this.input.value;
+        this.lastValue = this.input.value;
         this.input.dispatchEvent(new Event('input', { bubbles: true }));
         if (document.activeElement !== this.input) {
             {
@@ -500,6 +515,7 @@ class Suggestions {
             if (!this.list.getAttribute('style')?.length) {
                 this.list.removeAttribute('style');
             }
+            this.list.querySelector('li.selected')?.scrollIntoView({ block: 'nearest' });
             return this.list;
         }
         return this.createList();

package/package.json

@@ -40,5 +40,5 @@
 	},
 	"type": "module",
 	"types": "./autocomplete.d.ts",
-	"version": "0.1.10"
+	"version": "0.1.11"
 }