Checkbox group with Material UI and v7

[celtric]

I'm not able to have a working checkbox group with Material UI and react-hook-form v7. I've tried multiple approaches following the official documentation, code snippets and countless threads, but I cannot get the combination right.

My use case reduced to the absolute minimum (without Material UI) is defined in the following Codesandbox link:

https://codesandbox.io/s/friendly-austin-8s0ot?file=/src/App.tsx

The following link works partially. It doesn't show the initial values and it needs a click to any checkbox to "wake the form up", but after that the form works as expected:

https://codesandbox.io/s/quirky-mirzakhani-oxvwp?file=/src/App.tsx

As a note, I've tried with and without <Controller /> with no success. I'm looking for the simplest approach without having to create my own components or using useController().

Any help or hint would be greatly appreciated.

[bluebill1049]

what's the issue here? I am not very clear on the problem.

Does this link have the issue?
https://codesandbox.io/s/quirky-mirzakhani-oxvwp?file=/src/App.tsx

what's the step to reproduce the problem?

[celtric]

The link you shared does have the issue. Both links start from the same initial values, which are that the First tag checkbox should be checked. In the case of the link you shared, no checkbox is checked. Some additional steps to see the problem:

1. First tag should be checked, it's not.
2. Click Submit. The submitted values are actually correct (["First tag"] is received) so it looks like the checkbox is not representing its state correctly.
3. Click on First tag checkbox. Nothing apparently happens (goes from unchecked to unchecked).
4. Click Submit again. The submitted values have changed ([] is received), so the previous action did actually register.
5. From now on the checkboxes are always in sync with the submitted values.

[leapful]

@celtric

In your example, the "First tag" is not checked because Material UI expects it should be set with prop "defaultChecked" or "checked".

When clicking on the "First tag" checkbox at the first time, react-hook-form will remove the value "First tag" and update DOM element of the checkbox but because it's already "unchecked" therefore it remains the same state "unchecked", that's why when clicking "Submit", the value is empty array.

With checkbox group use case, it would be recommended to use Controller component or useController hook because it provides the selected value array of checkboxes in order to set checked or unchecked state.

Working sample: https://codesandbox.io/s/busy-rhodes-56z14?file=/src/App.tsx

[bluebill1049]

Thank you so much @leapful! you want to share a working version @celtric i think we should put this into the doc.

[celtric]

Sounds good. Should I prepare a PR in the documentation repository or just share the code snippet here?

[bluebill1049]

If you can share a codesandbox, I will find a section to fit it in.

[celtric]

The following codesandbox includes @leapful solution with some additional MUI components that are probably what most users will use:

https://codesandbox.io/s/rqfns?file=/src/App.tsx

Let me know if this is enough or some changes are required. Thanks @bluebill1049.

[bluebill1049]

thanks i will post it up in the doc

[Sbabureddy]

@celtric @bluebill1049 can you extend the above codesandbox to work with array of objects.

example: Available Tags as [{label: "First tag", taggingLabel: "Avialabletags: First tag"}, {label: "Second tag", taggingLabel: "Avialabletags: Second tag"}]