issue: Form does not trigger onChange when registering nested optional objects

[slhck]

Version Number

7.45.2

Codesandbox/Expo snack

https://codesandbox.io/s/practical-buck-cg5wt2?file=/src/App.tsx

Steps to reproduce

1. Go to https://codesandbox.io/s/practical-buck-cg5wt2?file=/src/App.tsx
2. Click on the input checkbox

Expected behaviour

I expect the form to call onChange and subsequently trigger the useEffect that enables the submit button.

When I comment out this:

{...register("credentials.foo.username")}

The form behaves as expected.

However, once that field is present, despite it being optional, the form does not allow submitting anymore.

What browsers are you seeing the problem on?

Chrome

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[bluebill1049]

is this the same issue: #10744

[slhck]

I see a patch has been merged, thanks for pointing out the duplicate.

[slhck]

Note that this also does not work in 7.45.0, so it is not a direct duplicate of the issue.

I tried v7.45.3 and it still does not work:

Note that clicking the checkbox does not create a change in the form.

[slhck]

@bluebill1049 Any idea what this issue might be in relation to the other one? (It's not a duplicate but seems similar in behavior.)

[bluebill1049]

Does the latest fix this issue?

[leapful]

@slhck

You only marked credentials.foo as optional field but then crendetials.foo.username is in email pattern therefore it's always invalid and prevent submit form.

Furthermore, you are using useEffect with change dependencies on isDirty, isValid, errors which are unchanged after clicking on checkbox field, reason: isDirty is always true since credentials.foo.username is now having empty string value due to bind with native HTML input element and different with your default value, isValid is always false due to your zod schema validation.

If you want to trigger any action on change of the field, just put it in your custom onChange handler.

[slhck]

Thanks for your answer!

I already updated to the latest version 7.45.4 now.

You only marked credentials.foo as optional field but then crendetials.foo.username is in email pattern therefore it's always invalid and prevent submit form.

Even when I set it to .optional(), clicking the checkbox does not enable the submit button:

https://codesandbox.io/s/practical-buck-cg5wt2?file=/src/App.tsx

Also, the errors I get were always empty, not indicating that this part is missing.

credentials.foo.username is now having empty string value due to bind with native HTML input element and different with your default value

How would I fix this?

[leapful]

@slhck

Even when I set it to .optional(), clicking the checkbox does not enable the submit button

=> zod optional() does not accept empty string as valid optional value, it always triggers email validation and throw error on empty string value.

Also, the errors I get were always empty, not indicating that this part is missing. How would I fix this?

=> There is nothing wrong to fix, like I already explained in the previous comment, your change dependencies [isDirty, isValid, errors] for useEffect does not change over time in toggling your checkbox, therefore your handling inside useEffect only executes once.

You need to use useWatch on your checkbox field name to watch on change on its value or execute your handling directly inside onChange handler of checkbox field.

Working demo: https://codesandbox.io/s/friendly-jasper-l9z2hv?file=/src/App.tsx

[slhck]

Thanks for providing the demo. The button still was not enabled after clicking the checkbox, but I resolved this thanks to your pointer with:

username: z.coerce.string().email().optional().or(z.literal(""))

The underlying issue apparently is the email validation, for more context see: colinhacks/zod#310