From 5ca044c79f1740c9546e9dd9cddacdb07820f68e Mon Sep 17 00:00:00 2001
From: Alexander Bocken <alexander@bocken.org>
Date: Tue, 13 Jan 2026 15:24:32 +0100
Subject: [PATCH] fix: ensure recipe translations save properly by awaiting DOM
 updates before form submission

Previously, when users approved or skipped translations in the recipe forms, the translation data wasn't being saved to the database. This was caused by a timing issue where the form was submitted before Svelte had updated the DOM with the hidden inputs containing the translation data.

Fixed by using tick() to wait for pending state changes to be applied before submitting the form.
---
 src/routes/[recipeLang=recipeLang]/add/+page.svelte   | 11 +++++++++--
 .../[recipeLang=recipeLang]/edit/[name]/+page.svelte  | 11 +++++++++--
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/routes/[recipeLang=recipeLang]/add/+page.svelte b/src/routes/[recipeLang=recipeLang]/add/+page.svelte
index d809050..a20582c 100644
--- a/src/routes/[recipeLang=recipeLang]/add/+page.svelte
+++ b/src/routes/[recipeLang=recipeLang]/add/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { enhance } from '$app/forms';
+	import { tick } from 'svelte';
 	import type { ActionData, PageData } from './$types';
 	import Check from '$lib/assets/icons/Check.svelte';
 	import SeasonSelect from '$lib/components/SeasonSelect.svelte';
@@ -122,9 +123,12 @@
 	}
 
 	// Handle translation approval - populate form and submit
-	function handleTranslationApproved(event: CustomEvent) {
+	async function handleTranslationApproved(event: CustomEvent) {
 		translationData = event.detail.translatedRecipe;
 
+		// Wait for Svelte to update the DOM with the hidden inputs
+		await tick();
+
 		// Submit the form programmatically
 		if (formElement) {
 			formElement.requestSubmit();
@@ -132,9 +136,12 @@
 	}
 
 	// Handle translation skipped - submit without translation
-	function handleTranslationSkipped() {
+	async function handleTranslationSkipped() {
 		translationData = null;
 
+		// Wait for Svelte to update the DOM (remove hidden inputs)
+		await tick();
+
 		// Submit the form programmatically
 		if (formElement) {
 			formElement.requestSubmit();
diff --git a/src/routes/[recipeLang=recipeLang]/edit/[name]/+page.svelte b/src/routes/[recipeLang=recipeLang]/edit/[name]/+page.svelte
index 7beaa15..c613309 100644
--- a/src/routes/[recipeLang=recipeLang]/edit/[name]/+page.svelte
+++ b/src/routes/[recipeLang=recipeLang]/edit/[name]/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { enhance } from '$app/forms';
+	import { tick } from 'svelte';
 	import type { ActionData, PageData } from './$types';
 	import Check from '$lib/assets/icons/Check.svelte';
 	import Cross from '$lib/assets/icons/Cross.svelte';
@@ -199,9 +200,12 @@
 	}
 
 	// Handle translation approval - populate form and submit
-	function handleTranslationApproved(event: CustomEvent) {
+	async function handleTranslationApproved(event: CustomEvent) {
 		translationData = event.detail.translatedRecipe;
 
+		// Wait for Svelte to update the DOM with the hidden inputs
+		await tick();
+
 		// Submit the form programmatically
 		if (formElement) {
 			formElement.requestSubmit();
@@ -209,13 +213,16 @@
 	}
 
 	// Handle translation skipped - submit without translation update
-	function handleTranslationSkipped() {
+	async function handleTranslationSkipped() {
 		// Mark translation as needing update if fields changed
 		if (changedFields.length > 0 && translationData) {
 			translationData.translationStatus = 'needs_update';
 			translationData.changedFields = changedFields;
 		}
 
+		// Wait for Svelte to update the DOM with the updated hidden inputs
+		await tick();
+
 		// Submit the form programmatically
 		if (formElement) {
 			formElement.requestSubmit();