Update on focusout

src/lib/components/Food/FoodComp.svelte

@@ -25,16 +25,38 @@
 			item.per100 = parseInt(per100)
 
 			const [newItem, err] = await FoodService.Update(item)
-			name = item.food
-			description = item.description ?? ''
-			amount = item.amount.toString()
-			per100 = item.per100?.toString() ?? ''
 
 			if (newItem && !err) {
 				item = newItem
 			}
+			name = item.food
+			description = item.description ?? ''
+			amount = item.amount.toString()
+			per100 = item.per100?.toString() ?? ''
 		}
 	}
+
+	async function focusOutUpdate() {
+		amount = amount.trim()
+		per100 = per100.trim()
+		description = description.trim()
+		name = name.trim()
+
+		item.food = name
+		item.description = description
+		item.amount = parseInt(amount)
+		item.per100 = parseInt(per100)
+
+		const [newItem, err] = await FoodService.Update(item)
+
+		if (newItem && !err) {
+			item = newItem
+		}
+		name = item.food
+		description = item.description ?? ''
+		amount = item.amount.toString()
+		per100 = item.per100?.toString() ?? ''
+	}
 </script>
 
 <template>
@@ -48,21 +70,25 @@
 		    style="color: {nameColor}"
 		    contenteditable="true"
 		    bind:innerText={name}
+		    on:focusout={focusOutUpdate}
 		    on:keydown={update}>
 		</td>
 		<td class="px-6 py-4 bg-gray-50 dark:bg-gray-800"
 		    contenteditable="true"
 		    bind:innerText={description}
+		    on:focusout={focusOutUpdate}
 		    on:keydown={update}>
 		</td>
 		<td class="px-6 py-4"
 		    contenteditable="true"
 		    bind:innerText={amount}
+		    on:focusout={focusOutUpdate}
 		    on:keydown={update}>
 		</td>
 		<td class="px-6 py-4 bg-gray-50 dark:bg-gray-800"
 		    contenteditable="true"
 		    bind:innerText={per100}
+		    on:focusout={focusOutUpdate}
 		    on:keydown={update}>
 		</td>
 		<td class="px-6 py-4" style="color: {energyColor}">