[DropdownMenu] Issue

[longpoll]

The code from the example:

// ... //
<DropdownMenu.Trigger>
  <Button variant="soft">
    Options
    <DropdownMenu.TriggerIcon />
  </Button>
</DropdownMenu.Trigger>
// ... //

But I don't understand why this is done, because DropdownMenu.Trigger is the button itself. Why put a button inside a button? https://codesandbox.io/p/sandbox/white-surf-22ds39

[sourabratabose]

DropdownMenu.Trigger is a component which renders a button itself. If you want to render your button instead of the one provided by radix set asChild attribute to true like <DropdownMenu.Trigger asChild={true}> <button>Trigger</button> </DropdownMenu.Trigger>

[longpoll]

DropdownMenu.Trigger is a component which renders a button itself. If you want to render your button instead of the one provided by radix set asChild attribute to true like <DropdownMenu.Trigger asChild={true}> <button>Trigger</button> </DropdownMenu.Trigger>

That's exactly what I'm talking about. The problem is that the documentation describes exactly this implementation. That's why I created the issue to fix the inaccuracy in the documentation.

[kylemh]

The documentation includes asChild, but the code in OP does not.

You can either do:

<DropdownMenu.Trigger>
  Options
  <DropdownMenu.TriggerIcon />
</DropdownMenu.Trigger>

or

<DropdownMenu.Trigger asChild>
  <Button variant="soft">
    Options
    <DropdownMenu.TriggerIcon />
  </Button>
</DropdownMenu.Trigger>

but not what you wrote.