React-hook-form: Trouble with <Controller>, checkboxes and react-semantic-ui

[ehahn9]

I've tried a number of things (see comments in the snippet below) but I cannot figure out how to
make <Controller> work with a react-semantic-ui Form.Checkbox. (BTW, Form.Select has similar challenges). Form.Input works like a champ.

I'm sure it's a simple problem!

To Reproduce

        const { control, errors } = useForm({  mode: 'onChange', defaultValues: { checkBox: true }  });

        // ... 

        <Controller
          name="checkBox"
          control={control}
          rules={{ required: true }}
          // defaultValue={true}
          // valueName="checked"
          // onChange={data => data.checked}
          as={<Form.Checkbox label="I agree to the Terms and Conditions" error={!!errors.checkBox} />}
        />

• If I omit the valueName, I get Failed prop type: Invalid prop value supplied to Checkbox.
• If I include the valueName and omit the custom onChange handler, I get Invalid prop checked of type object supplied to Checkbox
• If I include both, I get a strange behavior where clicking on the checkbox doesn't change it's value and the form becomes invalid (checkbox is required).
• The placement of defaultValue doesn't seem to make a difference

Any help/suggestions greatly appreciated!

[bluebill1049]

can you provide a codesandbox?

[ehahn9]

I think it's solved (yay!) -- the callback signature of onChanged is truly odd (see below). Closing the issue with this final solution:

    <Controller
          name="checkBox"
          control={control}
          label="I agree to the Terms and Conditions"
          error={!!errors.checkBox}
          defaultValue={false}
          as={Form.Checkbox}
          valueName="checked"
          onChange={([_, data]) => data.checked}
      />

I've no idea why that signature is in play -- seems very surprising to me (an array as the arg?) but that is indeed what I get back. Interestingly, this is only odd for checkboxes and selects -- regular input fields don't need the special onChange...

(note I also moved all the props into the <Controller> node and now just have as={Form.Checkbox}
which looks nicer in markup IMO :-)

[bluebill1049]

awesome. because we propagating the arguments with spread operator. maybe we can improve on the next major version.