issue: [docs] 'Checkboxes' example of useController is wrong

[lulumetro]

Version Number

7.22.5+

Codesandbox/Expo snack

https://codesandbox.io/s/usecontroller-checkboxes-forked-uhxd2?file=/src/App.js

Steps to reproduce

1. Go to 'controlled' checkboxes in CSB
2. Click on the first checkbox
3. See how second checbox (checked by default) is unchecked

Then if you click again on the 2nd checbox, the 5th (also initially checked) is unchecked too and so on

Expected behaviour

Checkboxes in 'defaultValues' should keep its checked status regardless of other checkboxes being checked.

I commented about this behavior in https://github.com/react-hook-form/react-hook-form/issues/476. I've forked the CSB adding some more checkboxes to the 'controlled' section and changed the default values.

What browsers are you seeing the problem on?

No response

Relevant log output

No response

Code of Conduct

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

[bluebill1049]

if you look closely at my example the index of value matters, perhaps we can have a better example to illustrate. your issue is due to your detail value, i believe should be this: controlled: ['',"b",'','', "e"],

[lulumetro]

Thanks @bluebill1049, I've created a new CSB changing the default value: https://codesandbox.io/s/usecontroller-checkboxes-forked-d8gwm?file=/src/App.js

The relevant changes are here: ` ... const controlledOptions = ["a", "b", "c", "d", "e", "f"]; const valuesFromDB = ["b", "e"];

const { register, handleSubmit, control } = useForm({ defaultValues: { controlled: controlledOptions.map((option) => valuesFromDB.includes(option) ? option : "" ) } }); ... <Checkboxes options={controlledOptions} control={control} name="controlled" /> ... ` Maybe applying similar changes to the example in the docs would make more clear how to provide the default values.

Anyway, do you think it would be possible to avoid this "left join" between the full options and the default values? For some reason I feel it like suboptimal :neutral_face:

[thispastwinter]

Thanks @bluebill1049, I've created a new CSB changing the default value: https://codesandbox.io/s/usecontroller-checkboxes-forked-d8gwm?file=/src/App.js

The relevant changes are here: ` ... const controlledOptions = ["a", "b", "c", "d", "e", "f"]; const valuesFromDB = ["b", "e"];

const { register, handleSubmit, control } = useForm({ defaultValues: { controlled: controlledOptions.map((option) => valuesFromDB.includes(option) ? option : "" ) } }); ... ... ` Maybe applying similar changes to the example in the docs would make more clear how to provide the default values.

Anyway, do you think it would be possible to avoid this "left join" between the full options and the default values? For some reason I feel it like suboptimal 😐

The only thing I'd add here, is filtering out null values from the array.

For example in our onChange callback, it might look something like this:

onChange={(e) => {
                const valueCopy = [...value]
                // update checkbox value
                valueCopy[index] = e.target.checked ? e.target.value : null
                // send data to react hook form
                field.onChange(valueCopy.filter(Boolean))
                // update local state
                setValue(valueCopy)
              }}

That way the array expands and contracts with our selections, rather than leaving behind a null artifact.