How to use form actions within DropdownMenu

[azezsan]

I'm trying to make pressing delete within the dropdown submit a form action to the server to delete the row but I didn't know how to implement it well, I managed to get it working but I don't like my solution, I would like a more simple solution that doesn't use javascript, as well I would like to know if I'm not using the API correctly...

<script lang="ts">
	import DotsHorizontal from 'svelte-radix/DotsHorizontal.svelte';
	import { Button } from '$lib/components/ui/button';
	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
	import { labels } from '../(data)/data';
	import { taskSchema, type Task } from '../(data)/schemas';
	import { enhance } from '$app/forms';

	export let row: Task;
	const task = taskSchema.parse(row);

	let form: HTMLFormElement;
</script>

<DropdownMenu.Root>
	<DropdownMenu.Trigger asChild let:builder>
		<Button
			variant="ghost"
			builders={[builder]}
			class="flex h-8 w-8 p-0 data-[state=open]:bg-muted"
		>
			<DotsHorizontal class="h-4 w-4" />
			<span class="sr-only">Open menu</span>
		</Button>
	</DropdownMenu.Trigger>
	<DropdownMenu.Content class="w-[160px]" align="end">
		<DropdownMenu.Item>Edit</DropdownMenu.Item>
		<DropdownMenu.Item>Make a copy</DropdownMenu.Item>
		<DropdownMenu.Item>Favorite</DropdownMenu.Item>
		<DropdownMenu.Separator />
		<DropdownMenu.Sub>
			<DropdownMenu.SubTrigger>Labels</DropdownMenu.SubTrigger>
			<DropdownMenu.SubContent>
				<DropdownMenu.RadioGroup value={task.label}>
					{#each labels as label}
						<DropdownMenu.RadioItem value={label.value}>
							{label.label}
						</DropdownMenu.RadioItem>
					{/each}
				</DropdownMenu.RadioGroup>
			</DropdownMenu.SubContent>
		</DropdownMenu.Sub>
		<DropdownMenu.Separator />
		<form action="?/delete" method="POST" use:enhance bind:this={form}>
			<DropdownMenu.Item on:click={() => form.submit()}>
				<input type="hidden" name="id" value={task.id} />
				Delete
				<DropdownMenu.Shortcut>⌘⌫</DropdownMenu.Shortcut>
			</DropdownMenu.Item>
		</form>
	</DropdownMenu.Content>
</DropdownMenu.Root>

[azezsan]

I realized doing it with javascript makes me unable to enhance the form, need help 🥺

[shyakadavis]

Hi;

Given recent updates, a lot needs to be changed, but you could refer to this conversation (#679) for a similar solution.

I think the same principles apply.

Good luck. 🙂

[brucegl]

Hi,

This pattern worked for me

<DropdownMenu.Group>
	<DropdownMenu.Item>
		<Avatar />
		Profile
	</DropdownMenu.Item>
	<DropdownMenu.Item>
		<LockClosed />
		Security
	</DropdownMenu.Item>
	<form method="post" action="?/logout" use:enhance bind:this={form}>
		<DropdownMenu.Item on:click={() => form.submit()}>
			<Exit />
			<input type="submit" value="Sign out" />
		</DropdownMenu.Item>
	</form>
</DropdownMenu.Group>

Hope that helps someone

[Wizzel1]

@brucegl
Does enhance have any effect for you? In my case the page still reloads and I get the query appended to the url

[brucegl]

@Wizzel1 , sorry for the delay (working on IoT cloud infrastructure). I tried it with and without use:enhance, and with and without JS in the browser, and I didn't notice any difference.

[Wizzel1]

@brucegl No worries, thanks for the reply. Guess i need to give this another try

[slingshotvfx]

Does enhance have any effect for you? In my case the page still reloads and I get the query appended to the url

@Wizzel1 did you ever find a solution for getting use:enhance to work? I'm bumping into the same issue.

[slingshotvfx]

Nevermind, figured it out. Just use form.requestSubmit(); instead of form.submit() 🤦

[devjume]

Just to point out: If you problem where form is automatically highlighted/focused when it is inside <DropdownMenu.Item>.
Add tabindex='-1' attribute to the <button> or <input> element.
Check my comment about this: #934 (comment)