Have a dropdown item open an alert dialog

[dugip]

In my current implementation, I have dropdown and alert dialog abstracted into separate components in order to apply styling to them. I make a small API available when using these components, barely exposing anything from the underlying radix components.

I have a situation where I want one of the dropdown item components to open a modal. The thing is, the dropdown item is rendered for a lot of rows, the exact use case being that each row has a delete button within the dropdown and I want the user to confirm this action with the alert dialog.

From a tree view, this is what my code looks like:

- Dropdown
- - Custom component that would render the alert dialog and pass `children` as the trigger
- - - Dropdown item, which will be passed as the alert dialog trigger (`AlertDialog.Trigger`)

This does not work and I'm not sure why. I'm certain that DropdownMenu.Item forwards props. The trigger for AlertDialog.Trigger has the asChild prop set to true as well.

This same exact code works when I use it with a custom button component, with the setup I demonstrated above.

This is the actual code:

<Dropdown
  trigger={<Button ... />}
>
  <Dropdown.Item onSelect={onEdit}>
    <Text>
      <span>Edit</span>
    </Text>
  </Dropdown.Item>
  <ConfirmModal
    description="This is a permanent action."
    onConfirm={onDelete}
  >
    <Dropdown.Item>
      <Text>
        <span>Delete</span>
      </Text>
    </Dropdown.Item>
  </ConfirmModal>
</Dropdown>

The ConfirmModal implementation is pretty the same code as the docs (first example)

Dropdown.Item is also a bare bones usage of the component from radix, except that it's wrapped with styled from Macaron CSS, which does forward refs and props.

Why isn't the dropdown item unable to open the alert dialog?

[joaom00]

Can you provide a sandbox? Here some examples that can help https://codesandbox.io/s/dropdownmenu-dialog-items-r9sq1q

[benoitgrelard]

Yeah a bit difficult to help without an example…

I make a small API available when using these components, barely exposing anything from the underlying radix components.

It sounds like that could be the issue.