adobe/react-spectrum

Unable to pass ref to Datepicker [react-aria-components]

Open

#7,756 opened on Feb 11, 2025

View on GitHub
 (10 comments) (7 reactions) (0 assignees)TypeScript (1,500 forks)auto 404
DatePickergood first issue

Repository metrics

Stars
 (15,634 stars)
PR merge metrics
 (PR metrics pending)

Description

Provide a general summary of the issue here

I have a custom Datepicker component that I'm integrating with react-hook-form. I was wondering which component should received the ref (passed by forwardRef), I need to do so since react hook form uses this ref to focus an element on error (think a form submission that has client validation)

I've tried with the DatePicker and DateInput but no luck.

🤔 Expected Behavior?

Ref should be received by the DatePicker or DateInput component.

😯 Current Behavior

Looks like the ref is not being received by the mentioned react-aria-components.

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

You can use the documentation https://react-spectrum.adobe.com/react-aria/DatePicker.html

Version

1.5.0

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

macos sequoia

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

Contributor guide

Research direction
Investigate how react aria components implements ref forwarding for DatePicker and DateInput. Check if these components accept refs and if the ref is forwarded to the appropriate DOM element for focus management. Look at the source code or documentation for forwardRef usage.
Tech stack
typescriptreact
Domain
frontend
Issue type
Bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Clear
Prerequisites
GitReactreact hook form
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60