Disable datalist suggestions on mobile

datalist is broken on mobile Firefox (invisible) and Chrome
(transparent background glitch). Create datalist dynamically via JS
only when the primary pointer is fine (mouse/trackpad).

Author: pierres

internal/ui/packagelist/templates.templ

@@ -57,14 +57,12 @@ templ PackagesContent(list *packages.PackagePopularityList, query string, curren
 				name="query"
 				placeholder="Search packages"
 				value={ query }
-				list="package-suggestions"
 			/>
 			if compare != "" {
 				<input type="hidden" name="compare" value={ compare }/>
 			}
 			<button class="btn btn-primary d-none d-sm-block" type="submit">Search</button>
 		</div>
-		<datalist id="package-suggestions"></datalist>
 	</form>
 	if len(list.PackagePopularities) > 0 {
 		@PackageTable(list.PackagePopularities, query, currentOffset, limit, compare)

src/package-search-suggest.ts

@@ -1,77 +1,86 @@
-const DEBOUNCE_MS = 200;
-const MIN_QUERY_LENGTH = 2;
-const SUGGESTION_LIMIT = 10;
+if (matchMedia("(pointer: coarse)").matches) {
+    // datalist is broken on mobile browsers — skip suggestions
+} else {
+    const DEBOUNCE_MS = 200;
+    const MIN_QUERY_LENGTH = 2;
+    const SUGGESTION_LIMIT = 10;
 
-const input = document.querySelector<HTMLInputElement>("#package-search");
-const datalist = document.querySelector<HTMLDataListElement>(
-    "#package-suggestions",
-);
+    const input = document.querySelector<HTMLInputElement>("#package-search");
 
-if (input && datalist) {
-    let controller: AbortController | null = null;
-    let timer: ReturnType<typeof setTimeout>;
-    let previousValue = input.value;
+    if (input) {
+        const datalist = document.createElement("datalist");
+        datalist.id = "package-suggestions";
+        input.after(datalist);
+        input.setAttribute("list", "package-suggestions");
 
-    const isSuggestion = (query: string): boolean =>
-        datalist.querySelector(`option[value="${CSS.escape(query)}"]`) !== null;
+        let controller: AbortController | null = null;
+        let timer: ReturnType<typeof setTimeout>;
+        let previousValue = input.value;
 
-    const isSelection = (query: string): boolean => {
-        const lengthDiff = query.length - previousValue.length;
-        return lengthDiff > 1 && isSuggestion(query);
-    };
+        const isSuggestion = (query: string): boolean =>
+            datalist.querySelector(`option[value="${CSS.escape(query)}"]`) !==
+            null;
 
-    const fetchSuggestions = async (
-        query: string,
-        signal: AbortSignal,
-    ): Promise<string[]> => {
-        const res = await fetch(
-            `/api/packages?query=${encodeURIComponent(query)}&limit=${SUGGESTION_LIMIT}`,
-            { signal },
-        );
-        const data = await res.json();
-        return data.packagePopularities.map((p: { name: string }) => p.name);
-    };
+        const isSelection = (query: string): boolean => {
+            const lengthDiff = query.length - previousValue.length;
+            return lengthDiff > 1 && isSuggestion(query);
+        };
 
-    const updateDatalist = (names: string[]): void => {
-        datalist.replaceChildren(
-            ...names.map((name) => {
-                const option = document.createElement("option");
-                option.value = name;
-                return option;
-            }),
-        );
-    };
+        const fetchSuggestions = async (
+            query: string,
+            signal: AbortSignal,
+        ): Promise<string[]> => {
+            const res = await fetch(
+                `/api/packages?query=${encodeURIComponent(query)}&limit=${SUGGESTION_LIMIT}`,
+                { signal },
+            );
+            const data = await res.json();
+            return data.packagePopularities.map(
+                (p: { name: string }) => p.name,
+            );
+        };
 
-    input.addEventListener("input", () => {
-        clearTimeout(timer);
-        const query = input.value.trim();
+        const updateDatalist = (names: string[]): void => {
+            datalist.replaceChildren(
+                ...names.map((name) => {
+                    const option = document.createElement("option");
+                    option.value = name;
+                    return option;
+                }),
+            );
+        };
 
-        if (isSelection(query)) {
-            input.form?.submit();
-            return;
-        }
+        input.addEventListener("input", () => {
+            clearTimeout(timer);
+            const query = input.value.trim();
 
-        previousValue = query;
+            if (isSelection(query)) {
+                input.form?.submit();
+                return;
+            }
+
+            previousValue = query;
 
-        if (query.length < MIN_QUERY_LENGTH) {
-            updateDatalist([]);
-            return;
-        }
+            if (query.length < MIN_QUERY_LENGTH) {
+                updateDatalist([]);
+                return;
+            }
 
-        timer = setTimeout(async () => {
-            controller?.abort();
-            controller = new AbortController();
+            timer = setTimeout(async () => {
+                controller?.abort();
+                controller = new AbortController();
 
-            try {
-                updateDatalist(
-                    await fetchSuggestions(query, controller.signal),
-                );
-            } catch (e) {
-                if (e instanceof DOMException && e.name === "AbortError") {
-                    return;
+                try {
+                    updateDatalist(
+                        await fetchSuggestions(query, controller.signal),
+                    );
+                } catch (e) {
+                    if (e instanceof DOMException && e.name === "AbortError") {
+                        return;
+                    }
+                    throw e;
                 }
-                throw e;
-            }
-        }, DEBOUNCE_MS);
-    });
+            }, DEBOUNCE_MS);
+        });
+    }
 }