Dialog inside DropdownMenu.Item doesn't work

[chientrm]

Current Behavior

Both Dialog and Dropdown Item immediately close when I click on the Dropdown button.

Expected Behavior

Dropdown close, Dialog show up.

Steps To Reproduce

<DropdownMenu.Item>
  <Dialog.Root>
    <Dialog.Trigger
      class={cn(
        buttonVariants({ variant: 'destructive' }),
        'w-full'
      )}
    >
      <Trash class="mr-2 h-4 w-4" />
      Delete meme
    </Dialog.Trigger>
    <Dialog.Content>
      <Dialog.Header>
        <Dialog.Title>Delete meme</Dialog.Title>
        <Dialog.Description>
          Are you sure you want to delete this template?
        </Dialog.Description>
      </Dialog.Header>
      <Dialog.Footer>
        <form
          method="POST"
          use:enhance
          action="/{username}/{newId}/?/delete"
        >
          <Button type="submit" variant="destructive">
            <Trash class="mr-2 h-4 w-4" />
            Delete meme
          </Button>
        </form>
      </Dialog.Footer>
    </Dialog.Content>
  </Dialog.Root>
</DropdownMenu.Item>

Link to Reproduction / Stackblitz

No response

More Information

No response

[huntabyte]

That's because your dialog is placed inside of the dropdown menu content which closes when you open the dialog.

Place the dialog content outside of the dropdown menu content and you'll be good to go.

[chientrm]

I this what you mean? It doesn't work either 🤔

<Dialog.Root>
  <DropdownMenu.Item>
    <Dialog.Trigger
      class={cn(
        buttonVariants({ variant: 'destructive' }),
        'w-full'
      )}
    >
      <Trash class="mr-2 h-4 w-4" />
      Delete meme
    </Dialog.Trigger>
  </DropdownMenu.Item>
  <Dialog.Content>
    <Dialog.Header>
      <Dialog.Title>Delete meme</Dialog.Title>
      <Dialog.Description>
        Are you sure you want to delete this meme?
      </Dialog.Description>
    </Dialog.Header>
    <Dialog.Footer>
      <form
        method="POST"
        use:enhance
        action="/{username}/{newId}/?/delete"
      >
        <Button type="submit" variant="destructive">
          <Trash class="mr-2 h-4 w-4" />
          Delete meme
        </Button>
      </form>
    </Dialog.Footer>
  </Dialog.Content>
</Dialog.Root>

[CreedDE]

He means that your Dialog.Content Component has to be outside the DropdownMenu.Content component.

That is my current data-table-actions.svelte file from the example Data Table.

<Dialog.Root>
	<DropdownMenu.Root>
		<DropdownMenu.Trigger asChild let:builder>
			<Button
				variant="link"
				builders={[builder]}
				size="sm"
				class="relative w-8 h-8 p-0"
			>
				<span class="sr-only">Open menu</span>
				<Fa icon={faEllipsisVertical} />
			</Button>
		</DropdownMenu.Trigger>
		<DropdownMenu.Content>
			<DropdownMenu.Group>
				<DropdownMenu.Label>Actions</DropdownMenu.Label>
				<DropdownMenu.Item>
					<Dialog.Trigger class="w-full">Copy payment ID</Dialog.Trigger>
				</DropdownMenu.Item>
			</DropdownMenu.Group>
			<DropdownMenu.Separator />
			<DropdownMenu.Item>View customer</DropdownMenu.Item>
			<DropdownMenu.Item>View payment details</DropdownMenu.Item>
		</DropdownMenu.Content>
		<Dialog.Content>
			<Dialog.Header>
				<Dialog.Title>Are you sure?</Dialog.Title>
				<Dialog.Description>Make sure this is the real one</Dialog.Description>
			</Dialog.Header>
			<div>Are you sure you wanna do this?</div>
			<Dialog.Footer>
				<Button type="submit">Save changes</Button>
			</Dialog.Footer>
		</Dialog.Content>
	</DropdownMenu.Root>
</Dialog.Root>

[chientrm]

Thank you, my users finally can delete their posts now 👍

[chientrm]

It doesn't seem like the dialog gonna close when I click on the submit Save changes button 🤔 although the form is submitted successfully.

[CreedDE]

You have to implement it yourself with the builders I think.

But since I have multiple dialogs, I chose a little different approach where I have a form in a different Component. And because of the form submit, it will close and reload the page (which suits my case because i want that)

That how it looks now for me:

<DropdownMenu.Root>
	<DropdownMenu.Trigger asChild let:builder>
		<Button
			variant="link"
			builders={[builder]}
			size="sm"
			class="relative w-8 h-8 p-0"
		>
			<span class="sr-only">Open menu</span>
			<Fa icon={faEllipsisVertical} />
		</Button>
	</DropdownMenu.Trigger>
	<DropdownMenu.Content>
		<DropdownMenu.Group>
			<DropdownMenu.Label>Actions</DropdownMenu.Label>
			<DropdownMenu.Item
				on:click={() => (carEditDialog = true)}
				class="flex gap-4"
			>
				<Fa icon={faUserPen} />
				<span>Edit Car</span>
			</DropdownMenu.Item>
			<DropdownMenu.Item
				on:click={() => (carDeleteDialog = true)}
				class="flex gap-4"
			>
				<Fa icon={faTrash} color="#ef4444" />
				<span>Delete Car</span>
			</DropdownMenu.Item>
		</DropdownMenu.Group>
	</DropdownMenu.Content>
</DropdownMenu.Root>

<Dialog.Root bind:open={carEditDialog}>
	<Dialog.Content>
		<Dialog.Header>
			<Dialog.Title>Edit Current Car</Dialog.Title>
		</Dialog.Header>
		<EditCar car={data.car} {simulations} />
	</Dialog.Content>
</Dialog.Root>

<Dialog.Root bind:open={carDeleteDialog}>
	<Dialog.Content>
		<Dialog.Header>
			<Dialog.Title>Delete Car</Dialog.Title>
		</Dialog.Header>
		<DeleteCar carId={data.car.id} />
	</Dialog.Content>
</Dialog.Root>

And it feels like, that might be a clearer and better approach to read for other developers.