@itrocks/autocomplete 0.1.1 → 0.1.3

package/autocomplete.css

@@ -7,6 +7,7 @@
   margin-top: -1px;
   padding: 0;
   position: absolute;
+  top: 100%;
   z-index: 1;
 }
 .combobox .suggestions:empty {

package/autocomplete.d.ts

@@ -23,6 +23,7 @@ export declare class AutoComplete {
     onInput(event: Event): void;
     onInputValueChange(): void;
     onKeyDown(event: KeyboardEvent): void;
+    select(): void;
     suggest(value?: string): void;
 }
 declare class Suggestions {
@@ -36,7 +37,7 @@ declare class Suggestions {
     isFirstSelected(): boolean | null | undefined;
     isLastSelected(): boolean | null | undefined;
     isVisible(): boolean | undefined;
-    onClick(event: MouseEvent): void;
+    onPointerDown(event: MouseEvent): void;
     removeList(): void;
     selected(item?: HTMLLIElement | null): Item | null;
     selectFirst(): void;

package/autocomplete.js

@@ -136,20 +136,10 @@ export class AutoComplete {
         if (DEBUG)
             console.log('keyEnter()');
         const suggestions = this.suggestions;
-        if (!suggestions.isVisible()) {
+        if (!suggestions.isVisible())
             return;
-        }
         event.preventDefault();
-        const suggestion = suggestions.selected();
-        if (!suggestion) {
-            return;
-        }
-        if (DEBUG)
-            console.log('  input =', suggestion.caption);
-        this.input.value = suggestion.caption;
-        this.onInputValueChange();
-        this.autoIdInputValue();
-        suggestions.hide();
+        this.select();
     }
     keyEscape(event) {
         if (DEBUG)
@@ -226,6 +216,18 @@ export class AutoComplete {
                 return this.keyEnter(event);
         }
     }
+    select() {
+        const suggestions = this.suggestions;
+        const suggestion = suggestions.selected();
+        if (!suggestion)
+            return;
+        if (DEBUG)
+            console.log('  input =', suggestion.caption);
+        this.input.value = suggestion.caption;
+        this.onInputValueChange();
+        this.autoIdInputValue();
+        suggestions.hide();
+    }
     suggest(value) {
         if (DEBUG)
             console.log('suggest()', value);
@@ -263,7 +265,7 @@ class Suggestions {
         input.insertAdjacentElement('afterend', list);
         if (DEBUG)
             console.log('Suggestions.prepareClic');
-        list.addEventListener('click', event => this.onClick(event));
+        list.addEventListener('pointerdown', event => this.onPointerDown(event));
         return list;
     }
     first() {
@@ -293,9 +295,9 @@ class Suggestions {
     isVisible() {
         return this.list && (this.list.style.display !== 'none');
     }
-    onClick(event) {
+    onPointerDown(event) {
         if (DEBUG)
-            console.log('Suggestions.onClick()', event.button);
+            console.log('Suggestions.onPointerDown()', event.button);
         if (event.button !== 0)
             return;
         if (!(event.target instanceof Element))
@@ -306,24 +308,20 @@ class Suggestions {
             console.log('  item', item, 'list', list);
         if (!item || !list)
             return;
+        if (DEBUG)
+            console.log('  select', item);
         this.unselect();
         item.classList.add('selected');
-        if (DEBUG)
-            console.log('  selected', item);
-        this.combo.keyEnter(event);
+        this.combo.select();
+        event.preventDefault();
     }
     removeList() {
         if (DEBUG)
             console.log('Suggestions.removeList()');
-        setTimeout(() => this.hide(), 100);
-        setTimeout(() => {
-            if (DEBUG)
-                console.log('  list.remove()');
-            if (!this.list || (this.list.style.display !== 'none'))
-                return;
-            this.list.remove();
-            this.list = undefined;
-        }, 200);
+        if (!this.list)
+            return;
+        this.list.remove();
+        this.list = undefined;
     }
     selected(item = null) {
         item ??= this.list?.querySelector('li.selected') ?? null;

package/package.json

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