adobe/react-spectrum

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

Open

#7.756 geöffnet am 11. Feb. 2025

Auf GitHub ansehen
 (10 Kommentare) (7 Reaktionen) (0 zugewiesene Personen)TypeScript (1.500 Forks)auto 404
DatePickergood first issue

Repository-Metriken

Stars
 (15.634 Stars)
PR-Merge-Metriken
 (PR-Metriken ausstehend)

Beschreibung

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-Richtung
Untersuchen Sie, wie react aria components das Ref Forwarding für DatePicker und DateInput implementiert. Prüfen Sie, ob diese Komponenten Refs akzeptieren und ob die Ref an das entsprechende DOM Element zur Fokusverwaltung weitergeleitet wird. Sehen Sie sich den Quellcode oder die Dokumentation zur Verwendung von forwardRef an.
Tech Stack
typescriptreact
Domain
frontend
Issue Type
Fehler
SchwierigkeitGeschätzte Implementierungsschwierigkeit für neue Contributors, von 1 für sehr kleine Änderungen bis 5 für Expertenarbeit.
2
Geschätzte ZeitEin grober Zeitrahmen, um zu recherchieren, zu implementieren, zu testen und einen Pull Request vorzubereiten.
1-3 Stunden
AktivitätsstatusWie verfügbar das Issue gerade wirkt: frisch, aktiv, stale, blockiert oder wartet auf Maintainer-Input.
Aktiv
KlarheitWie klar das Issue die erwartete Änderung, Akzeptanzkriterien und den nächsten Schritt erklärt.
Klar
Voraussetzungen
GitReactreact hook form
EinsteigerfreundlichkeitEin Score von 1 bis 100, der schätzt, wie zugänglich dieses Issue für First-Time Contributors ist.
60