@itrocks/autocomplete 0.1.9 → 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>);
@@ -34,7 +35,7 @@ export declare class AutoComplete {
     onInputValueChange(): void;
     onKeyDown(event: KeyboardEvent): void;
     onTouchStart(event: Event): void;
-    openSuggestions(event: Event): boolean;
+    openSuggestions(event: Event, force?: boolean): boolean;
     select(): void;
     suggest(value?: string): void;
     updateSuggestions(items: Item[], startsWith?: string): void;

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;
@@ -166,7 +171,7 @@ export class AutoComplete {
     keyDown(event) {
         if (DEBUG)
             console.log('keyDown()');
-        if (this.openSuggestions(event))
+        if (this.openSuggestions(event, true))
             return;
         if (this.suggestions.isLastSelected())
             return;
@@ -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) {
             {
@@ -277,7 +292,7 @@ export class AutoComplete {
     onTouchStart(event) {
         this.openSuggestions(event);
     }
-    openSuggestions(event) {
+    openSuggestions(event, force = false) {
         if (DEBUG)
             console.log('openSuggestions()');
         const suggestions = this.suggestions;
@@ -291,7 +306,7 @@ export class AutoComplete {
                 console.log('OS: isVisible is true => return');
             return false;
         }
-        if ((suggestions.length > 1) || (!this.input.value.length && suggestions.length)) {
+        if (force || (suggestions.length > 1) || (!this.input.value.length && suggestions.length)) {
             if (DEBUG)
                 console.log('OS: has items => show');
             event.preventDefault();
@@ -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.9"
+	"version": "0.1.11"
 }