@itrocks/autocomplete 0.1.4 → 0.1.6

package/autocomplete.css

@@ -4,6 +4,7 @@
   margin-top: -1px;
   padding: 0;
   position: absolute;
+  user-select: none;
   z-index: 1;
 }
 .autocomplete + .suggestions:empty {

package/autocomplete.d.ts

@@ -24,21 +24,32 @@ export declare class AutoComplete {
     onInput(event: Event): void;
     onInputValueChange(): void;
     onKeyDown(event: KeyboardEvent): void;
+    onTouchStart(event: Event): void;
+    openSuggestions(event: Event): boolean;
     select(): void;
     suggest(value?: string): void;
 }
 declare class Suggestions {
-    combo: AutoComplete;
+    autoComplete: AutoComplete;
     length: number;
     list?: HTMLUListElement;
-    constructor(combo: AutoComplete);
+    pointerStart?: {
+        id: number;
+        item: HTMLLIElement;
+        x: number;
+        y: number;
+    };
+    constructor(autoComplete: AutoComplete);
     createList(): HTMLUListElement;
     first(): Item | null;
     hide(): void;
     isFirstSelected(): boolean | null | undefined;
     isLastSelected(): boolean | null | undefined;
     isVisible(): boolean | undefined;
-    onPointerDown(event: MouseEvent): void;
+    onPointerDown(event: PointerEvent): void;
+    onPointerCancel(_event: PointerEvent): void;
+    onPointerMove(event: PointerEvent): void;
+    onPointerUp(event: PointerEvent): void;
     removeList(): void;
     selected(item?: HTMLLIElement | null): Item | null;
     selectFirst(): void;

package/autocomplete.js

@@ -15,6 +15,7 @@ export class AutoComplete {
         input.addEventListener('blur', event => this.onBlur(event));
         input.addEventListener('keydown', event => this.onKeyDown(event));
         input.addEventListener('input', event => this.onInput(event));
+        input.addEventListener('touchstart', event => this.onTouchStart(event));
     }
     autoComplete() {
         if (DEBUG)
@@ -122,22 +123,11 @@ export class AutoComplete {
     keyDown(event) {
         if (DEBUG)
             console.log('keyDown()');
-        const suggestions = this.suggestions;
-        if (!suggestions.length) {
-            this.fetch();
-        }
-        if (!suggestions.isVisible()) {
-            if (suggestions.length > 1) {
-                event.preventDefault();
-                suggestions.show();
-            }
+        if (this.openSuggestions(event))
             return;
-        }
-        event.preventDefault();
-        if (suggestions.isLastSelected()) {
+        if (this.suggestions.isLastSelected())
             return;
-        }
-        this.suggest(suggestions.selectNext()?.caption);
+        this.suggest(this.suggestions.selectNext()?.caption);
     }
     keyEnter(event) {
         if (DEBUG)
@@ -147,6 +137,7 @@ export class AutoComplete {
             return;
         event.preventDefault();
         this.select();
+        suggestions.hide();
     }
     keyEscape(event) {
         if (DEBUG)
@@ -223,6 +214,23 @@ export class AutoComplete {
                 return this.keyEnter(event);
         }
     }
+    onTouchStart(event) {
+        this.openSuggestions(event);
+    }
+    openSuggestions(event) {
+        const suggestions = this.suggestions;
+        if (!suggestions.length) {
+            this.fetch();
+        }
+        if (suggestions.isVisible()) {
+            return false;
+        }
+        if ((suggestions.length > 1) || (!this.input.value.length && suggestions.length)) {
+            event.preventDefault();
+            suggestions.show();
+        }
+        return true;
+    }
     select() {
         if (DEBUG)
             console.log('select()');
@@ -235,7 +243,6 @@ export class AutoComplete {
         this.input.value = suggestion.caption;
         this.onInputValueChange();
         this.autoIdInputValue();
-        suggestions.hide();
     }
     suggest(value) {
         if (DEBUG)
@@ -255,19 +262,23 @@ export class AutoComplete {
     }
 }
 class Suggestions {
-    combo;
+    autoComplete;
     length = 0;
     list;
-    constructor(combo) {
-        this.combo = combo;
+    pointerStart;
+    constructor(autoComplete) {
+        this.autoComplete = autoComplete;
     }
     createList() {
         if (DEBUG)
             console.log('createList()');
         const list = this.list = document.createElement('ul');
         list.classList.add('suggestions');
-        this.combo.input.insertAdjacentElement('afterend', list);
+        this.autoComplete.input.insertAdjacentElement('afterend', list);
         list.addEventListener('pointerdown', event => this.onPointerDown(event));
+        list.addEventListener('pointercancel', event => this.onPointerCancel(event));
+        list.addEventListener('pointermove', event => this.onPointerMove(event));
+        list.addEventListener('pointerup', event => this.onPointerUp(event));
         return list;
     }
     first() {
@@ -300,7 +311,7 @@ class Suggestions {
     onPointerDown(event) {
         if (DEBUG)
             console.log('onPointerDown()', event.button);
-        if (event.button !== 0)
+        if ((event.pointerType === 'mouse') && (event.button !== 0))
             return;
         if (!(event.target instanceof Element))
             return;
@@ -312,16 +323,40 @@ class Suggestions {
             return;
         if (DEBUG)
             console.log('  select', item);
+        if (event.pointerType !== 'mouse') {
+            this.pointerStart = { id: event.pointerId, item, x: event.clientX, y: event.clientY };
+            return;
+        }
         this.unselect();
         item.classList.add('selected');
-        this.combo.select();
-        event.preventDefault();
+        this.autoComplete.select();
+        this.pointerStart = undefined;
+    }
+    onPointerCancel(_event) {
+        this.pointerStart = undefined;
+    }
+    onPointerMove(event) {
+        if (!this.pointerStart || (event.pointerId !== this.pointerStart.id))
+            return;
+        const distance = Math.abs(event.clientX - this.pointerStart.x) + Math.abs(event.clientY - this.pointerStart.y);
+        if (distance < 8)
+            return;
+        this.pointerStart = undefined;
+    }
+    onPointerUp(event) {
+        if (!this.pointerStart || (event.pointerId !== this.pointerStart.id))
+            return;
+        this.unselect();
+        this.pointerStart.item.classList.add('selected');
+        this.autoComplete.select();
+        this.pointerStart = undefined;
     }
     removeList() {
         if (DEBUG)
             console.log('removeList()');
         if (!this.list)
             return;
+        this.length = 0;
         this.list.remove();
         this.list = undefined;
     }

package/package.json

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