B4L/buildfor_life_repair
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix checklist item add: form value cleared before submission

Browse Source 
The bind:value + onsubmit pattern caused the input to be empty when
enhance submitted the form. Replaced with post-submission DOM reset
so the value is intact during submission.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Alexander Grabowski
2026-04-07 10:53:16 +07:00
parent 1351b77034
commit cceba73785
2 changed files with 30 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/(app)/checklists/+page.svelte
+15 -4
View File
@@ -3,7 +3,10 @@
let { data, form } = $props();
let showNewTemplate = $state(false);
let newItemText: Record<string, string> = $state({});
function resetForm(form: HTMLFormElement) {
const input = form.querySelector('input[name="text"]') as HTMLInputElement;
if (input) input.value = '';
}
</script>
<svelte:head>
@@ -95,11 +98,19 @@
</div>
<!-- Add item -->
<form method="POST" action="?/addItem" use:enhance
onsubmit={() => { newItemText[template.id] = ''; }}
<form method="POST" action="?/addItem" use:enhance={() => {
return async ({ update, result }) => {
await update();
if (result.type === 'success') {
const form = document.querySelector(`form[data-template="${template.id}"]`) as HTMLFormElement;
if (form) resetForm(form);
}
};
}}
data-template={template.id}
class="mt-2 flex gap-2">
<input type="hidden" name="templateId" value={template.id} />
<input type="text" name="text" required bind:value={newItemText[template.id]}
<input type="text" name="text" required
placeholder="Add item..."
class="flex-1 rounded-md border border-gray-200 px-3 py-1.5 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400" />
<button type="submit" class="rounded-md border border-gray-300 px-3 py-1.5 text-sm text-gray-600 hover:bg-gray-100 dark:border-gray-600 dark:text-gray-400 dark:hover:bg-gray-700">Add</button>
src/routes/(app)/devices/[id]/+page.svelte
+15 -4
View File
@@ -11,7 +11,10 @@
let showLogForm = $state(false);
let showNewChecklist = $state(false);
let showImportChecklist = $state(false);
let newItemText: Record<string, string> = $state({});
function resetInput(formEl: HTMLFormElement) {
const input = formEl.querySelector('input[name="text"]') as HTMLInputElement;
if (input) input.value = '';
}
</script>
<svelte:head>
@@ -436,11 +439,19 @@
</div>
<!-- Add item -->
<form method="POST" action="?/addChecklistItem" use:enhance
onsubmit={() => { newItemText[checklist.id] = ''; }}
<form method="POST" action="?/addChecklistItem" use:enhance={() => {
return async ({ update, result }) => {
await update();
if (result.type === 'success') {
const form = document.querySelector(`form[data-checklist="${checklist.id}"]`) as HTMLFormElement;
if (form) resetInput(form);
}
};
}}
data-checklist={checklist.id}
class="mt-2 flex gap-2">
<input type="hidden" name="checklistId" value={checklist.id} />
<input type="text" name="text" required bind:value={newItemText[checklist.id]}
<input type="text" name="text" required
placeholder="Add item..."
class="flex-1 rounded-md border border-gray-200 px-2 py-1 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400" />
<button type="submit" class="rounded-md px-2 py-1 text-sm text-blue-600 hover:bg-blue-50 dark:text-blue-400 dark:hover:bg-blue-900/20">