How can I trigger a Radix Dialog from a CommandItem?

[uncvrd]

Hi there - I'd like to open a Radix Dialog when I click on a specific CommandItem in a CommandList but cannot figure out how to do so.

I found a discussion on the Radix GitHub where they provided a solution for opening a Dialog from a DropdownMenu

Here is the discussion: radix-ui/primitives#837

Here is that example: https://codesandbox.io/s/dropdownmenu-dialog-items-r9sq1q

However I cannot take the DropdownWithDialogItemsSolution2 (from the codesandbox) and apply it to a CommandItem because it seems like the onClick event is captured by CommandItem which is necessary for the Dialog.Trigger to know when to open the Dialog.Content...I think?

I was wondering if there was a way to trigger the click event on the CommandItem so that I can trigger the Dialog to open?

Here's what I currently do, at the bottom beneath my Command, I add a Button as the Dialog trigger. However, I'd like to just do the same for items in my CommandList instead of having to convert them to Button's that have click events.

<Command>
	<CommandList>
		<CommandEmpty>No contact found.</CommandEmpty>
		<CommandGroup>
			{results.map((contact) => (
				<CommandItem
					value={`xxx`}
					key={contact.key}
				>
					....
				</CommandItem>
			))}
		</CommandGroup>
	</CommandList>
</Command>
// a separate div is added here so that I can trigger a click event to open and display my Modal
<div className="w-full p-1 pt-0 space-y-1">
		<Separator />

		<MyDialog
			organizationId={organization.id}
			onOpenChange={onDialogOpenChange}
			onCreated={onCreateContact}
		>
			<Button
				type="button"
				className="w-full"
				onClick={(event) => {
					handleDialogItemSelect();
				}}
			>
				<PlusIcon className="w-4 h-4 mr-2" />
				{`Add "${inputValue}"`}
			</Button>
		</MyDialog>
	</div>

Happy to add a code example, but wondering if anyone has come across this and found a viable solution or if I'm just missing something. Let me know how I can help, thanks for your time!

[joaom00]

because it seems like the onClick event is captured by CommandItem which is necessary for the Dialog.Trigger to know when to open the Dialog.Content...I think?

Yeah, CommandItem doesn't pass your onClick event so the DialogContent is never opened. In the meantime, what I guess should work is to control the dialog with open and onOpenChange and open in onSelect

const [open, setOpen] = React.useState(false)

<Command.Item onSelect={() => setOpen(true)}>
  ...
</Command.Item>

or maybe you could put the Dialog.Trigger inside Command.Item but I don't know if this will have a negative effect on accessibility 🤔. Would have to test.

When #117 is merged I think DropdownWithDialogItemsSolution2 should work

[uncvrd]

Thanks for steering me towards some alternative solutions! I guess I have decided to just wait it out until #117 is merged 🙏