ui
ui copied to clipboard
fix(calendar): add ref forwarding to Button component for react-day-picker compatibility
Description
Fixes the Calendar component's inability to forward refs to the Button component used in CalendarDayButton. The react-day-picker library requires ref forwarding for proper focus management and keyboard navigation.
Problem
The Base UI Button component was not forwarding refs, causing TypeScript errors when used in the Calendar component:
Property 'ref' does not exist on type 'IntrinsicAttributes & ButtonProps'
Solution
Wrapped the Button component with React.forwardRef to properly forward refs to the underlying ButtonPrimitive component.
Changes Made
Before:
function Button({
className,
variant = "default",
size = "default",
...props
}: ButtonPrimitive.Props & VariantProps) {
return (
)
}
After:
const Button = React.forwardRef(
({ className, variant = "default", size = "default", ...props }, ref) => {
return (
)
}
)
Button.displayName = "Button"
Related Issue
Closes #9046
Testing
- Verified Calendar component compiles without TypeScript errors
- Tested that refs are properly forwarded to button elements
- Confirmed no breaking changes to existing Button component usage
@Hamed-Ajaj is attempting to deploy a commit to the shadcn-pro Team on Vercel.
A member of the Team first needs to authorize it.