-
Notifications
You must be signed in to change notification settings - Fork 1k
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鈥檒l occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add "form" attribute to all components that render an <input>, <textarea> or <select> #4117
Comments
I nearly ripped my eyes out writing this but here's a workaround if you're in an urgent need of a fix like myself: ref={
// Workaround for react-aria-components not supporting form attribute
// See https://github.com/adobe/react-spectrum/issues/4117
form
? (ref) => {
if (!ref) {
return;
}
// A hidden section rendered by react-aria-components
const nextSibling = ref.nextSibling;
if (!nextSibling || !(nextSibling instanceof HTMLElement)) {
return;
}
// A hidden input rendered by react-aria-components
const formElement = nextSibling.querySelector(`[name="${name}"]`);
if (!formElement) {
return;
}
formElement.setAttribute('form', form);
}
: undefined
} |
For components where you provide an For the others, I think we could consider exposing an inputRef on the component or adding it to the ref via a useImperativeHandle. If we do expose an inputRef then we'll have to determine how to deal with components that are implemented with multiple inputs, such as DatePicker or ColorArea. |
Hey, I used to rewire the
For the second use case, here is an example with a TextField, a NumberField and a Select. I tried with the |
Related #6262 I've taken to just reimplementing these hidden inputs myself. Here's an example, but keep in mind that this is only to be used in <input
className="sr-only"
type="checkbox"
aria-hidden={true}
tabIndex={-1}
value={isSelected ? checkedValue : uncheckedValue}
checked={!(required && !isSelected)}
required={required}
name={name}
form={form}
onChange={() => null}
/> Cannot believe that the supposedly golden standard component library overlooks this. |
馃檵 Feature Request
Add "form" attribute to all components that render an
<input>
,<textarea>
or<select>
.馃 Expected Behavior
Be able to set
form
attribute on the internal<input>
,<textarea>
or<select>
.馃槸 Current Behavior
form
attribute is not exposed.馃拋 Possible Solution
I have tried to use
ref
and setform
attribute in anuseEffect
. In some cases I am also usingdata-testid
to gain access to underlying DOM/input and setform
attribute in anuseEffect
. Neither is a good solution.Another solution is to not use internal
<input>
(not setname
on the component) and always use an external hidden<input>
.馃敠 Context
It is more practical some time to render form and fields in separate parts of the DOM. For example, in cases when I want each field to have its own form. I can still group fields with one fieldset and put forms outside while referencing them from the inputs.
The text was updated successfully, but these errors were encountered: