I have a situation where I want to use shadcn Button as a trigger for DropdownMenu, and when I make DropdownMenuTrigger asChild, it wont render the children.

I understand that there needs to be something done in this case, I tried to read and understand from this Radix Primitives Composition

I hacked together something I thought would be correct based on the link above, but nothing …

What must I do to have it working?

Here is a simple code, which results in DropdownMenuTrigger to not show children correctly.

import React from "react";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "../../../@/components/ui/dropdown-menu";
import { Button } from "../../../@/components/ui/button";
import { Menu } from "lucide-react";

const MyButton = React.forwardRef(
  (props, forwardedRef: React.Ref<HTMLButtonElement>) => (
    <Button
      {...props}
      ref={forwardedRef}
      className="py-7 size-8"
      variant={"outline"}
    >
      <Menu color="hsl(var(--supplementary))" className="size-8" />
    </Button>
  )
);

const ListingMenu = (): JSX.Element => {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild className="size-8">
        <MyButton />
      </DropdownMenuTrigger>
      <DropdownMenuContent>
        <DropdownMenuLabel>My Account</DropdownMenuLabel>
        <DropdownMenuSeparator />
        <DropdownMenuItem>Profile</DropdownMenuItem>
        <DropdownMenuItem>Billing</DropdownMenuItem>
        <DropdownMenuItem>Team</DropdownMenuItem>
        <DropdownMenuItem>Subscription</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
};

export default ListingMenu;