@itrocks/autocomplete 0.1.3 → 0.1.4

package/autocomplete.css

@@ -1,30 +1,26 @@
-.combobox input[data-type=object] {
-  display: block;
-}
-.combobox .suggestions {
+.autocomplete + .suggestions {
   background: white;
   border: 1px solid #ddd;
   margin-top: -1px;
   padding: 0;
   position: absolute;
-  top: 100%;
   z-index: 1;
 }
-.combobox .suggestions:empty {
+.autocomplete + .suggestions:empty {
   height: 2em;
   width: 50px;
 }
-.combobox .suggestions > * {
+.autocomplete + .suggestions > * {
   cursor: pointer;
   list-style: none;
   padding: 0.5em 1em;
 }
-.combobox .suggestions > *:hover {
+.autocomplete + .suggestions > *:hover {
   background: #efe;
 }
-.combobox .suggestions > *.selected {
+.autocomplete + .suggestions > *.selected {
   background: #edf;
 }
-.combobox .suggestions > *.selected:hover {
+.autocomplete + .suggestions > *.selected:hover {
   background: #dce;
 }

package/autocomplete.d.ts

@@ -15,6 +15,7 @@ export declare class AutoComplete {
     fetch(): void;
     initIdInput(): HTMLInputElement | undefined;
     initInput(input: HTMLInputElement): HTMLInputElement;
+    initParent(): void;
     keyDown(event: Event): void;
     keyEnter(event: Event): void;
     keyEscape(event: Event): void;

package/autocomplete.js

@@ -11,6 +11,7 @@ export class AutoComplete {
         this.input = this.initInput(input);
         this.idInput = this.initIdInput();
         this.suggestions = new Suggestions(this);
+        this.initParent();
         input.addEventListener('blur', event => this.onBlur(event));
         input.addEventListener('keydown', event => this.onKeyDown(event));
         input.addEventListener('input', event => this.onInput(event));
@@ -112,6 +113,12 @@ export class AutoComplete {
         input.dataset.lastValue = input.value;
         return input;
     }
+    initParent() {
+        const parent = this.input.parentElement;
+        if (!parent)
+            return;
+        parent.style.position = 'relative';
+    }
     keyDown(event) {
         if (DEBUG)
             console.log('keyDown()');
@@ -217,6 +224,8 @@ export class AutoComplete {
         }
     }
     select() {
+        if (DEBUG)
+            console.log('select()');
         const suggestions = this.suggestions;
         const suggestion = suggestions.selected();
         if (!suggestion)
@@ -254,29 +263,22 @@ class Suggestions {
     }
     createList() {
         if (DEBUG)
-            console.log('Suggestions.createList()');
+            console.log('createList()');
         const list = this.list = document.createElement('ul');
         list.classList.add('suggestions');
-        let input = this.combo.input;
-        const idInput = input.nextElementSibling;
-        if ((idInput instanceof HTMLInputElement) && (idInput.type === 'hidden')) {
-            input = idInput;
-        }
-        input.insertAdjacentElement('afterend', list);
-        if (DEBUG)
-            console.log('Suggestions.prepareClic');
+        this.combo.input.insertAdjacentElement('afterend', list);
         list.addEventListener('pointerdown', event => this.onPointerDown(event));
         return list;
     }
     first() {
         if (DEBUG)
-            console.log('Suggestions.first()');
+            console.log('first()');
         const item = this.list?.firstElementChild ?? null;
         return item && { caption: item.innerText, id: +(item.dataset.id ?? 0) };
     }
     hide() {
         if (DEBUG)
-            console.log('Suggestions.hide()');
+            console.log('hide()');
         const list = this.list;
         if (!list)
             return;
@@ -297,7 +299,7 @@ class Suggestions {
     }
     onPointerDown(event) {
         if (DEBUG)
-            console.log('Suggestions.onPointerDown()', event.button);
+            console.log('onPointerDown()', event.button);
         if (event.button !== 0)
             return;
         if (!(event.target instanceof Element))
@@ -317,7 +319,7 @@ class Suggestions {
     }
     removeList() {
         if (DEBUG)
-            console.log('Suggestions.removeList()');
+            console.log('removeList()');
         if (!this.list)
             return;
         this.list.remove();
@@ -326,7 +328,7 @@ class Suggestions {
     selected(item = null) {
         item ??= this.list?.querySelector('li.selected') ?? null;
         if (DEBUG)
-            console.log('Suggestions.selected()', item && { caption: item.innerText, id: +(item.dataset.id ?? 0) });
+            console.log('selected()', item && { caption: item.innerText, id: +(item.dataset.id ?? 0) });
         return item && { caption: item.innerText, id: +(item.dataset.id ?? 0) };
     }
     selectFirst() {
@@ -369,11 +371,16 @@ class Suggestions {
             console.log('show()');
         if (this.list) {
             this.list.style.removeProperty('display');
+            if (!this.list.getAttribute('style')?.length) {
+                this.list.removeAttribute('style');
+            }
             return this.list;
         }
         return this.createList();
     }
     unselect(item = this.list?.querySelector('li.selected')) {
+        if (DEBUG)
+            console.log('unselect()');
         if (!item)
             return;
         const classList = item.classList;

package/package.json

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