Improve the autocomplete UX a little

Exit would prevent defers from running which meant db would be left
dangling

app.go

@@ -2,7 +2,8 @@ package main
 
 import (
 	"context"
-	"os"
+
+	"github.com/wailsapp/wails/v2/pkg/runtime"
 )
 
 // App struct
@@ -139,5 +140,5 @@ func (a *App) SetSetting(key string, value int64) WailsGenericAck {
 
 //region other
 func (a *App) Close() {
-	os.Exit(0)
+	runtime.Quit(a.ctx)
 }

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

@@ -30,9 +30,24 @@
 		name = name.trim();
 		if (!name) {
 			foodSearch = [];
+		} else {
+			updateAutocomplete();
 		}
 	}
 
+	function updateAutocomplete() {
+		if (!per100Edited)
+			GetLastPer100(name.trim()).then((res) => {
+				// 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 = [];
+				}
+			});
+	}
+
 	async function update(event: KeyboardEvent & { currentTarget: EventTarget & HTMLTableCellElement }) {
 		name = name.trim();
 		amount = amount.trim();
@@ -69,17 +84,6 @@
 			nameElement.focus();
 			foodSearch = [];
 		}
-
-		if (!per100Edited)
-			GetLastPer100(name.trim()).then((res) => {
-				// 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;
@@ -101,7 +105,7 @@
 	// }
 	function setInputVal(food: main.Food) {
 		name = food.food;
-		per100 = String(food.per100)
+		per100 = String(food.per100);
 		hiLiteIndex = null;
 		foodSearch = [];
 	}
@@ -132,6 +136,8 @@
 			contenteditable="true"
 			autofocus
 			on:keydown={update}
+			on:focusin={updateAutocomplete}
+			on:focusout={() => foodSearch = []}
 			bind:this={nameElement}
 		/>
 		<td
@@ -161,11 +167,7 @@
 	{#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
+				<FoodSearchEntry itemLabel={f.food} highlighted={i == hiLiteIndex} on:click={() => setInputVal(f)} />
-					itemLabel={f.food}
-					highlighted={i == hiLiteIndex}
-					on:click={() => setInputVal(f)}
-				/>
 			{/each}
 		</ul>
 	{/if}