Errors not updated when the input is disabled

[halljus]

Hi,

I'm trying to accomplish some async validation with Conform and Zod in a Remix app and running into something I don't quite understand. In my action, I use Zod's superRefine and Conform's refine and I specify the path to the field because I'm calling superRefine on the schema itself rather than on the field. It's very similar to what Kent is doing in his Epic Stack on the signup route, except I'm using refine and he's doing it manually (I tried that too, just to see if there was any difference and there wasn't).

The issue is the validation error I specify is showing up in the field config's initialError property under the "" key instead of under the errors array. In and of itself, this is merely an inconvenience as I have to do some additional checking to determine what errors to render, but the real problem I think it's causing is the invalid input does not get focused like it does under normal circumstances when there's a validation error. I'm assuming (perhaps incorrectly) that this is because it's presenting as a form-level error (that's my understanding of the "" key anyway) instead of a field-level error.

I've verified that the lastSubmission value on the client is as I would expect, but the field config doesn't seem to match up.

Here's a silly screenshot in case it helps:

Any thoughts? Thanks.

[edmundhung]

Thanks for the detailed report @halljus . It does looks like a bug to me. But I am not able to reproduce the problem you had. Any chance you can provide a codesandbox / repository that reproduce the problem?

[halljus]

@edmundhung I simplified the repro a bit and discovered something bizarre... If you comment out the Remix loader, everything works as expected. I'm not even using the loader data in this example (but I am in the real app of course). So it appears just the act of having a loader at all is what is giving Conform trouble? Strange.

[edmundhung]

@halljus I think I understand your problem now. All you need to do is to define isSubmitting as fetcher.state === 'submitting' instead of fetcher.state !== 'idle'. (or to verify it quickly, just remove the disabled attribute from the fieldset element)

First of all, Conform utilize the Constraint Validation API for error handling and suffers from its limitation as well, in which disabled field cannot be validated. When you form is submitted, remix transition from idle to submitting. Once the action is processed and the submission is sent back to the client, it transition to loading again to revalidate the loader (if a loader is defined). This is when things goes wrong: Your actionData is updated with the new submission result and trigger Conform to update the error, but all your fields are still disabled because the state is not yet idle. So the solution here is to disable the form only when the state is submitting.

I am sorry for the confusion. This is something I should have documented properly. I am also re-working on an alternative approach to get around the limitation we have at the moment.

References:

• Remix docs on fetcher.state
• More explanation about state from react-router docs

[halljus]

Ah, now I understand the issue - interesting. I know how fetcher.state works, and I intentionally defined isSubmitting as fetcher.state !== 'idle' because I wanted to keep the fieldset disabled while the loader was revalidating (not just submitting). I guess there's really no way to accomplish that with Conform validation as it stands currently, but you're saying this should be possible in the future?

Thanks!

[edmundhung]

If you want to have the fields disabled on revalidation, you can do this:

function Example() {
  const fetcher = useFetcher();
  const actionData = useActionData();
  const [form, fields] = useForm({
    lastSubmission: fetcher.state === 'idle' ? actionData?.submission : undefined,
  });
}

[halljus]

Oh, and that allows me to keep my existing isSubmitting = fetcher.state !== 'idle' logic and still validates correctly - hooray! Thank you. 🙂

(I don't have actionData as I'm using a fetcher, so it's fetcher.data for me, but it works all the same.)