Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Form] Add support to control with other primitives #2659

Open
martinxu9 opened this issue Jan 22, 2024 · 4 comments · May be fixed by #3221
Open

[Form] Add support to control with other primitives #2659

martinxu9 opened this issue Jan 22, 2024 · 4 comments · May be fixed by #3221
Labels
Package: react/form Type: Enhancement Small enhancement to existing primitive/feature

Comments

@martinxu9
Copy link

Question

Regarding Forms, is there a timeline on the below gap (quoting from here )? Thanks!

Note: At the moment, it is not possible to compose Form with Radix's other form primitives such as Checkbox, Select, etc. We are working on a solution for this.

@martinxu9 martinxu9 changed the title [Form] Timeline on composing control with other primitives [Form] Timeline on supporting composing control with other primitives Jan 22, 2024
@benoitgrelard
Copy link
Contributor

This is something we definitely want to look at but haven't had the time to prioritize.
It will require significant changes under the hood for these primitives, so it isn't a small change.

@benoitgrelard benoitgrelard added Type: Enhancement Small enhancement to existing primitive/feature Package: react/form labels Mar 8, 2024
@benoitgrelard benoitgrelard changed the title [Form] Timeline on supporting composing control with other primitives [Form] Add support to control with other primitives Mar 8, 2024
@jd-carroll
Copy link

Let's say I had a few days to invest in getting radix/form working with radix/themes (not that I expect I would produce releasable quality code).

The core issue blocking radix/primitives from working with radix/form is not immediately apparent to me. Is it an issue with the context's?

What I'd like to do is have an SSR form that is displayed when the user first loads the site (think sign-up page). This seems pretty straight forward (even with radix/themes) using the strategy already laid out. (ie. leverage defined validity "states" with defined messages and then data- states and onChange handlers on the input component)

But I'm sure I'm missing some significant pieces here, mostly just curious.

@bdrtsky
Copy link

bdrtsky commented Aug 8, 2024

@jd-carroll I did some small research, the issue with Radix primitives is that it seems like onInvalid event is not propagated, since Radix rendering other elements as button etc, and actual HTML input or select is hidden. On the form you can listen onInvalid with Radix primitives just fine! I feel like you need to pass those events to primitives Root and this should solve the issue.

@bdrtsky
Copy link

bdrtsky commented Aug 8, 2024

Another thing you would need to do, is to handle focus properly, because currently Form trying to focus aria-hidden inputs on validation, which throws an error in devtools

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Package: react/form Type: Enhancement Small enhancement to existing primitive/feature
Projects
None yet
4 participants