Fix default value for checkbox group

[tedliang]

For checkbox group, the default value should be [] instead of false.
https://codesandbox.io/s/react-hook-form-js-forked-6hd9uc

[bluebill1049]

i will try with check undefined.

[bluebill1049]

hmm i think we need to look a bit further than doing === false check, as undefined check failed.

[bluebill1049]

i think instead of introducing this fix (which i appreciated your time to look into), maybe we can simply apply a defaultvalues to be [] to resolve this issue.

[tedliang]

If you have a look the test in this merge request, we init the form with string[] type for field test:

    const { register, handleSubmit } = useForm<{
      test: string[];
    }>();
    ...
    await waitFor(() =>
      expect(callback).toHaveBeenCalledWith(
        {
          test: [],
        },
        expect.any(Object),
      ),
    );

When submit button is clicked, the value returned from hook form is false instead of []. The type is not matched. Do you think it's a desired behaviour from user point of view?

It returns [] in v6. This is one of the backward incompatible changes when we are upgrading to v7.

[bluebill1049]

Do you think it's a desired behaviour from user point of view?

Probably not, but like what I have suggested above, there is a workaround to achieve what is desired behavior. The nature of not knowing what's in the render (without defaultValue) is the trouble here, which presented below with your fix

-> first checkbox does not check ok default
-> the second checkbox oh ok the last one is default false and there is more than one I change the default value to [] on the run time.

I would like to avoid this above, as this is troublesome as it depends on the number of the checkbox to determine defaultValue while it's more predictable for the user to simplify supply with a default value as an empty array for the lib to fallback.

[tedliang]

Right, I can see your point. Determine it's checkbox group or not by the default value instead of number of elements. I do have this kind of requirement. There is only one option in the checkbox group. We still want the return value to be string[]. At the moment, my workaround is adding a hidden input. I would like to avoid this workaround. Will you consider to support this?

[bluebill1049]

could you provide a defaultValues at the useForm? or that's not a valid worked around? I think it's safer to tell hook form from the useForm level, that's a group of checkboxes or a single, like suggested above the fix you are trying to introduce is a just bandit, which could lead to an issue with a number of checkbox increase or decrease at the render phase.

[tedliang]

Have a look this one: https://codesandbox.io/s/react-hook-form-js-forked-bz9j1g
I will expect the checkbox is not check after initialised.
click submit should return [],
click checkbox and then submit should return ['A'],
click checkbox again and then submit should return [].

I will prefer to tell hook form the checkbox field is single or group from register level.

[bluebill1049]

I think you want to build a controlled component for your requirement and wrapped with Controller, all of these can be avoided. register is pretty simple and opinionated in terms of checkboxes, in terms of flexibility which you want with single/array, array/array, no default/array.

[bluebill1049]

• checkbox without defaultValues return false https://codesandbox.io/s/react-hook-form-js-forked-ce6q8w?file=/src/App.js
• checkboxes without defaultValues return false https://codesandbox.io/s/react-hook-form-js-forked-1b5njd?file=/src/App.js
• checkboxes with defaultValues return []: https://codesandbox.io/s/react-hook-form-js-forked-zlvrp8?file=/src/App.js

[tedliang]

for the second one https://codesandbox.io/s/react-hook-form-js-forked-1b5njd?file=/src/App.js
It returns false when you click the submit button.
What do you expect when the first checkbox is clicked twice(check and then uncheck)?