Open tsiq-jeremy opened 5 years ago
AFAIK <form disabled>
is invalid. This would be quite magical. Need to think about it more.
This can be implemented in user land by building a custom <Form>
and using the DOM. The tricky thing is that not all Fields are inputs
and not all users use <Field>
.
For a project we built a custom <Form>
component that under the hood uses react context to pass the disabled prop to all of the input components. As you mentioned, probably the trickiest parts is normalizing all of the input components so that they take the same disabled
prop. For instance react-select takes as prop isDisabled
so you would need a mapping that accounts for this.
Could disabled={isSubmitting}
be the default behavior of <Field>
?
The tricky thing is that not all Fields are
inputs
and not all users use<Field>
.
cc @lambert-velir
disabled
is a valid attribute for all form elements, input
, textarea
, select
, which is what the component
prop of <Field>
expects. https://jaredpalmer.com/formik/docs/api/field#component
If the user passes a custom React component, I would think they would either pass disabled
through to the underlying input
, etc, or handle it the same way.
Why not using a fieldset
at the top level? You can disabled all the fields inside doing just <fieldset disabled>
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset#Attributes
Thanks @gtournie. For anyone else using antd, the inputs won't look disabled, so you might need a bit of CSS, eg this quick hack:
fieldset:disabled input {
background: #ddd;
cursor: wait;
}
Here's what I'm doing:
function FormInput(props) {
return (
<Field name={props.name}>
{({ field, form })=> (
<Input
{...field}
disabled={form.isSubmitting || props.disabled}
error={
form.touched[field.name]
? form.errors[field.name]
: null
}
/>
)}
</Field>
);
}
For material-ui form items, I have created a custom form component with an additional context. Form gets a isDisabled
prop and passes it to the context. Each form item inside the form consumes this context and they can also use their own disabled
prop. This may not be the perfect solution. But it is simple and maintainable :)
const FormikDisabler = ({ disabled }: { disabled?: boolean }) => {
const { setSubmitting } = useFormikContext();
useEffect(() => {
if (disabled) {
setSubmitting(true);
} else {
setSubmitting(false);
}
}, [disabled, setSubmitting]);
return null;
};
usage:
<Formik ...>
<Form>
<FormikDisabler disabled />
...
</Form>
</Formik>
I think a plugin api would be the right way to add functionality like this. #3109
This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 60 days
@gtournie thanks
Why not using a
fieldset
at the top level? You can disabled all the fields inside doing just<fieldset disabled>
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset#Attributes
@gtournie <fieldset disabled>
might be a good solution but it doesn't work as expected with all MUI form components. Still waiting for a solution
🚀 Feature request
I want to be able to make all Fields/inputs in a form be
disabled
through the top level Form component. Our goal is that while submitting, we disable the form so the user can not change the fields during this time.Current Behavior
Currently you would need to pass
disabled
prop to every input like this:Desired Behavior
Instead it would be nice to pass the disabled prop just to the Form and have it be passed down to the Field's.
Who does this impact? Who is this for?
This is helpful for anyone who has to regularly prevent users from filling out fields or wanting to toggle a form to be read only.
Additional context
Docs on the disabled attribute. https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/disabled
I have not done research on how this works with other types of inputs such as checkboxes or select.