How to use a DropdownMenu.Item as a trigger for a Dialog

[leomarquine]

When I try to open the dialog from a dropdown item, the dialog doesn't open.
How can I properly achieve this?

Would using the child snippet cause any issues, such as ID collisions between components?
Is there a recommended approach for using a DropdownMenu.Item as a trigger for a Dialog?

[huntabyte]

I would define the dialog outside of the dropdown menu and bind:open on the dialog and when clicking the dropdown item, set the dialog's open={true}

[leomarquine]

That is what I went for

<script lang="ts">
	import { Dialog, DropdownMenu } from 'bits-ui';

	let open = $state(false);
</script>

<Dialog.Root bind:open>
	<Dialog.Content>Content</Dialog.Content>
</Dialog.Root>

<DropdownMenu.Root>
	<DropdownMenu.Trigger>Menu</DropdownMenu.Trigger>

	<DropdownMenu.Content>
		<DropdownMenu.Item onclick={() => (open = true)}>Open Dialog</DropdownMenu.Item>
	</DropdownMenu.Content>
</DropdownMenu.Root>

But the problem is: if I don't use Dialog.Trigger, wouldn't I be missing out on some accessibility attributes?

[igorlanko]

Curious about that as well. Wondering what's the clean way to insert your own custom element as into the Dialog.Trigger. I suspect it has to do with child? https://bits-ui.com/docs/components/dialog#trigger