Multiple forms with dynamically populated data get blank on submit

[ewe-sro]

Description
I have a page where I display a card for each user in my database. Each user card has a edit button that opens a dialog with 2 forms. Each form in it's tab. Here is the code for the user dialog form:

<script lang="ts">
	import * as Dialog from '$lib/components/ui/dialog';
	import * as Tabs from '$lib/components/ui/tabs';

	import UserForm from './forms/user-form.svelte';
	import RfidForm from './forms/rfid-form.svelte';

	import type { User, SiteUser } from '$lib/server/db/schema';
	import type { SuperValidated } from 'sveltekit-superforms';
	import type { UserEditSchema, UserRfidSchema } from '$lib/config/zodSchemas';
	import type { Snippet } from 'svelte';

	interface Props {
		user: {
			data: User;
			site: SiteUser;
		};
		userFormObj: SuperValidated<UserEditSchema, any, UserEditSchema>;
		rfidFormObj: SuperValidated<UserRfidSchema, any, UserRfidSchema>;
		children?: Snippet;
	}

	let { user, userFormObj, rfidFormObj, children }: Props = $props();

	// For tracking the state of the dialog
	let open: boolean = $state(false);
</script>

<Dialog.Root bind:open>
	{@render children?.()}

	<Dialog.Content class="p-0">
		<Dialog.Header class="p-6 pb-0">
			<Dialog.Title>Upravit uživatele</Dialog.Title>
			<Dialog.Description>Upravte osobní údaje a RFID uživatele.</Dialog.Description>
		</Dialog.Header>

		<Tabs.Root value="user">
			<Tabs.List class="px-6">
				<Tabs.Trigger value="user">Uživatel</Tabs.Trigger>
				<Tabs.Trigger value="rfid">RFID</Tabs.Trigger>
			</Tabs.List>

			<Tabs.Content value="user" class="p-6 pt-4">
				<UserForm {user} formObj={userFormObj} bind:open />
			</Tabs.Content>
			<Tabs.Content value="rfid" class="p-6 pt-4">
				<RfidForm {user} formObj={rfidFormObj} bind:open />
			</Tabs.Content>
		</Tabs.Root>
	</Dialog.Content>
</Dialog.Root>

In each form I populate the data, so it can be used for editting:

// Fill the formData with the user data, so editting works as expected
formData.update(
	($formData) => {
		$formData.userId = user.data.id;
		$formData.rfidTag = user.site.rfidTag;
		$formData.rfidValidTill = user.site.rfidValidTill;

		return $formData;
	},
	{ taint: false }
);

And this is the code for the HTML part of the form. It is obviously editted for each of the forms, the inputs and action attribute are editted accordingly:

<form id="rfidForm" class="flex flex-col gap-6" method="POST" action="?/rfidForm" use:enhance>
	<input name="userId" type="hidden" value={$formData.userId} />

	<Form.Field {form} name="rfidTag">
		<Form.Control>
			{#snippet children({ props })}
				<Form.Label>RFID</Form.Label>
				<Input {...props} bind:value={$formData.rfidTag} type="text" autocomplete="off" />
			{/snippet}
		</Form.Control>
		<Form.FieldErrors />
	</Form.Field>

	<div>
		<Separator class="mb-2" />
		<div class="flex justify-end gap-1.5">
			<Button variant="ghost" size="sm" onclick={() => (open = false)}>Zrušit</Button>
			<Button size="sm" type="submit" disabled={$delayed}>
				<SubmitLoader delayed={$delayed} iconSize={16}>Pokračovat</SubmitLoader>
			</Button>
		</div>
	</div>
</form>

Issue
The data population works well, my issue is that if I save (submit), one of the forms and the +page.server.ts action gets called, the other forms are getting blanked out.

Example
I open the user dialog, go to the "RFID" tab that has the form for editting the user's RFID. The input is populated from the database as expected. I edit the input and submit the form, that works great. The input stays populated with the new value.

But if I go to the others tabs (each tab with it's form), the previously populated fields are now blank after submitting a form from different tab.

Any ideas, how could I fix the blank inputs after submit?
Thank you.

[ewe-sro]

After studying the docs a little bit more I found these three superForm options - invalidateAll, applyAction and resetForm.

And after a bit of an experimenting I managed to get to work with this code:

<script lang="ts">
	import { invalidateAll } from '$app/navigation';

	import * as Dialog from '$lib/components/ui/dialog';
	import * as Tabs from '$lib/components/ui/tabs';

	import UserForm from './forms/user-form.svelte';
	import RfidForm from './forms/rfid-form.svelte';

	import type { User, SiteUser } from '$lib/server/db/schema';
	import type { SuperValidated } from 'sveltekit-superforms';
	import type { UserEditSchema, UserRfidSchema } from '$lib/config/zodSchemas';
	import type { Snippet } from 'svelte';

	interface Props {
		user: {
			data: User;
			site: SiteUser;
		};
		userFormObj: SuperValidated<UserEditSchema, any, UserEditSchema>;
		rfidFormObj: SuperValidated<UserRfidSchema, any, UserRfidSchema>;
		children?: Snippet;
	}

	let { user, userFormObj, rfidFormObj, children }: Props = $props();

	// For tracking the state of the dialog
	let open: boolean = $state(false);
</script>

<Dialog.Root
	bind:open
	onOpenChange={(o) => {
		if (o === false) {
			invalidateAll();
		}
	}}
>
	{@render children?.()}

	<Dialog.Content class="p-0">
		<Dialog.Header class="p-6 pb-0">
			<Dialog.Title>Upravit uživatele</Dialog.Title>
			<Dialog.Description>Upravte osobní údaje a RFID uživatele.</Dialog.Description>
		</Dialog.Header>

		<Tabs.Root value="user">
			<Tabs.List class="px-6">
				<Tabs.Trigger value="user">Uživatel</Tabs.Trigger>
				<Tabs.Trigger value="rfid">RFID</Tabs.Trigger>
			</Tabs.List>

			<Tabs.Content value="user" class="p-6 pt-4">
				<UserForm {user} formObj={userFormObj} />
			</Tabs.Content>
			<Tabs.Content value="rfid" class="p-6 pt-4">
				<RfidForm {user} formObj={rfidFormObj} />
			</Tabs.Content>
		</Tabs.Root>
	</Dialog.Content>
</Dialog.Root>

here is the main edit, I'm invalidating the data manually on a dialog close:

<Dialog.Root
	bind:open
	onOpenChange={(o) => {
		if (o === false) {
			invalidateAll();
		}
	}}
>

And in the forms I set invalidateAll: false and resetForm: false:

const form = superForm(formObj, {
	invalidateAll: false,
	resetForm: false
});

This way I was able to make multiple forms each in their own tab and in a dialog work as expected. The values of other forms don't get blanked out and once you close the dialog, you can see the updated data.