Enable clicking on autocomplete

frontend/src/lib/components/Energy/EmptyFoodComp.svelte

@@ -4,7 +4,6 @@
 	import { CreateFood, GetLastPer100 } from "$wails/main/App";
 	import { foodStore } from "$lib/store/Energy/foodStore";
 	import FoodSearchEntry from "./FoodSearchEntry.svelte";
-	import { onMount } from "svelte";
 
 	let item: main.Food = {
 		food: "",
@@ -28,6 +27,7 @@
 	// Maybe it would be a good idea to use $ instead of update down there...
 	// Maybe it's a topic for another day
 	$: {
+		name = name.trim();
 		if (!name) {
 			foodSearch = [];
 		}
@@ -72,27 +72,33 @@
 
 		if (!per100Edited)
 			GetLastPer100(name.trim()).then((res) => {
-				if (res.success && res.data) {
+				// Prevent search when there's nothing to search
+				// Sometimes we get search results after deleting name
+				if (res.success && res.data && name) {
 					foodSearch = res.data;
+				} else {
+					foodSearch = [];
 				}
 			});
 	}
 
 	let hiLiteIndex: number | null = null;
-	function navigateList(e: KeyboardEvent) {
-		if (e.key === "ArrowDown" && hiLiteIndex && hiLiteIndex <= foodSearch.length - 1) {
-			hiLiteIndex === null ? (hiLiteIndex = 0) : (hiLiteIndex += 1);
-		} else if (e.key === "ArrowUp" && hiLiteIndex !== null) {
-			hiLiteIndex === 0 ? (hiLiteIndex = foodSearch.length - 1) : (hiLiteIndex -= 1);
-		} else if (e.key === "Enter") {
-			// @ts-ignore ITS NOT NULL YOU ASSHAT
-			// WE CHECKED
-			// ITS NOT
-			setInputVal(foodSearch[hiLiteIndex]);
-		} else {
-			return;
-		}
-	}
+	// function navigateList(e: KeyboardEvent) {
+	// 	console.log(foodSearch, hiLiteIndex);
+	// 	// @ts-ignore shut the fuck up
+	// 	if (e.key == "ArrowDown" && hiLiteIndex <= foodSearch.length - 2) {
+	// 		hiLiteIndex == null ? (hiLiteIndex = 0) : (hiLiteIndex += 1);
+	// 	} else if (e.key == "ArrowUp" && hiLiteIndex !== null) {
+	// 		hiLiteIndex == 0 ? 0 : (hiLiteIndex -= 1);
+	// 	} else if (e.key == "Enter") {
+	// 		// @ts-ignore ITS NOT NULL YOU ASSHAT
+	// 		// WE CHECKED
+	// 		// ITS NOT
+	// 		setInputVal(foodSearch[hiLiteIndex]);
+	// 	} else {
+	// 		return;
+	// 	}
+	// }
 	function setInputVal(val: string) {
 		name = val;
 		hiLiteIndex = null;
@@ -108,12 +114,15 @@
 	}
 </script>
 
+<!-- <svelte:window on:keydown={navigateList} /> -->
+
 <template>
 	<tr class="border-b border-gray-200 dark:border-gray-700 text-lg font-bold relative">
 		<th
 			class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap bg-gray-50 dark:text-white dark:bg-gray-800"
 			scope="row"
 		></th>
+		<!-- svelte-ignore a11y-autofocus -->
 		<td
 			bind:innerText={name}
 			class:border-[3px]={!name}
@@ -151,7 +160,11 @@
 	{#if foodSearch.length > 0}
 		<ul bind:this={autocompleteList} class="z-50 fixed top-0 left-0 w-3/12 border border-x-gray-800">
 			{#each foodSearch as f, i}
-				<FoodSearchEntry itemLabel={f.food} highlighted={i === hiLiteIndex} on:click={() => setInputVal(f)} />
+				<FoodSearchEntry
+					itemLabel={f.food}
+					highlighted={i == hiLiteIndex}
+					on:click={() => setInputVal(f.food)}
+				/>
 			{/each}
 		</ul>
 	{/if}

frontend/src/lib/components/Energy/FoodSearchEntry.svelte

@@ -1,4 +1,6 @@
 <script>
+	// This doesn't update when navigating with arrows keys...
+	// Fucking svelte and reactivity again, here we fucking go
 	export let itemLabel;
 	export let highlighted;
 </script>