fix: ensure recipe translations save properly by awaiting DOM updates before form submission
All checks were successful
CI / update (push) Successful in 1m13s

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.
This commit is contained in:
2026-01-13 15:24:32 +01:00
parent 0dc950c824
commit 5ca044c79f
2 changed files with 18 additions and 4 deletions

View File

@@ -1,5 +1,6 @@
<script lang="ts"> <script lang="ts">
import { enhance } from '$app/forms'; import { enhance } from '$app/forms';
import { tick } from 'svelte';
import type { ActionData, PageData } from './$types'; import type { ActionData, PageData } from './$types';
import Check from '$lib/assets/icons/Check.svelte'; import Check from '$lib/assets/icons/Check.svelte';
import SeasonSelect from '$lib/components/SeasonSelect.svelte'; import SeasonSelect from '$lib/components/SeasonSelect.svelte';
@@ -122,9 +123,12 @@
} }
// Handle translation approval - populate form and submit // Handle translation approval - populate form and submit
function handleTranslationApproved(event: CustomEvent) { async function handleTranslationApproved(event: CustomEvent) {
translationData = event.detail.translatedRecipe; translationData = event.detail.translatedRecipe;
// Wait for Svelte to update the DOM with the hidden inputs
await tick();
// Submit the form programmatically // Submit the form programmatically
if (formElement) { if (formElement) {
formElement.requestSubmit(); formElement.requestSubmit();
@@ -132,9 +136,12 @@
} }
// Handle translation skipped - submit without translation // Handle translation skipped - submit without translation
function handleTranslationSkipped() { async function handleTranslationSkipped() {
translationData = null; translationData = null;
// Wait for Svelte to update the DOM (remove hidden inputs)
await tick();
// Submit the form programmatically // Submit the form programmatically
if (formElement) { if (formElement) {
formElement.requestSubmit(); formElement.requestSubmit();

View File

@@ -1,5 +1,6 @@
<script lang="ts"> <script lang="ts">
import { enhance } from '$app/forms'; import { enhance } from '$app/forms';
import { tick } from 'svelte';
import type { ActionData, PageData } from './$types'; import type { ActionData, PageData } from './$types';
import Check from '$lib/assets/icons/Check.svelte'; import Check from '$lib/assets/icons/Check.svelte';
import Cross from '$lib/assets/icons/Cross.svelte'; import Cross from '$lib/assets/icons/Cross.svelte';
@@ -199,9 +200,12 @@
} }
// Handle translation approval - populate form and submit // Handle translation approval - populate form and submit
function handleTranslationApproved(event: CustomEvent) { async function handleTranslationApproved(event: CustomEvent) {
translationData = event.detail.translatedRecipe; translationData = event.detail.translatedRecipe;
// Wait for Svelte to update the DOM with the hidden inputs
await tick();
// Submit the form programmatically // Submit the form programmatically
if (formElement) { if (formElement) {
formElement.requestSubmit(); formElement.requestSubmit();
@@ -209,13 +213,16 @@
} }
// Handle translation skipped - submit without translation update // Handle translation skipped - submit without translation update
function handleTranslationSkipped() { async function handleTranslationSkipped() {
// Mark translation as needing update if fields changed // Mark translation as needing update if fields changed
if (changedFields.length > 0 && translationData) { if (changedFields.length > 0 && translationData) {
translationData.translationStatus = 'needs_update'; translationData.translationStatus = 'needs_update';
translationData.changedFields = changedFields; translationData.changedFields = changedFields;
} }
// Wait for Svelte to update the DOM with the updated hidden inputs
await tick();
// Submit the form programmatically // Submit the form programmatically
if (formElement) { if (formElement) {
formElement.requestSubmit(); formElement.requestSubmit();