Fix proclamation form fields not auto-filling on edit

Switch from  initialized from prop to -synced
values so form fields always populate when the record changes.
Key the TipTap editor on record.id to force re-render.
This commit is contained in:
NeilClack
2026-07-07 22:14:23 -05:00
parent ce42414214
commit 9ddad9d834
@@ -32,18 +32,23 @@
if (record.id) dirty = true;
}
let name = $state(String(record.name ?? ''));
let solfeggioFrequencyId = $state(String(record.solfeggioFrequencyId ?? ''));
let subscriptionLevelId = $state(String(record.subscriptionLevelId ?? ''));
let name = $state('');
let solfeggioFrequencyId = $state('');
let subscriptionLevelId = $state('');
let parentCategoryId = $state('');
let categoryId = $state('');
let parentCategoryId = $state(
String(
$effect(() => {
name = String(record.name ?? '');
solfeggioFrequencyId = String(record.solfeggioFrequencyId ?? '');
subscriptionLevelId = String(record.subscriptionLevelId ?? '');
parentCategoryId = String(
record.parentCategoryId ??
(record.category as Record<string, unknown> | undefined)?.parentId ??
''
)
);
let categoryId = $state(String(record.categoryId ?? ''));
categoryId = String(record.categoryId ?? '');
});
let parentOptions = $derived(categories.filter((c) => c.parentId === null));
@@ -56,6 +61,8 @@
parentCategoryId = target.value;
categoryId = '';
}
let contentKey = $derived(record.id ?? 'new');
</script>
<form {action} method="POST" use:enhance oninput={markDirty}>
@@ -201,10 +208,12 @@
Content
</label>
<div id="field-content">
{#key record.id}
<TipTap
initialContent={typeof record.content === 'string' ? record.content : ''}
name="content"
/>
{/key}
</div>
{#if fieldErrors.content}
<p class="mt-1 text-xs text-red-600">{fieldErrors.content}</p>