Form submission within dropdown menu does not work

[SavvasMohito]

Hey everyone, I recently updated all of my components to the Svelte 5 one. Great work @huntabyte, thanks a lot! After doing that, I noticed a strange behaviour: I have a dropdown menu in my page header which includes one item which is a button that submits a form to either login or logout form action, depending on the auth state. When trying to submit this form from the dropdown menu, nothing happens and I get a console warning saying "Form submission cancelled because the form is not connected". Submitting the exact same form outside the dropdown menu works as expected. Any ideas on what might be causing this? Thanks in advance!

Code:

<!-- THIS FORM WORKS -->
<form method="POST" action="/account?/login" class="form-control flex justify-center">
	<button>Login with Google</button>
</form>
<DropdownMenu.Root>
	<DropdownMenu.Trigger>
		<Button variant="ghost" class="relative flex h-10 w-10 items-center rounded-full">
			<Avatar.Root class="h-10 w-10">
				<Avatar.Image src={user && user.user_metadata.picture ? user.user_metadata.picture : "default-avatar.jpg"} alt="user image" />
				<Avatar.Fallback>SC</Avatar.Fallback>
			</Avatar.Root>
		</Button>
	</DropdownMenu.Trigger>
	<DropdownMenu.Content class="w-56" align="end">
		{#if user}
			<DropdownMenu.Label class="font-normal">
				<div class="flex flex-col space-y-1">
					<p class="font-medium leading-none">{user.user_metadata.full_name}</p>
					<p class="text-sm leading-none text-muted-foreground">{user.email}</p>
				</div>
			</DropdownMenu.Label>
			<DropdownMenu.Separator />
                        <!-- THIS DOES NOT WORK -->
			<DropdownMenu.Item>
				<form method="POST" action="/account?/logout">
					<button type="submit">Log out</button>
				</form>
			</DropdownMenu.Item>
		{:else}
                        <!-- THIS DOES NOT WORK -->
			<DropdownMenu.Item>
				<form method="POST" action="/account?/login" class="form-control flex justify-center">
					<button>Login with Google</button>
				</form>
			</DropdownMenu.Item>
		{/if}
	</DropdownMenu.Content>
</DropdownMenu.Root>

[huntabyte]

You have to handle these a bit differently as we need to wait for the form to submit before closing the menu. Right now your form is destroyed before it has a chance to finish sending.

I'll work on documenting this on bits-ui docs site soon!

[SavvasMohito]

Thanks for the response. This is what I did as a workaround:

<script lang="ts">
	let form: HTMLFormElement | undefined = $state(undefined);
</script>

<DropdownMenu.Root>
	<DropdownMenu.Trigger>
		<Button variant="ghost" class="relative flex h-10 w-10 items-center rounded-full">
			<Avatar.Root class="h-10 w-10">
				<Avatar.Image src={user && user.user_metadata.picture ? user.user_metadata.picture : "default-avatar.jpg"} alt="user image" />
				<Avatar.Fallback>SC</Avatar.Fallback>
			</Avatar.Root>
		</Button>
	</DropdownMenu.Trigger>
	<DropdownMenu.Content class="w-56" align="end">
		{#if user}
			<DropdownMenu.Label class="font-normal">
				<div class="flex flex-col space-y-1">
					<p class="font-medium leading-none">{user.user_metadata.full_name}</p>
					<p class="text-sm leading-none text-muted-foreground">{user.email}</p>
				</div>
			</DropdownMenu.Label>
			<DropdownMenu.Separator />
			<form bind:this={form} method="POST" action="/account?/logout">
				<DropdownMenu.Item class="hover:cursor-pointer" onclick={() => form && form.submit()}>
					Log Out
				</DropdownMenu.Item>
			</form>
		{:else}
			<form bind:this={form} method="POST" action="/account?/login">
				<DropdownMenu.Item class="hover:cursor-pointer" onclick={() => form && form.submit()}>
					Login with Google
				</DropdownMenu.Item>
			</form>
		{/if}
	</DropdownMenu.Content>
</DropdownMenu.Root>

source: #793 (comment)