Problem watching complex custom fields

I’m trying to implement a single source of truth via react-hook-form for my dynamic form. Let’s say there is a dynamic array of objects (animals) with props name and type, so the fields will have the following names: animals[index].name and animals[index].type. And type is a custom field. I watch all the animals using watch('animals'), animals can be added and removed dynamically and I have a few animals defined initially.

The problem appears when I try to register a custom field that has nested props, i.e. register({name: 'animals[0].type'}). It doesn’t matter if I have defaultValues suppled to the watch method or not I have the following error:

Uncaught TypeError: Cannot convert undefined or null to object

One possible workaround that I figured out is to manually set initial value right after the field was registered, i.e. setValue('animals[0].type', 'Cat'). But this makes the form dirty and it’s not the behavior I want for the initial fields.

The second issue is that even if I put type: 'custom' it won’t re-render component after setValue is called. I believe this is only when it’s a complex field (with nested props) and when you watch not all fields.

Expected behavior

1. watch method should either use defaultValues provided as the second argument when trying to resolve values for complex custom fields or just use undefined if defaultValues wasn’t provided
2. setValue should trigger re-render if a field was registered with type: 'custom' prop even if it’s a complex custom field.

P.S. Thank you for your great work on this library!

[GProst]

@bluebill1049 yep, will do! But probably tomorrow morning already 👍

[bluebill1049]

no worries 😃 whenever you have some free time 👍