Why does using SidebarMenuButton inside DropdownMenuTrigger cause an error?

[realmorrisliu]

I installed sidebar-09 in my project using the command pnpm dlx shadcn@latest add sidebar-09, but when running the project, I encounter the error below. Additionally, unlike the example shown in this link, clicking on the user avatar doesn’t open the dropdown menu as expected.

Could you help me understand why this is happening?

[Error] Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Check the render method of `SlotClone`.
SidebarMenuButton@http://localhost:1420/src/components/ui/sidebar.tsx:691:10
SlotClone@http://localhost:1420/node_modules/.vite/deps/chunk-6TMFFXV2.js:73:43
Slot@http://localhost:1420/node_modules/.vite/deps/chunk-6TMFFXV2.js:54:43
Primitive.button@http://localhost:1420/node_modules/.vite/deps/chunk-CTV5ZQLD.js:41:49
SlotClone@http://localhost:1420/node_modules/.vite/deps/chunk-6TMFFXV2.js:73:43
Slot@http://localhost:1420/node_modules/.vite/deps/chunk-6TMFFXV2.js:54:43
Primitive.div@http://localhost:1420/node_modules/.vite/deps/chunk-CTV5ZQLD.js:41:49
PopperAnchor@http://localhost:1420/node_modules/.vite/deps/chunk-4F73KET5.js:1927:64
MenuAnchor@http://localhost:1420/node_modules/.vite/deps/@radix-ui_react-dropdown-menu.js:409:50
DropdownMenuTrigger@http://localhost:1420/node_modules/.vite/deps/@radix-ui_react-dropdown-menu.js:1207:77
DropdownMenuTrigger@http://localhost:1420/src/components/ui/dropdown-menu.tsx:41:30
MenuProvider@http://localhost:1420/node_modules/.vite/deps/chunk-GPNQXEHS.js:43:52
MenuProvider@http://localhost:1420/node_modules/.vite/deps/chunk-GPNQXEHS.js:43:52
PopperProvider@http://localhost:1420/node_modules/.vite/deps/chunk-GPNQXEHS.js:43:52
Popper@http://localhost:1420/node_modules/.vite/deps/chunk-4F73KET5.js:1919:44
Menu@http://localhost:1420/node_modules/.vite/deps/@radix-ui_react-dropdown-menu.js:363:89
DropdownMenuProvider@http://localhost:1420/node_modules/.vite/deps/chunk-GPNQXEHS.js:43:52
DropdownMenu@http://localhost:1420/node_modules/.vite/deps/@radix-ui_react-dropdown-menu.js:1180:12
DropdownMenu@http://localhost:1420/src/components/ui/dropdown-menu.tsx:21:23
li
SidebarMenuItem@http://localhost:1420/src/components/ui/sidebar.tsx:650:37
ul
SidebarMenu@http://localhost:1420/src/components/ui/sidebar.tsx:630:33
NavUser@http://localhost:1420/src/components/nav-user.tsx:48:7
div
SidebarFooter@http://localhost:1420/src/components/ui/sidebar.tsx:461:35
div
Sidebar@http://localhost:1420/src/components/ui/sidebar.tsx:148:7
div
div
div
Sidebar@http://localhost:1420/src/components/ui/sidebar.tsx:148:7
AppSidebar@http://localhost:1420/src/components/app-sidebar.tsx:147:28
div
TooltipProviderProvider@http://localhost:1420/node_modules/.vite/deps/chunk-GPNQXEHS.js:43:52
TooltipProvider@http://localhost:1420/node_modules/.vite/deps/@radix-ui_react-tooltip.js:97:12
TooltipProvider@http://localhost:1420/src/components/ui/tooltip.tsx:21:16
SidebarProvider@http://localhost:1420/src/components/ui/sidebar.tsx:58:14
Page
App

[thanhttb]

Root cause

When you use asChild with a Radix UI component like DropdownMenuTrigger, it:

1. Doesn't render its own DOM element
2. Clones the child element you provide (in this case, SidebarMenuButton)
3. Spreads all necessary props to that child element

The problem occurs when the child component (SidebarMenuButton) doesn't properly handle these forwarded props or doesn't forward them to its own HTML elements. By removing asChild, the component structure becomes:

<DropdownMenuTrigger> <!-- Renders a button element -->
  <SidebarMenuButton>...</SidebarMenuButton> <!-- Rendered as a child -->
</DropdownMenuTrigger>

Instead of:

<DropdownMenuTrigger asChild> <!-- Doesn't render its own element -->
  <SidebarMenuButton {...propsFromTrigger}>...</SidebarMenuButton> <!-- Expected to handle trigger functionality -->
</DropdownMenuTrigger>

Alternative Solutions

If you need to maintain proper semantic HTML (avoiding nested buttons):

1. Fix the SidebarMenuButton component: Make sure it properly forwards refs and event handlers.

function SidebarMenuButton(
  {
    asChild = false,
    isActive = false,
    variant = "default",
    size = "default",
    tooltip,
    className,
    ...props
  }: React.ComponentProps<"button"> & {
    asChild?: boolean;
    isActive?: boolean;
    tooltip?: string | React.ComponentProps<typeof TooltipContent>;
  } & VariantProps<typeof sidebarMenuButtonVariants>,
  ref: React.ForwardedRef<HTMLButtonElement>
) {
  const Comp = asChild ? Slot : "button";
  const { isMobile, state } = useSidebar();

  const button = (
    <Comp
      ref={ref} // Forward the ref
      data-slot="sidebar-menu-button"
      data-sidebar="menu-button"
      data-size={size}
      data-active={isActive}
      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
      {...props}
    />
  );

  if (!tooltip) {
    return button;
  }

  if (typeof tooltip === "string") {
    tooltip = {
      children: tooltip,
    };
  }

  return (
    <Tooltip>
      <TooltipTrigger asChild>{button}</TooltipTrigger>
      <TooltipContent
        side="right"
        align="center"
        hidden={state !== "collapsed" || isMobile}
        {...tooltip}
      />
    </Tooltip>
  );
}
// Forward ref using React.forwardRef after function definition
const ForwardedSidebarMenuButton = React.forwardRef(SidebarMenuButton);
ForwardedSidebarMenuButton.displayName = "SidebarMenuButton";
//Export
export {  ForwardedSidebarMenuButton as SidebarMenuButton } ;

3. Use a non-button wrapper: Change SidebarMenuButton to render a div or span instead of a button when used in this context.

4. Custom implementation: Create a specific version of SidebarMenuButton for dropdown triggers.

[realmorrisliu]

thanks!!! I'll try this later

[antonschegolev-kag]

Big thanks! Had the same issue.