[bug]: (sidebar-13): Function components cannot be given refs when using Sidebar in a Dialog

[suprunchuk]

Describe the bug

When using the Sidebar component within a Dialog component from shadcn/ui, a warning is thrown in the console:

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

Affected component/components

SidebarMenuButton

How to reproduce

1. Set up a new project with shadcn/ui components installed.
2. Create a settings-dialog.tsx file with the provided code that nests a Sidebar inside a Dialog.
3. Create a page.tsx file in the app/dashboard directory with the provided code to render the SettingsDialog.
4. Run the application using npm run dev or equivalent.
5. Open the browser console and trigger the SettingsDialog by clicking the "Open Dialog" button.
6. Observe the warning: Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Codesandbox/StackBlitz link

https://ui.shadcn.com/blocks/sidebar#sidebar-13

Logs

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:5173/src/components/ui/sidebar.tsx:497:27
SlotClone<@http://localhost:5173/node_modules/.vite/deps/chunk-HDHGXYFG.js?v=88a60195:73:38
Slot<@http://localhost:5173/node_modules/.vite/deps/chunk-HDHGXYFG.js?v=88a60195:54:38
Primitive</Node<@http://localhost:5173/node_modules/.vite/deps/chunk-L4XL26MT.js?v=88a60195:41:44
DialogTrigger<@http://localhost:5173/node_modules/.vite/deps/@radix-ui_react-dialog.js?v=88a60195:1156:48
DialogTrigger@http://localhost:5173/src/components/ui/dialog.tsx:25:23
li
SidebarMenuItem@http://localhost:5173/src/components/ui/sidebar.tsx:467:25
ul
SidebarMenu@http://localhost:5173/src/components/ui/sidebar.tsx:454:21
div
SidebarFooter@http://localhost:5173/src/components/ui/sidebar.tsx:360:23
div
div
div
Sidebar@http://localhost:5173/src/components/ui/sidebar.tsx:138:17
Provider@http://localhost:5173/node_modules/.vite/deps/chunk-BVAFDEYC.js?v=88a60195:51:47
Dialog@http://localhost:5173/node_modules/.vite/deps/@radix-ui_react-dialog.js?v=88a60195:1127:7
Dialog@http://localhost:5173/src/components/ui/dialog.tsx:14:16
AppSidebar@http://localhost:5173/src/components/app-sidebar.tsx?t=1741244310649:19:27
div
Provider@http://localhost:5173/node_modules/.vite/deps/chunk-BVAFDEYC.js?v=88a60195:51:47
TooltipProvider@http://localhost:5173/node_modules/.vite/deps/@radix-ui_react-tooltip.js?v=88a60195:2278:7
TooltipProvider@http://localhost:5173/src/components/ui/tooltip.tsx:13:25
SidebarProvider@http://localhost:5173/src/components/ui/sidebar.tsx:40:25
App@http://localhost:5173/src/App.tsx?t=1741244310649:18:57

System Info

System: Windows 11 pro
Binaries: Node.js v22.14.0, npm 11.1.0
Browsers: Chrome 134.0.6998.36

`package.json`



{
  "name": "frontend",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },
  "dependencies": {
    "@radix-ui/react-avatar": "^1.1.3",
    "@radix-ui/react-collapsible": "^1.1.3",
    "@radix-ui/react-dialog": "^1.1.6",
    "@radix-ui/react-dropdown-menu": "^2.1.6",
    "@radix-ui/react-separator": "^1.1.2",
    "@radix-ui/react-slot": "^1.1.2",
    "@radix-ui/react-tooltip": "^1.1.8",
    "@tailwindcss/vite": "^4.0.9",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "lucide-react": "^0.477.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "swr": "^2.3.2",
    "tailwind-merge": "^3.0.2",
    "tailwindcss": "^4.0.9",
    "tailwindcss-animate": "^1.0.7"
  },
  "devDependencies": {
    "@eslint/js": "^9.21.0",
    "@types/node": "^22.13.9",
    "@types/react": "^19.0.10",
    "@types/react-dom": "^19.0.4",
    "@vitejs/plugin-react-swc": "^3.8.0",
    "eslint": "^9.21.0",
    "eslint-plugin-react-hooks": "^5.1.0",
    "eslint-plugin-react-refresh": "^0.4.19",
    "globals": "^15.15.0",
    "typescript": "~5.7.2",
    "typescript-eslint": "^8.24.1",
    "vite": "^6.2.0"
  }
}

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues

[sarathkumarsasi]

Can I work on this issue @suprunchuk

[suprunchuk]

Can I work on this issue @suprunchuk

yeap

[xzedx]

The Drawer component also has this problem.