Skip to content

Conversation

@Hamed-Ajaj
Copy link

@Hamed-Ajaj Hamed-Ajaj commented Dec 15, 2025

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

@vercel
Copy link
Contributor

vercel bot commented Dec 15, 2025

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[bug]: calendar component can not pass ref

1 participant