@itrocks/autocomplete 0.1.5 → 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

@@ -30,17 +30,26 @@ export declare class AutoComplete {
     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

@@ -137,6 +137,7 @@ export class AutoComplete {
             return;
         event.preventDefault();
         this.select();
+        suggestions.hide();
     }
     keyEscape(event) {
         if (DEBUG)
@@ -242,7 +243,6 @@ export class AutoComplete {
         this.input.value = suggestion.caption;
         this.onInputValueChange();
         this.autoIdInputValue();
-        suggestions.hide();
     }
     suggest(value) {
         if (DEBUG)
@@ -262,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() {
@@ -307,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;
@@ -319,10 +323,33 @@ 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)

package/package.json

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