ui icon indicating copy to clipboard operation
ui copied to clipboard

fix(calendar): add ref forwarding to Button component for react-day-picker compatibility

Open Hamed-Ajaj opened this issue 1 week ago • 1 comments

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 avatar Dec 15 '25 08:12 Hamed-Ajaj

@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.

vercel[bot] avatar Dec 15 '25 08:12 vercel[bot]