Warning: Function components cannot be given refs in DropdownMenuTrigger

[jiweiyuan]

Bug Description

When using CopilotChat component, React throws a warning about function components not being able to receive refs:

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 `Primitive.button.SlotClone`.
    at DropdownMenuTrigger
    at CopilotChatInput2.AddMenuButton

Steps to Reproduce

1. Use <CopilotChat /> component in a React application
2. Open browser console
3. Warning appears on render

Expected Behavior

No warning should appear - all components passed to Radix UI's DropdownMenuTrigger should properly forward refs.

Actual Behavior

Warning is logged to console on every render of the CopilotChat component.

Environment

• @copilotkit/react-core: v2 (latest)
• React: 18.x
• Browser: Chrome

Root Cause Analysis

The AddMenuButton component inside CopilotChatInput passes a function component to DropdownMenuTrigger that doesn't use React.forwardRef(). Radix UI's DropdownMenuTrigger expects its child to forward refs for accessibility and focus management.

Suggested Fix

Wrap the button component passed to DropdownMenuTrigger with React.forwardRef():

const TriggerButton = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => (
  <button ref={ref} {...props} />
));

Related Issues

• shadcn/ui #6872 - Similar issue with Sidebar in Dialog
• Radix Primitives #3765 - forwardRef deprecation in React 19

[copilotkit-support-bot]

The warning occurs because AddMenuButton is a function component that renders a Button element but doesn't forward the ref prop. My searches across the codebase (including regex scans for forwardRef patterns and symbol references to AddMenuButton) found no existing fixes or guidance for this specific issue. To resolve this, wrap AddMenuButton with React's forwardRef to ensure the ref is properly passed to the underlying Button component.

Details

Based on my analysis of the codebase, particularly the CopilotChatInput.tsx file where AddMenuButton is defined, here's what I found regarding the React ref warning when using DropdownMenuTrigger (likely from a UI library like Radix UI) with the asChild prop:

• Issue Confirmation: The warning occurs because AddMenuButton is a function component that renders a Button element but doesn't forward the ref prop. When DropdownMenuTrigger uses asChild, it needs the child component to forward refs for proper DOM mounting. Without forwardRef, React can't attach the trigger's ref to the DOM element.

• Existing Fixes/Guidance: My searches across the codebase (including regex scans for forwardRef patterns and symbol references to AddMenuButton) found no existing fixes or guidance for this specific issue. The component is used in contexts where ref forwarding isn't currently implemented, leading to the warning.

• Suggested Solution: To resolve this, wrap AddMenuButton with React's forwardRef to ensure the ref is properly passed to the underlying Button component. Here's an example modification based on the current implementation in CopilotChatInput.tsx:

// Assuming this is near the existing AddMenuButton definition (around lines 1001-1030 in src/v2.x/packages/react/src/components/chat/CopilotChatInput.tsx)
import React from 'react';
import { Button } from 'your-ui-library'; // Replace with actual Button import

const AddMenuButton = React.forwardRef<HTMLButtonElement, YourButtonProps>((props, ref) => {
  return <Button ref={ref} {...props} /* other props */ />;
});

// Then in your CopilotChat or CopilotChatInput component:
<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <AddMenuButton />
  </DropdownMenuTrigger>
  {/* other dropdown items */}
</DropdownMenu>

Note: This is an exact modification pattern derived from the component's structure (which renders a Button but doesn't handle refs). Adapt the props type (YourButtonProps) to match the actual props interface for AddMenuButton.

Source Code References:

• AddMenuButton Implementation

Documentation References:

• No specific docs cover this ref forwarding scenario in CopilotKit docs.
• For React forwardRef patterns, refer to React official docs (not directly from this codebase).

Confidence Level: High - This solution directly addresses the warning based on the component's code structure. If the Button import or props differ, slight adjustments may be needed, but the core fix is wrapping with forwardRef. No additional investigation required for this resolution.

---

Was this helpful?

If this solution worked for you, please click on the appropriate option below to help us improve:

✅ Issue Solved | ❌ Need more help

[copilotkit-support-bot]

👋 Thanks for your feedback!

I've escalated this issue to our development team. Someone from our team will review your request and provide additional assistance shortly.

If this is blocking production, please book a meeting with us at https://cal.com/nathan-tarbert-copilotkit/15min