issue: setValue won't set the value to an array on a nested input

[slax57]

Version Number

7.51.5

Codesandbox/Expo snack

https://codesandbox.io/p/sandbox/react-hook-form-v7-ts-setvalue-forked-chhp6s?file=%2Fsrc%2Findex.tsx%3A52%2C73

Steps to reproduce

1. Click on the Set Value Of "nested" To {"tags":[2,3]} button

Notice the input value was not updated.

Expected behaviour

I was expecting the value to be updated.

Indeed, it works for non-array values (such as 2), and also works when calling setValue on the exact path ("nested.tags" instead of the root path `"nested").

I saw nothing in the docs that indicates this is not supported, only that the input needs to be registered before doing so but this is the case here.

Thank you so much.

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]

I would recommend doing setValue with the field path in a loop instead.

setValue('nested', { tags: [2, 3] })

would be interrupted to

setValue(`nested.tags.[0]`, '2')
setValue(`nested.tags.[1]`, '3')

[slax57]

Thank you for your answer.

FTR, this can be cumbersome to do in cases (like ours) when you dont know upfront what fields are array fields. It would be much simpler if we could just call setValue('nested', { tags: [2, 3] }).

Currently we were able to workaround this limitation with the following code:

const setValueWithArraySupport = (
    form: UseFormReturn,
    path: string,
    value: any,
    options?: Partial<{
        shouldValidate: boolean;
        shouldDirty: boolean;
        shouldTouch: boolean;
    }>
) => {
    // First call setValue for the whole object, as it works fine for non-array values
    form.setValue(path, value, options);
    // Then call the workaround
    setArrayValueWithExactPath(form, path, value, options);
};

const setArrayValueWithExactPath = (
    form: UseFormReturn,
    path: string,
    value: any,
    options?: Partial<{
        shouldValidate: boolean;
        shouldDirty: boolean;
        shouldTouch: boolean;
    }>
) => {
    if (!value || typeof value !== 'object') return;
    // If value is an array, call setValue on the exact path
    if (Array.isArray(value)) {
        form.setValue(path, value, options);
        return;
    }
    // Else, recursively call setValue on each key
    Object.keys(value).forEach(key => {
        const keyPath = `${path}.${key}`;
        const keyValue = value[key];
        setArrayValueWithExactPath(form, keyPath, keyValue, options);
    });
};

Which can be called like this:

-                       form.setValue(
+                       setValueWithArraySupport(
+                           form,
                            finalTemporaryFieldName,
                            finalData,
                            {
                                shouldDirty: false,
                                shouldValidate: false,
                                shouldTouch: false,
                            }
                        );

But I'm not sure it will support nested arrays.