form.errors in Conform is empty when returning falsy value from zod string().transform() method

[waldothedeveloper]

I've noticed that when I return a falsy value from a .transform() fn from a zod schema, the form.errors are empty on the client side from the useForm hook provided by Conform.

Here's a codesandbox that I put together to troubleshoot this:

https://codesandbox.io/p/devbox/issue-with-conform-remix-t2qxpw?file=%2Fapp%2Froutes%2F_index.tsx%3A53%2C7

This is basically what I'm facing in my code, so I'm wondering if I'm doing something wrong, or if there's an actual issue with either Zod or Conform.

This is the same situation I have on my project:

Check line 63 to see the field addOn which is receiving a JSON, and I'm returning null: https://gist.github.com/waldothedeveloper/60801203d508188b57bc4701454e5671#file-gistfile1-txt-L63

And check line 175 where I have form.errors in a console.log but, it's totally empty.
https://gist.github.com/waldothedeveloper/60801203d508188b57bc4701454e5671#file-gistfile1-txt-L175

@edmundhung I would really appreciate your input :)

[edmundhung]

Hi @waldothedeveloper, thanks for preparing a sandbox :)

I notice one problem with the issue path when you are transforming the addons:

const schema = z.object({
  addOn: z.string().transform((val, ctx) => {
    if (val !== "bananas") {
      ctx.addIssue({
        code: z.ZodIssueCode.custom,
        message: "The value is not equal to bananas.",
        // The path below make it refers to `addOn.addOn` instead of `addon`, remove it will fix the problem
        path: ["addOn"],
      });
      return null;
    }
    return val;
  }),
});

The problem above is that both zod transform or refine has a concept of base path. As you are transforming at the addOn level, it uses addOn as a base path and whatever path you passed to the issue will become a sub-path. This will not be a problem if you transform at the object level which has root as the base path:

const schema = z
  .object({
    addOn: z.string(),
  })
  .transform((val, ctx) => {
    if (val.addOn !== "bananas") {
      ctx.addIssue({
        code: z.ZodIssueCode.custom,
        message: "The value is not equal to bananas.",
        // This will work
        path: ["addOn"],
      });
      return null;
    }
    return val;
  });

This change will get you the error you expected on fields.addOn.error. While form.errors would still be empty. As it refers to the form-level error instead of all errors in the form, which could happen if you have an error with path at the root, like this:

const schema = z
  .object({
    addOn: z.string(),
  })
  .transform((val, ctx) => {
    if (val.addOn !== "bananas") {
      ctx.addIssue({
        code: z.ZodIssueCode.custom,
        message: "The value is not equal to bananas.",
        // We didn't set any path here, so it use the root path
      });
      return null;
    }
    return val;
  });

With this setup, you will get the error on form.errors instead of fields.addOn.errors.

[waldothedeveloper]

omg thank you so much Edmund, I wasn't aware of this base path from zod, i'm learning remix, conform and zod all at once lol...Really appreciate the help!!

I have one last question though:

I noticed that if I pass an intentional value like value="JSON-for-example" to the input, React complaints that I'm passing a value without an onChange, so when I add readOnly the validation no longer works (I modified the codesandbox for this btw)

<input
    value={send_JSON_To_Server}
     readOnly
    {...conform.input(fields.addOn, {
        type: "text",
        hidden: true
     })}
 />

How do I treat hidden dummy/base inputs that will get a value from some React state ?

const [send_JSON_To_Server, set_Send_JSON_To_Server] = React.useState(null)

If I remove the readOnly it works, but then React complaints....how do I handle hidden inputs that needs a value from some React state, like a JSON array ( I want to send a JSON array back to the server like: [{addOn: 'abc', addOnPrice: '123'}]) that I will validate on the server using conform? I hope my question makes sense, if not, please let me know and I'll elaborate more.