Field with error is not focused when field is disabled while submitting

[susickypavel]

Hey 👋,

It seems like Fields that have isDisabled={form.isSubmitting} can't be focused when an error is present. I think this is unexpected.

Example form:

type LoginForm = {
	email: string
	password: string
}
export const ContactForm: Component<ContactFormProps> = () => {
	const loginForm = createForm<LoginForm>()

	return (
		<Form
			class="space-y-12 md:space-y-14 lg:space-y-16"
			of={loginForm}
			onSubmit={values => alert(JSON.stringify(values, null, 4))}
		>
			<div class="space-y-8 md:space-y-10 lg:space-y-12">
				<Field
					of={loginForm}
					name="email"
					validate={[
						required("Please enter your email."),
						email("The email address is badly formatted."),
					]}
				>
					{field => (
						<input
							{...field.props}
							value={field.value || ""}
							disabled={loginForm.submitting}
							type="email"
							placeholder="example@email.com"
							required
						/>
					)}
				</Field>
				<Field
					of={loginForm}
					name="password"
					validate={[
						required("Please enter your password."),
						minLength(8, "You password must have 8 characters or more."),
					]}
				>
					{field => (
						<input
							{...field.props}
							value={field.value || ""}
							disabled={loginForm.submitting}
							type="password"
							placeholder="********"
							required
						/>
					)}
				</Field>
			</div>
			<button type="submit">Submit</button>
		</Form>
	)
}

[fabian-hiller]

When you click the submit button, the form is submitted. The validation is a part of it and if your fields are disabled, they probably can't be focused. Therefore, this is currently the expected behavior. Why do you disable the fields when the form is submitted? I have not seen this on any login form yet. I would disable the submit button so that the form cannot be submitted while it is being submitted.

[susickypavel]

The login form is just an example of what I meant and how I implemented it.

I simply disable the fields so the user can't edit them until he gets the response back. Now I'm wondering whether it is a good idea or not.

I think of one use case, let's say you have client validation that passes, so you take that form data and send it to the server. The server does some validation & business logic, and it sends back 4xx error with an error related to some fields. You render the error along the field, but the user had changed the field's value before the response was acquired. Now the error & value are out of sync.

However, as you've said, disabling the submit button is the core thing here. Maybe disabling fields is a bad UX pattern, but I'd probably find few forms where it made sense, so I'll leave the decision whether to "fix" this up to you, but I think it seems natural to try to focus the error field only after when the form stops submitting.

[fabian-hiller]

I took a quick look at react-hook-form and it seems that's exactly how it's implemented there. If you want to disable the fields during submission but not during validation, you can write the following: disabled={loginForm.submitting && !loginForm.validating}.

However, I think that the fields should not be disabled. Normally a user does not change his input during submission because, for example, a loading animation is displayed, and if he does, he should be able to understand why an error message is displayed incorrectly due to his change.

[susickypavel]

Yeah disabling fields during submitting isn't probably a great idea in the end. I'll close this issue, thank you for the discussion and hopefully, I didn't waste your time! :D