@itrocks/autocomplete 0.0.2 → 0.0.3

package/autocomplete.css

@@ -9,6 +9,10 @@
   padding: 0;
   position: absolute;
 }
+.combobox .suggestions:empty {
+  height: 2em;
+  width: 50px;
+}
 .combobox .suggestions > * {
   cursor: pointer;
   list-style: none;

package/autocomplete.d.ts

@@ -26,6 +26,7 @@ export declare class AutoComplete {
 }
 declare class Suggestions {
     combo: AutoComplete;
+    length: number;
     list?: HTMLUListElement;
     constructor(combo: AutoComplete);
     createList(): HTMLUListElement;

package/autocomplete.js

@@ -83,12 +83,15 @@ export class AutoComplete {
     }
     keyDown(event) {
         const suggestions = this.suggestions;
-        if (suggestions.isLastSelected()) {
+        if (!suggestions.isVisible()) {
+            if (suggestions.length > 1) {
+                event.preventDefault();
+                suggestions.show();
+            }
             return;
         }
         event.preventDefault();
-        if (!suggestions.isVisible()) {
-            suggestions.show();
+        if (suggestions.isLastSelected()) {
             return;
         }
         this.suggest(suggestions.selectNext()?.caption);
@@ -177,6 +180,7 @@ export class AutoComplete {
 }
 class Suggestions {
     combo;
+    length = 0;
     list;
     constructor(combo) {
         this.combo = combo;
@@ -256,13 +260,11 @@ class Suggestions {
         return this.createList();
     }
     update(suggestions) {
-        if (!suggestions.length) {
-            return this.hide();
-        }
         let hasSelected = false;
-        const list = this.show();
+        const list = this.list ?? this.createList();
         const selected = list.querySelector('li.selected')?.innerText;
         list.innerHTML = '';
+        this.length = suggestions.length;
         for (const suggestion of suggestions) {
             const item = document.createElement('li');
             item.dataset.id = '' + suggestion.id;
@@ -276,5 +278,13 @@ class Suggestions {
         if (!hasSelected) {
             list.firstElementChild?.classList.add('selected');
         }
+        if (this.length > 1) {
+            if (!this.isVisible())
+                this.show();
+        }
+        else {
+            if (this.isVisible())
+                this.hide();
+        }
     }
 }

package/package.json

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